I-convert ang HSL sa HEX Hue Saturation Lightness ↔ Hexadecimal Libre Online Ligtas

Bakit mo kino-convert ang HSL sa HEX

Nakabuo ka ng kulay sa HSL, dahil iyon ang notasyong mapag-iisipan mo: hue 30, saturation 29%, lightness 28%, kupas na kayumanggi, at mas maputlang bersyon sa 34% para sa hover state. Ngayon, kailangang mapunta ang kulay sa lugar na humihingi ng hex code: file ng design token, brand sheet, tool na hindi nakakaintindi ng hsl(), template ng email, mensahe sa katrabaho. Ang pag-convert ng HSL sa HEX ay pagkuha sa kulay na pinag-isipan mo at pagsulat nito sa anyong maikli, malinaw at naiintindihan ng lahat.

Gumagana ang conversion sa kabilang direksyon kaysa sa una nitong nakakaharap ng mga designer. Nagsisimula ito sa tatlong numerong madaling maintindihan ng tao at nagtatapos sa tatlong byte. Simpleng aritmetika ang bawat hakbang, ngunit may kasamang ilang kasong parang trigonometriya at pag-round, kaya mas gusto ng mga tao na may gumawa nito para sa kanila. Ginagawa ito ng pahina sa iyong browser, at walang ina-upload. Sa ibaba makikita mo kung paano nagiging anim na hex digit ang tatlong numero, ano ang pinananatili ng conversion, bakit ang kulay na dumaan sa HSL ay maaaring mapunta sa isa o dalawang hakbang mula sa pinagsimulan, ang mga paraan ng paggamit ng conversion ng mga designer, at ang mga patibong na dapat iwasan.

Paano gumagana ang conversion

Mula sa hue, saturation at lightness tungo sa pula, berde at asul

Una, kinakalkula ng converter ang chroma, na kung gaano kalayo ang kulay sa kulay-abo: lumalaki ito kasabay ng saturation at lumiliit habang lumalayo ang lightness sa 50%. Pagkatapos, inilalagay nito ang hue sa isa sa anim na sektor ng color wheel, na bawat isa ay 60 digri ang lapad, at mula sa sektor ay tinutukoy kung alin sa tatlong channel ang nasa maximum, alin ang nasa minimum at alin ang nasa pagitan. Sa wakas, nagdaragdag ito ng constant para tama ang lightness, ini-scale ang tatlong halaga mula sa saklaw na 0 hanggang 1 pataas sa 0 hanggang 255, at ni-round ang bawat isa sa buong numero. Ang tatlong byte na iyon ay isinusulat sa base labing-anim, dalawang digit bawat isa.

Halimbawang may mga numero

Kunin ang hsl(30, 29%, 28%). Ang chroma ay (1 − |2 × 0.28 − 1|) × 0.29 = 0.56 × 0.29 = 0.1624. Ang hue na 30 digri ay nasa kalagitnaan ng unang sektor, kaya ang gitnang channel ay kalahati ng chroma, 0.0812. Ang constant na idaragdag ay 0.28 − 0.0812 = 0.1988. Kaya ang pula ay 0.1624 + 0.1988 = 0.3612, ang berde ay 0.0812 + 0.1988 = 0.28 at ang asul ay 0.1988. Kapag minultiply sa 255 at ni-round, ang mga ito ay 92, 71 at 51. Sa hex, iyon ay #5C4733.

Mga kulay-abo

Kapag 0% ang saturation, kulay-abo ang kulay anuman ang hue, at pantay ang tatlong byte. Ang hsl(0, 0%, 50%) ay #808080. Hindi pinapansin ang hue, kaya ang anumang numero ng hue ay nagbibigay ng parehong kulay-abo.

Ang pinananatili ng conversion at ang hindi nito kaya

Pinananatili nito ang kulay ayon sa inilarawan mo

