Tagapili ng kulay

Ang Tagapili ng kulay ay isang libreng tool na nagbibigay-daan sa iyong pumili ng kulay sa browser at makuha ang value nito sa format na kailangan mo.

Ano ang ibinibigay ng tagapili ng kulay?

Ang tagapili ng kulay ay nagbibigay ng numerikong representasyon ng kulay na pinili sa color wheel. Maaaring ilarawan ang iisang nakikitang kulay sa iba't ibang format, karaniwang hexadecimal, RGB, RGBA, HSL o HSLA.

Magkakaiba ang paraan ng mga format na ito sa paglalarawan ng kulay. Tinutukoy ng hexadecimal at RGB ang mga value ng red, green at blue channel. Gumagamit naman ang HSL ng hue, saturation at lightness, kaya mas madaling gumawa ng mga sistematikong pagbabago. Inilalarawan din ng mga format na may alpha channel ang opacity.

• Ang mga value na Hexadecimal ay gumagamit ng hash na sinusundan ng mga hexadecimal digit, gaya ng #336699.
• Karaniwang inilalarawan ng mga value na RGB ang bawat channel bilang numero mula 0 hanggang 255, gaya ng rgb(51, 102, 153).
• Inilalarawan ng mga value na HSL ang anggulo ng hue at mga percentage value para sa saturation at lightness, gaya ng hsl(210, 50%, 40%).
• Nagdaragdag ng transparency ang RGBA at HSLA. Ang alpha value na 0 ay ganap na transparent, habang ang 1 ay ganap na opaque.

Sinusuportahan din ng CSS ang mga kulay na may pangalan, pero limitado ang mga ito sa isang nakatakdang hanay at hindi gaanong angkop sa eksaktong mga design token. Karaniwang mas madaling ilipat ang mga nabuong numerikong value sa pagitan ng mga design system, stylesheet at application code.

Paano gamitin ang tagapili ng kulay?

Piliin ang field na Kulay, piliin ang kinakailangang punto sa color wheel, at gamitin ang resultang value sa format na kailangan ng iyong application. Ganap na ginagawa sa iyong browser ang proseso, at hindi kailanman ina-upload sa server ang inilagay na kulay.

Kung para sa dati nang interface, magsimula sa format na ginagamit na sa codebase. Maiiwasan nito ang mga hindi kailangang conversion ng kulay at magiging mas madaling suriin ang mga pull request. Kapag tumitingin ng data mula sa third party, alamin muna kung may opacity ang mga value nito bago palitan ang mga iyon ng kulay na mukhang katumbas.

Bago mag-deploy, praktikal na piliin o buuing muli ang nilalayong kulay, kopyahin ang naaangkop na notation, at tingnan ito sa aktuwal na state ng component. Hiwalay na subukan ang normal, hover, focus at disabled na mga state dahil maaaring baguhin ng opacity at mga inherited style ang huling lalabas na resulta.

Paano basahin ang resulta

Basahin ang resulta ayon sa color model nito, at tingnan ang anumang alpha component bago ito kopyahin sa code. Sa RGB, kinokontrol ng bawat channel value ang intensity ng kaukulang red, green o blue component. Sa HSL, umiikot ang hue sa color wheel, kinokontrol ng saturation ang intensity ng kulay, at kinokontrol ng lightness ang balanse sa pagitan ng itim at puti.

Mahigpit ang syntax ng kulay kapag ginagamit sa CSS o structured data. Narito ang mga karaniwang pagkakamali kapag mano-manong nag-e-edit:

• hindi paglalagay ng hash sa unahan ng hexadecimal CSS value;
• paggamit ng lima o pitong hexadecimal digit, na hindi wastong karaniwang haba ng hex;
• paglalagay ng mga percentage kung channel number ang inaasahan ng RGB implementation;
• pagkalimot sa mga kuwit sa legacy RGB syntax, o paghahalo ng hindi magkatugmang luma at modernong syntax;
• pagkopya ng value na may alpha sa software na tumatanggap lamang ng anim na digit na hex;
• paggamit ng decimal comma, gaya ng 0,5, kung decimal point ang kailangan ng CSS, gaya ng 0.5.

Gumagawa ang tagapili ng mga color value, pero hindi ito pangkalahatang CSS validator. Hindi nito mapapatunayang wasto ang nakapaligid na declaration, JSON document o theme file, kaya kailangan pa ring suriin sa naaangkop na parser o development tool ang mga syntax error sa labas ng color value.

Mga halimbawa ng conversion ng kulay

Sa anim na digit na hexadecimal na kulay, tumutugma ang bawat pares ng digit sa red, green at blue. Halimbawa, inilalarawan ng mga sumusunod na representasyon ang iisang opaque na kulay.

Hex value #336699

Katumbas na RGB rgb(51, 102, 153)

Katumbas na HSL hsl(210, 50%, 40%)

Ang tatlong digit na hex ay pinaikling anyo. Inuulit ang bawat digit upang makabuo ng anim na digit na value.

Maikling hex value #fff

Pinalawak na hex #ffffff

Katumbas na RGB rgb(255, 255, 255)

May kasamang alpha ang walong digit na hex pagkatapos ng mga pares para sa red, green at blue. Mag-ingat sa mga system na gumagamit ng ibang pagkakasunod-sunod ng channel o hindi tumatanggap ng walong digit na notation. Maaari ding mag-iba ang resulta ng isang solid na kulay na mukhang eksaktong pareho kapag nilagyan ito ng opacity sa ibabaw ng ibang background.

