Konbertidor ng kulay

Ang Konbertidor ng kulay ay libreng tool na nagko-convert ng kulay na nasa HEX, HEX alpha, RGB, RGBA, HSV, HSL o HSLA sa iba't ibang katumbas na format ng kulay.

Anong mga format ng kulay ang puwede kong i-convert?

Puwede kang maglagay ng HEX, HEX alpha, RGB, RGBA, HSV, HSL o HSLA at makita ang katumbas na value sa bawat sinusuportahang format. Kapaki-pakinabang ito kapag magkaiba ang paraan ng pagtukoy sa iisang kulay sa isang design specification, stylesheet o third-party API.

• HEX ay kumakatawan sa mga channel na pula, berde at asul gamit ang mga pares na hexadecimal, karaniwan sa anyong #RRGGBB.
• HEX Alpha ay nagdaragdag ng channel para sa opacity. Sa modernong CSS notation, karaniwan itong nasa anyong #RRGGBBAA.
• RGB ay gumagamit ng mga value para sa pula, berde at asul na channel, na karaniwang mula 0 hanggang 255.
• RGBA ay nagdaragdag ng alpha transparency sa RGB.
• HSV ay naglalarawan sa hue, saturation at value. Karaniwan itong ginagamit sa mga tagapili ng kulay, pero hindi ito karaniwang CSS colour function.
• HSL ay naglalarawan sa hue, saturation at lightness. Direktang sinusuportahan ng CSS ang HSL.
• HSLA ay HSL na may alpha value.

Magkaibang matematikal na paglalarawan ng isang kulay ang RGB at HSL, hindi magkaibang kulay. Sa pag-convert, mababago mo ang representasyon habang napapanatili ang nilalayong kulay hangga't pinahihintulutan ng pupuntahang format.

Paano gamitin ang konbertidor ng kulay?

Maglagay ng isang kumpletong value ng kulay sa field na Kulay gamit ang isa sa mga tinatanggap na format. Pagkatapos, tingnan o kopyahin ang mga nabuong value mula sa mga output field.

1. Kopyahin nang eksakto ang source value, kasama ang hash sa unahan, mga kuwit, bracket, percentage sign o alpha component kung naaangkop.
2. Ilagay ito sa field na Kulay.
3. Tingnan ang mga katumbas na value sa ilalim ng HEX, HEX Alpha, RGB, RGBA, HSV, HSL at HSLA.
4. Pumili sa mga sinusuportahang format ng kulay na tinatanggap ng pupuntahang system. Para sa isang CSS rule, karaniwang ginagamit ang HEX, RGB, RGBA, HSL at HSLA. Mas madalas namang gamitin ang HSV sa mga interface sa pag-edit at pagkalkula ng kulay.

Sa server isinasagawa ang conversion. Ipinapadala sa server ang input mo sa pamamagitan ng HTTPS at hindi ito iniimbak. Bagama't bihirang sensitibo ang isang kulay, pag-isipan muna kung kumpidensyal ang isang hindi pa inilalabas na palette o koleksyon ng mga design token bago ito isumite sa anumang online na serbisyo.

Bahagi ng syntax ng RGB, HSL at mga kaugnay na format ang mga espasyo at bantas, habang tinutukoy ng mga percentage sign ang mga value na porsiyento. Hindi matutukoy bilang kulay ang isang numerong walang ibang syntax, blangkong value o anumang text. Wala ring tiyak na kahulugan sa mga numerikong format na ito ang text na may accent o gumagamit ng mga character na hindi Latin.

Paano basahin ang mga na-convert na value?

Basahin ang bawat resulta bilang ibang notation ng parehong kulay. Bigyang-pansin ang mga range ng channel, porsiyento at alpha transparency. Nakadepende sa notation ng kulay na sinusuportahan ng tatanggap na system kung aling field ang dapat mong kopyahin.

Sa anim na digit na HEX, ang unang pares ay para sa pula, ang ikalawa ay para sa berde at ang ikatlo ay para sa asul. Halimbawa, ang #336699 ay may mga hexadecimal channel value na 33, 66 at 99, na katumbas ng mga decimal RGB value na 51, 102 at 153.

Karaniwang ipinapahayag ang hue bilang anggulo sa paligid ng colour wheel. Karaniwan namang porsiyento ang saturation at lightness o value. Magkaiba ang pagkalkula sa HSL lightness at HSV value, kaya hindi dapat paghambingin ang mga porsiyento ng mga ito na para bang iisang katangian ang sinusukat.

Inilalarawan ng alpha ang opacity. Hindi kailangan ng isang ganap na opaque na kulay ang format na may alpha, pero kailangan ito ng kulay na bahagyang transparent. Kung kokopyahin mo ang isang RGBA o HSLA na kulay sa simpleng RGB, HSL o anim na digit na HEX, walang paglalagyan ang alpha channel sa pupuntahang notation.

Walang dokumentasyong nagsasabing syntax validator ang konbertidor na ito na nagbibigay ng detalyadong diagnostic message. Huwag itong asahang matutukoy ang eksaktong character sa maling input. Kabilang sa mga karaniwang error sa syntax ng kulay ang nawawalang hash sa HEX, hindi magkatugmang bracket, nawawalang percentage sign, alpha value na wala sa inaasahang range, o paghahalo ng mga tuntunin sa channel ng HSL at RGB.