Ang resulta ay ang kulay na ang hue, saturation at lightness ay ibinigay mo, isinulat bilang mga byte. Ang tatlong numerong tinayp mo ay ang kulay ayon sa pag-uuri ng mata, isang hue sa wheel, gaano ito ka-saturated, gaano ito kaliwanag. Iyon ang dahilan kung bakit sulit magkaroon ng HSL, at tapat na dinadala ng conversion ang pinili mo sa hex.

Hindi nito maipapangako ang parehong numero pagbalik

Inilalarawan ng dalawa ang parehong mga kulay, ngunit naaabot ng HSL ang mga ito sa pamamagitan ng ibang geometry at ang tatlong numero nito ay ni-round sa buong digri at buong porsyento kapag isinulat. Kaya ang kulay na dinala sa HSL at ibinalik ay maaaring mapunta sa isa o dalawang hakbang mula sa pinagsimulan: pareho sa paningin, ngunit hindi byte por byte. Sa halimbawa natin, ang #5A4632 ay kulay na ang HSL ay mga hsl(30, 29%, 28%); ang pag-convert pabalik ng mga ni-round na bilang na iyon ay nagbibigay ng #5C4733, dalawang hakbang ang layo sa pula. Kung kailangan mo ang eksaktong mga byte, itago ang hex.

Mga percent at degree sign

Binabasa ng pahina ang hue sa digri at ang saturation at lightness sa porsyento. Maaari mong isulat ang mga ito nang may sign o wala. Ang hue na higit sa 360 o mas mababa sa 0 ay ibinabalot sa paligid ng wheel, kaya ang 390 ay katulad ng 30.

Mga praktikal na gamit

Pagsulat ng file ng design token

Iniimbak ng design system ang mga kulay bilang token. Maraming koponan ang gumagawa ng mga kulay sa HSL, dahil mapag-iisipan nila ang mga ito, at inilalathala sa hex, dahil binabasa ito ng bawat tool. I-convert ang HSL sa HEX nang isang beses para sa bawat token, at ang nailathalang file ay magagamit ng lahat.

Paggawa ng mga kulay para sa mga tool na hindi nagbabasa ng hsl()

Hex lang ang tinatanggap ng mga email client, ilang document editor, mas lumang graphics program at maraming chart library. Anumang nabuo mo sa HSL ay kailangang i-convert bago nila ito magamit.

Pagsuri sa nabuong palette

Ang script na bumubuo ng palette sa pag-ikot ng hue ay nagbibigay ng listahan ng mga halaga ng hsl(). Para makita ang mga ito bilang mga code na ilalagay mo sa stylesheet o ibibigay sa designer, i-convert ang bawat isa sa hex. Hinahayaan ka rin nitong mapansin ang mga halagang nagro-round sa iisang code at samakatuwid ay hindi talaga magkaiba.

Pagbabahagi ng kulay sa mensahe

Maikli, makokopya at naiintindihan ng halos lahat ng gumagawa sa kulay ang hex code. Mas mahaba at mas hindi pamilyar sa labas ng disenyo ang halaga ng hsl(). Kapag nagpapadala ka ng kulay sa isang tao, ang hex ang magalang na anyo.

Paano mag-convert ng HSL sa HEX dito

I-type o i-paste ang hsl na halaga

Ilagay ang kulay sa unang field sa anyong hsl(30, 29%, 28%), o ang tatlong numero lang. Ang hue ay sa digri, ang saturation at lightness ay sa porsyento.

Basahin ang hex code

Lumalabas agad ang sagot, gaya ng hsl(30, 29%, 28%) = #5C4733. Isinusulat ito na may malalaking titik at hash sign.

Kopyahin ito sa gawa mo

Gamitin ang code sa stylesheet, file ng token o mensahe mo. Para sa kabaligtarang direksyon, isang click lang ang layo ng HEX sa HSL.

Saan nagmula ang mga notasyong ito

Ang hex at RGB ay iisang bagay na isinulat nang dalawang beses

Ang kulay sa screen ay tatlong numero, kung gaano karaming pula, berde at asul na liwanag ang ilalabas, bawat isa mula 0 hanggang 255, na isang byte. Isinusulat lang ng hex ang mga byte na iyon sa base labing-anim. Para makita ang mga numero, i-convert ang HEX sa RGB.