Aling format ng kulay ang dapat kong piliin?

Piliin ang color notation na inaasahan na ng paglilipatan nito, maliban kung may malinaw na dahilan para baguhin iyon. Maikli at karaniwang ginagamit ang anim na digit na hex sa mga CSS variable at design token file. Maginhawa ang RGB kapag direktang ipinapakita ng software ang mga channel value, samantalang kapaki-pakinabang ang HSL sa paggawa ng magkakaugnay na mga kulay sa pamamagitan ng pagbabago sa lightness o saturation.

• Gumamit ng anim na digit na hex para sa opaque na kulay sa web kapag mahalaga ang pagiging maikli at madaling basahin.
• Gumamit lamang ng walong digit na hex kapag tahasang sinusuportahan ng target na environment ang alpha sa notation na iyon.
• Gumamit ng RGB o RGBA kapag hiwalay mong ginagamit ang mga red, green at blue channel.
• Gumamit ng HSL o HSLA para sa mga variation ng theme na ginagawa sa code batay sa hue, saturation o lightness.
• Gamitin ang Konbertidor ng kulay kung mayroon ka nang value at kailangan mo itong i-convert sa halip na pumili ng bagong kulay nang biswal.

Huwag ituring na specification para sa pag-print ang RGB value na nakikita sa screen. Maaaring mangailangan ang komersiyal na pag-print ng mga CMYK value, ICC color profile, proofing at pakikipagkasundo sa printer. Hindi magagarantiya ng matematikal na conversion lamang na tutugma ang naka-print na kulay sa screen na may sariling ilaw.

Kailan hindi kailangang pumili o mag-convert ng kulay?

Hindi kailangang pumili o mag-convert ng kulay kung ang kasalukuyang value ay nasa format na kailangan na ng paglilipatan nito. Maaaring magdulot ang paulit-ulit na conversion ng mga pagkakaiba dahil sa rounding, pabagu-bagong paggamit ng malalaki o maliliit na titik, o mga hindi kinakailangang pagbabago sa source file.

Maaaring mas mainam ding panatilihin ang isang design token na may pangalan, gaya ng theme variable, sa halip na palitan ito ng literal na value. Pinapanatili ng mga token ang ugnayan ng mga component at nagbibigay-daan na baguhin ang isang kulay mula sa iisang sentral na lugar. Gayundin, hindi kailangang gawing mas madaling basahin ng tao ang representasyon ng isang kulay na machine lamang ang gumagamit, maliban kung may kailangang sumuri o magpanatili nito.

Hindi kayang tukuyin ng tagapili ng kulay nang mag-isa kung sapat ang contrast ng isang napiling kulay, sumusunod ito sa brand specification, o nananatili itong madaling matukoy ng mga taong may kakulangan sa color vision. Suriin ang mga kombinasyon ng foreground at background gamit ang nakalaang contrast tool, at tingnan ang interface sa aktuwal na konteksto nito.

Mga madalas itanong

Pwede ko bang gamitin ang resulta sa mga CSS variable?

Oo, basta wastong CSS ang napiling notation para sa mga browser at build tool na sinusuportahan mo. I-save ang buong value sa isang custom property, at saka ito tukuyin gamit ang function na var(). Kung hiwalay na minamanipula ng proyekto ang mga channel, maaaring mas maginhawang i-save ang mga iyon ayon sa kasalukuyang convention ng proyekto.

Bakit iba ang itsura ng parehong kulay sa ibang screen?

Magkakaiba ang mga display pagdating sa calibration, brightness, panel technology at suporta sa color gamut. Maaari ding makaapekto sa rendering ang color management ng browser at display profile ng operating system. Dahil dito, hindi garantiya ang magkaparehong numerikong value na eksaktong magkapareho rin ang pisikal na itsura sa bawat device.

Nagbabago ba ang kulay kapag malalaki o maliliit ang titik sa hex?

Hindi. Hindi sensitibo sa laki ng titik ang mga hexadecimal digit na A hanggang F, kaya iisang kulay ang kinakatawan ng #AABBCC at #aabbcc. Sundin ang convention sa laki ng titik na ginagamit ng repository upang maiwasan ang mga pagbabagong formatting lamang ang epekto.

Pwede bang may accent o hindi Latin na character ang color value?

Gumagamit ang karaniwang hexadecimal, RGB at HSL notation ng mga ASCII digit, titik at bantas. Hindi kabilang sa mga numerikong syntax na ito ng kulay ang mga character na may accent o hindi Latin. Maaari silang lumitaw sa nakapaligid na mga pangalan ng variable o metadata kung pinapayagan iyon ng nauugnay na wika at file encoding.

Pareho ba ang transparent na kulay at walang kulay?

Hindi. May mga channel value pa rin ang isang ganap na transparent na kulay, kahit hindi nakikita ang mga iyon nang mag-isa. Maaaring maging mahalaga ang mga nakatagong channel na iyon sa animation, interpolation, compositing o pagbabago ng opacity sa ibang pagkakataon, kaya panatilihin ang mga ito kung umaasa ang application sa gayong gawi.

Dapat ko bang i-round ang mga decimal channel value?

I-round lamang ang mga decimal color channel at alpha value sa precision na tinatanggap ng paglilipatan at kailangan para sa pare-parehong output. Pinahihirap ng sobrang precision ang pagsusuri sa mga value, samantalang maaaring magdulot ng maliit na pagkakaiba sa kulay ang labis na pag-round. Pagkatapos mag-round, tingnan ang na-render na component sa nilalayon nitong background at mga interaction state.