Mga halimbawa ng pag-convert ng kulay

Ipinapakita ng maikling halimbawang ito kung paano nauugnay ang HEX, RGB, HSL at HSV. Maaaring isulat ang purong pula sa mga sumusunod na magkakatumbas na anyo.

• HEX input #ff0000
• Katumbas na RGB rgb(255, 0, 0)
• Katumbas na HSL hsl(0, 100%, 50%)
• Katumbas na HSV hsv(0, 100%, 100%)

Para sa kulay na hindi gaanong saturated, ang #336699 ay katumbas ng rgb(51, 102, 153). Ang HSL representation nito ay hsl(210, 50%, 40%), habang ang HSV representation nito ay may hue na 210 degree, saturation na humigit-kumulang 66.7% at value na 60%. Maaaring i-round ng isang interface ang mga decimal value o gumamit ng ibang spacing nang hindi binabago ang praktikal na kahulugan.

Isa pang simpleng halimbawa ang transparency. Parehong naglalarawan ang rgba(255, 0, 0, 0.5) at hsla(0, 100%, 50%, 0.5) sa pulang may kalahating opacity. Sa karaniwang walong digit na CSS HEX convention, ang katumbas na value ay #ff000080, kung saan ang 80 ang quantised alpha byte.

Kailan kapaki-pakinabang ang pag-convert ng kulay?

Kapaki-pakinabang ang pag-convert ng kulay kapag ibang notation ang kailangan ng tatanggap na application, o kapag mas madaling mag-debug gamit ang ibang representasyon. Kabilang sa mga karaniwang sitwasyon ang paglilipat ng Figma value sa isang CSS custom property, pagsusuri ng RGBA value na nakita sa Chrome DevTools, paghahanda ng mga field ng kulay para sa API payload, o pagrepaso sa theme data mula sa third party bago i-deploy.

Karaniwang hindi kailangan ang conversion kung sinusuportahan na ng pupuntahang system ang kasalukuyang notation ng kulay. Kaunti lang ang pakinabang ng pagpapalit ng anim na digit na HEX sa RGB para lamang sa machine-readable na CSS, at maaaring magdulot ng rounding sa mga HSL o HSV value ang paulit-ulit na conversion. Gayundin, huwag magdagdag ng alpha channel kung alam na ganap na opaque ang lahat ng kulay.

Kung gusto mong pumili ng kulay batay sa itsura sa halip na mag-convert ng alam mo nang value, mas direktang gamitin ang Tagapili ng kulay. Hindi rin pamalit ang conversion sa contrast testing, colour-blindness simulation o pamamahala ng colour profile. Hindi pinatutunayan ng magkakatumbas na numerikong value na natutugunan ng text sa harapan ang mga kinakailangan sa contrast ng WCAG.

Mga madalas itanong

Tumatanggap ba ang konbertidor ng mga pinangalanang kulay sa CSS?

Hindi. Ang mga nakadokumentong tinatanggap na format ay HEX, HEX alpha, RGB, RGBA, HSV, HSL at HSLA, kaya hindi nakalista bilang sinusuportahang input ang mga pangalang gaya ng red, rebeccapurple o transparent. I-convert muna ang pinangalanang kulay sa numerikong CSS value bago ito ilagay.

Puwede bang maglagay ng tatlong digit na HEX?

Kasama ang HEX sa mga tinatanggap na input, pero hindi nakadokumento ang mga sinusuportahang haba ng HEX. Para sa mas tiyak na input, palawakin ang shorthand gaya ng #369 at gawing #336699. Ganito rin ang gawin sa apat na digit na shorthand na may alpha.

Puwede bang buong CSS declaration ang i-paste sa halip na value lang ng kulay?

Ang value ng kulay lang ang ilagay, hindi ang buong declaration. Halimbawa, gamitin ang #336699 sa halip na color: #336699; dahil hindi bahagi ng mismong kulay ang property name at semicolon. Alisin ang mga quotation mark sa paligid kapag kumokopya ng value mula sa JSON o configuration file.

Mapapanatili ba sa resulta ang wide-gamut o colour-profile information?

Walang nakalistang sinusuportahang wide-gamut format o naka-embed na colour profile. May impormasyong nakapaloob sa Display P3, Lab, LCH at ICC profile data na hindi kayang katawanin ng mga available na field na HEX, RGB, HSL at HSV. Gumamit ng application na may colour management kapag kailangan ang conversion na isinasaalang-alang ang profile.

Bakit may mga decimal minsan ang mga na-convert na value?

Maaaring makabuo ang mga pagkalkula ng HSL at HSV ng mga fractional percentage kahit whole number ang mga source RGB channel. Kapag ni-round ang mga numerong iyon, maaaring bahagyang magbago ang susunod na conversion pabalik sa RGB. Panatilihin ang available na precision kapag nag-iimbak ng mga design token, at mag-round lang kung kinakailangan ng target na format o coding standard.