HSL at CMYK

Naimbento ang HSL dahil walang isa sa dalawa ang nababasa ng tao: ibinibigay nito ang hue bilang anggulo sa paligid ng color wheel, na may saturation at lightness bilang porsyento, kaya makakagawa ang designer ng mas maliwanag nang hindi muling kinakalkula ang tatlong bilang. Ibang mundo ang kinabibilangan ng CMYK, tinta sa halip na liwanag. Subtractive ito, binuo mula sa apat na printing plate, at hindi nito naaabot ang bawat kulay na kaya ng screen, dahil naglalabas ng liwanag ang screen habang sumasalamin lang ang papel.

Mga patibong kapag nagko-convert ka ng HSL sa HEX

Pag-asang babalik ang orihinal na code

Kung nagsimula ka sa hex code, kinonvert ito sa HSL, walang inayos at kinonvert pabalik, maaari kang makakuha ng ibang code na isa o dalawang hakbang ang layo. Para sa isang kulay, hindi ito nakikita. Para sa design system, magpasya kung aling anyo ang master, at ituring na hango ang isa pa.

Paghahalo ng saturation at lightness

Madaling magkapalit ang dalawa nang hindi sinasadya: ang hsl(30, 28%, 29%) ay hindi hsl(30, 29%, 28%). Ang pagkakasunod-sunod ay hue, saturation, lightness. Kung hindi mukhang inaasahan mo ang kulay sa screen, suriin kung hindi mo sila nabaligtad.

Paglimot na hindi liwanag ang lightness

Ang dalawang kulay na may parehong lightness ay maaaring magmukhang magkaiba sa liwanag. Ang dilaw sa 50% lightness ay mukhang mas maliwanag nang higit kaysa sa asul sa 50%. Kung pumipili ka ng mga kulay para sa teksto at background, suriin ang contrast nila gamit ang wastong tool, hindi sa paghahambing ng mga numero ng lightness.

Paggamit ng mga halagang lampas sa saklaw

Limitado ang saturation at lightness sa 0 hanggang 100 porsyento. Ang mga halagang labas sa saklaw na iyon ay pinuputol. Ang lightness na 120% ay hindi mas maliwanag kaysa sa puti; puti ito.

Mga tanong ng mga tao bago mag-convert

Ano ang hsl(0, 100%, 50%) sa hex?

#FF0000, purong pula.

Ano ang hsl(0, 0%, 100%) sa hex?

#FFFFFF, puti.

Maaari ba akong gumamit ng mga decimal?

Oo. Tinatanggap ang hsl(30.5, 28.6%, 27.8%). Ni-round ang resulta sa buong byte.

Eksakto ba ang conversion?

Ibinibigay nito ang eksaktong mga byte para sa mga numerong tinayp mo, na ni-round sa buong halaga. Ang pagbalik ay maaaring mapunta sa isang hakbang ang layo, dahil ni-round ang mga numero ng HSL.

Ina-upload ba ang kulay ko?

Hindi. Tumatakbo sa iyong browser ang aritmetika at walang ipinapadala saanman.

Paano ako babalik?

Gamit ang HEX sa HSL.

Matalinong pagpili kapag nagko-convert ka ng HSL sa HEX

Magpasya kung aling anyo ang master

Kung nagdidisenyo ka sa HSL, itago ang mga halaga ng HSL bilang pinagmulan at ilathala ang hex bilang output. Kung hex ang ibinibigay ng brand, itago iyon at gamitin ang HSL para lang sa mga variation. Ang paghahalo ng dalawa bilang magkapantay na pinagmulan ang lumilikha ng paglihis.

Gamitin ang HSL para sa variation, ang hex para sa pagtatakda

Kapag kailangan mo ng pamilya ng mga shade, gumawa sa HSL. Kapag kailangan mong itakda ang kulay para magkapareho ito sa bawat tool, isulat ito bilang hex.

Itago ang mga numerong tinayp mo

Itala ang mga halaga ng HSL sa tabi ng hex sa tala ng palette mo. Kung may gustong mas maputlang bersyon sa kalaunan, maaari silang magsimula sa mga numero mo at hindi sa code na na-round na.

Ang anim na sektor ng wheel

Aling channel ang mataas, aling channel ang mababa

Hinahati ng conversion ang wheel sa anim na sektor na 60 digri, at sa bawat isa ay may isang channel na nasa maximum, isa sa minimum at ang pangatlo ay nagbabago nang maayos. Mula 0 hanggang 60, nasa maximum ang pula, nasa minimum ang asul at tumataas ang berde: ang pula ay nagiging dilaw. Mula 60 hanggang 120, nasa maximum ang berde at bumababa ang pula: ang dilaw ay nagiging berde. Mula 120 hanggang 180, nananatiling mataas ang berde at tumataas ang asul: ang berde ay nagiging cyan. Mula 180 hanggang 240, pumapalit ang asul at bumababa ang berde. Mula 240 hanggang 300, nananatiling mataas ang asul at tumataas ang pula: ang asul ay nagiging magenta. Mula 300 hanggang 360, muling pumapalit ang pula at bumababa ang asul. Kapag nagko-convert ka ng HSL sa HEX, nakatutulong na malaman kung aling sektor ang hue mo, dahil sinasabi nito kung alin sa tatlong pares sa sagot ang magiging pinakamalaki.

Bakit may pagkakahawig ang sagot

Ang mga kulay na may parehong hue at saturation ngunit magkaibang lightness ay nagbibigay ng mga hex code na mukhang magkakamag-anak: ang parehong pattern kung aling pares ang mataas at alin ang mababa, na nasukat lang pataas o pababa. Ang #5C4733, #7A5F44 at #A38461 ay pawang nasa iisang pamilya, na pinakamalaki ang pula, sunod ang berde, saka ang asul. Matututuhan mong basahin ito sa isang sulyap, at mas madaling mahuli ang mga pagkakamali.

Pagbuo ng lightness ramp

Isang hue, siyam na hakbang

Isang napakapraktikal na gamit ng conversion ay ang pagbuo ng ramp ng iisang kulay mula sa napakaputla hanggang sa napakadilim, ang uri ng scale na nilalagyan ng label ng mga design system na 50, 100, 200 at iba pa hanggang 900. Pumili ng hue at saturation, at padaanin ang lightness sa mga halagang gaya ng 96, 90, 80, 70, 60, 50, 40, 30 at 20 porsyento. I-convert ang HSL sa HEX para sa bawat hakbang, at may siyam kang code na magkakabilang. Ang bahagyang pagbabawas ng saturation sa mga dulo, ilang puntos sa pinakamaputla at pinakamadilim na hakbang, ay madalas na mas natural tingnan kaysa sa pagpapanatiling pareho.

Pagpapangalan sa mga hakbang

Bigyan ang bawat hakbang ng pangalang nagtatala ng tungkulin nito, hindi ng halaga: surface para sa pinakamaputla, border para sa kasunod, text para sa pinakamadilim. Sa code, sinasabi ng pangalan sa susunod na mambabasa kung para saan ang kulay, at mababago mo ang numero sa likod nito nang hindi ginagalaw ang mga rule na gumagamit nito.

Mga light at dark theme

Pagsasalamin ng ramp

Ang dark theme ay madalas na light theme na binaligtad ang ramp: ang pinakamaputlang hakbang ay nagiging background ng pahina sa light theme at ang pinakamadilim ay nagiging background sa dark. Kung binuo mo ang ramp sa HSL, walang gastos ang dark theme kundi pangalawang hanay ng mga conversion. Panatilihing nakapirmi ang hue, na pinananatili ang katangian ng brand, at bahagyang ayusin ang saturation, dahil may tendensiyang magmukhang malupit sa madilim na background ang mga matingkad na kulay.

Pagsuri sa parehong theme

Subukin ang bawat pares ng teksto at background ng parehong theme para sa contrast. Ang kulay na gumagana sa puti ay maaaring pumalpak sa halos itim, at isang minuto lang ang pagsusuri gamit ang contrast tool at ang mga hex code na kagagawa mo.

Kapag malabong ideya lang ang mayroon ka sa kulay

Magsimula sa wheel, saka pinuhin

Minsan wala kang hex code kahit isa, ideya lang: kalmadong asul, mainit na kahel, sariwang berde. Magandang simulan ang HSL, dahil makakapili ka ng hue mula sa mga palatandaan ng wheel, magtakda ng katamtamang saturation at katamtamang lightness, at pagkatapos ay i-convert ang HSL sa HEX para makita kung ano ang mayroon ka. Kung mukhang masyadong matingkad, ibaba ang saturation; kung mukhang patag, ilipat ang lightness. Segundo lang ang gastos ng bawat pagsubok, at magtatapos ka sa hex code na maaari mong ilagay nang diretso sa stylesheet.

Mga kaugnay na converter

Sakop ng parehong pamilya ng mga tool ang mga katabing conversion. Para bumalik, gamitin ang HEX sa HSL. Para sa mga numero sa likod ng code, may HEX sa RGB at RGB sa HEX, at para sa print, HEX sa CMYK at CMYK sa HEX. Para sa mga laki sa parehong stylesheet, ang px sa rem ay ginagawa para sa mga haba ang ginagawa ng pahinang ito para sa mga kulay.

Isang halimbawang nalutas

Sabihin nating pumili ka ng berde para sa success state ng app: hsl(145, 55%, 38%). Tina-type mo ito at nababasa ang #2C9658. Ginagamit mo ang code na iyon sa file ng token bilang --success. Para sa background ng success notice, kinukuha mo ang parehong hue, hsl(145, 45%, 94%), at nababasa ang #E9F7EF. Para sa border, hsl(145, 45%, 78%), na nagbabasa ng #AEE0C3. Tatlong code, iisang hue, lahat hinango sa isang minuto, at bawat isa ay payak na hex code na mabubuksan ng anumang tool sa koponan.

Maikling checklist

Bago mag-convert

Suriin ang pagkakasunod-sunod ng tatlong numero: hue, saturation, lightness. Magpasya kung aling anyo ang master mo.

Habang nagko-convert

I-type ang mga halaga, basahin ang hex at kopyahin ito kasama ang hash sign.

Pagkatapos mag-convert

Tingnan ang kulay sa screen sa konteksto, at itala ang mga halaga ng HSL sa tabi ng code para sa susunod.

Mga karaniwang pagkakamali

Pagpapalit ng saturation at lightness

Ang pagkakasunod-sunod ay hue, saturation, lightness.

Pag-asang mababawi ang lumang hex

Maaari itong mapunta sa isang hakbang ang layo. Itago ang orihinal kung mahalaga ito.

Paghahambing ng lightness sa halip na contrast

Gumamit ng contrast tool para sa teksto at background.

Nananatili sa device mo ang mga kulay mo

Lokal na nangyayari ang kalkulasyon. Ginagamit ng sarili mong browser ang mga halaga mo at walang ipinapadala saanman. Walang buburahin pagkatapos at walang account na gagawin. Iyon ang payak na paraan para mag-convert ng HSL sa HEX.

Buod

Para mag-convert ng HSL sa HEX dito, i-type ang hue sa digri at ang saturation at lightness sa porsyento, at basahin agad ang hex code. Pinananatili ng conversion ang kulay ayon sa pag-uuri ng mata: isang hue sa wheel, gaano ito ka-saturated, gaano ito kaliwanag. Inilalarawan ng dalawang notasyon ang parehong mga kulay, ngunit naaabot ng HSL ang mga ito sa pamamagitan ng ibang geometry at ni-round ang tatlong numero nito sa buong digri at buong porsyento, kaya ang kulay na dinala sa HSL at ibinalik ay maaaring mapunta sa isa o dalawang hakbang mula sa pinagsimulan. Kung kailangan mo ang eksaktong mga byte, itago ang hex. Walang ina-upload.