I-convert ang HEX sa HSL Hexadecimal ↔ Hue Saturation Lightness Libre Online Ligtas
Mag-type ng halaga sa HEX at basahin agad ito sa HSL. Nangyayari sa iyong browser ang kuwenta, walang ipinapadala saanman, at nakasulat sa ibaba kung saan nakadepende ang conversion sa halip na ipagpalagay.
Walang ina-upload
Saan galing ang mga notasyong ito
Ang hex at RGB ay iisang bagay na dalawang beses isinulat. Ang kulay ng screen ay tatlong numero — 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 sixteen, kaya ang #FF8800 at rgb(255, 136, 0) ay iisang tagubilin sa iisang pixel. Inimbento ang HSL dahil walang nababasa ng tao sa dalawa: ibinibigay nito ang hue bilang anggulo sa paligid ng gulong ng kulay, na may saturation at lightness bilang porsyento, para mapagaan ng designer ang isang bagay nang hindi kinukuwenta muli ang tatlong numero. Ang CMYK ay nabibilang sa ganap na ibang mundo — tinta sa halip na liwanag. Subtractive ito, binuo mula sa apat na plate ng pag-imprenta, at hindi nito naaabot ang bawat kulay na kaya ng screen, dahil naglalabas ng liwanag ang screen habang ang papel ay nagpapakita lang nito.
Saan mo sila nakakasalubong
Ang hex ang tina-type mo sa stylesheet at ibinibigay ng design tool. Lumilitaw ang RGB saanman kailangan ng aritmetika ang kulay — gradient, transparency, code na kumukuwenta ng shade. Ang HSL ang kinukuha mo kapag nag-aayos ng palette nang mano-mano, dahil ang mga pagbabagong gusto mo ay karaniwang pagbabago ng isa sa tatlong numero nito. Ang CMYK ang hinihingi ng printer, at ang pag-convert dito ang sandaling humihinto ang disenyo sa pagiging liwanag at nagiging tinta.
Mga tanong ng mga tao
Bakit iba ang CMYK na resulta sa ibinibigay ng printer ko?
Dahil walang iisang tamang conversion. Ang aritmetika sa pahinang ito ay ang payak, hindi nakadepende sa device, na siyang tamang sagot kapag kailangan mo ng panimulang punto o tinatayang katumbas. Nagko-convert ang print shop sa pamamagitan ng color profile na isinasaalang-alang ang partikular na tinta, papel at imprenta, at ang parehong RGB na kulay ay magbibigay ng magkaibang CMYK sa makintab na papel kaysa sa hindi pinahiran. Para sa anumang kailangang magtugma, hingin sa printer ang profile nila sa halip na magtiwala sa pormula.
Bakit hindi mai-print ang ilang kulay ng screen?
Dahil hindi nila naaabot ang parehong kulay. Gumagawa ng kulay ang screen sa pagdaragdag ng liwanag at kayang gumawa ng matingkad at saturated na cyan o berde na hindi matatapatan ng tinta; gumagawa ng kulay ang papel sa pagsipsip ng liwanag, at ang pinakamaliwanag nito ay ang puti ng pahina. Ang hanay ng mga kulay na naaabot ng bawat isa ay tinatawag na gamut, at kung saan hindi sila nagpapatong, kailangang pumili ang conversion ng pinakamalapit na magagamit na kulay. Kaya ang matingkad na kulay ng screen ay madalas na mukhang bahagyang namumutla sa print.
Eksakto ba ang sagot?
Kung ang dalawang yunit ay tinukoy sa isa't isa sa pamamagitan ng buong numero, oo — sinasabi iyon ng pahina sa itaas ng numero, at ang tanging pagbibilog ay sa dami ng digit na ipinapakita. Kung walang hangganang decimal ang ratio, nagpapakita ang pahina ng labindalawang makabuluhang digit at sinasabing tinatayang relasyon ito sa halip na magkunwari ng iba.
Lumalabas ba sa device ko ang anumang itina-type ko?
Hindi. Tumatakbo ang kuwenta sa iyong browser; walang ina-upload at walang server na mapagpapadalhan. I-load nang isang beses ang pahina at patuloy itong gagana kahit patayin ang network.
Bakit mo kino-convert ang HEX sa HSL
Ang hex code gaya ng #5A4632 ay mahusay na paraan para mag-imbak ng kulay at mahinang paraan para pag-isipan ito. Walang sinasabi ang mga digit na kayumanggi ang kulay, gaano ito kaliwanag o ano ang hitsura ng bahagyang mas maputlang bersyon nito. Naimbento ang HSL para ayusin iyon. Inilalarawan nito ang kulay sa paraang karaniwang pinag-uusapan ito ng mga tao: anong hue ito, gaano ito katingkad at gaano ito kaliwanag. Ang pag-convert ng HEX sa HSL ay pagsasalin ng kulay mula sa anyong ibinibigay ng design tool tungo sa anyong magagamit mo sa pangangatwiran: ang hsl(30, 29%, 28%) ay madilim at kupas na kahel-kayumanggi, at makikita mo agad na magiging mas maputla ito kapag itinaas ang huling numero.
Iyon ang tunay na dahilan kung bakit ginagamit ng mga designer at front-end developer ang conversion. May kulay ng brand sila sa hex at kailangan nila ng pamilya ng magkakaugnay na kulay: mas maliwanag para sa hover state, mas madilim para sa napindot na button, napakaputla para sa tint ng background, at desaturated para sa disabled na control. Sa hex, bawat isa sa mga iyon ay panibagong paghahanap ng tatlong pares ng digit. Sa HSL, pagbabago lang ito ng isang numero. Iisa pa rin ang kulay, tinitingnan lang sa mas kapaki-pakinabang na lente.
Nagko-convert ang pahinang ito sa iyong browser, at walang ina-upload. Sa ibaba makikita mo kung paano kinakalkula ang tatlong numero ng HSL mula sa mga hex digit, ano ang pinananatili ng conversion at saan ito nagro-round, ano ang ibig sabihin ng hue, saturation at lightness sa praktika, paano ginagamit ng mga designer ang HSL para bumuo ng palette at mga state, at ang mga patibong na nakakahuli sa mga unang beses nagko-convert ng HEX sa HSL.
Ang inilalarawan ng HSL
Hue: ang posisyon sa color wheel
Ang hue ay anggulo mula 0 hanggang 360 digri sa paligid ng color wheel. Nasa 0 ang pula, nasa 60 ang dilaw, nasa 120 ang berde, nasa 180 ang cyan, nasa 240 ang asul at nasa 300 ang magenta; sa 360 ay balik ka sa pula. Ang hue na 30 ay nasa pagitan ng pula at dilaw, ibig sabihin kahel. Sinasabi ng numero kung anong pamilya ng kulay ka kabilang, at walang sinasabi kung gaano ito kaliwanag o kaputla.
Saturation: gaano katingkad
Ang saturation ay porsyento. Sa 100% ay kasing-dalisay ng kulay ang pinapayagan ng hue; sa 0% ay nawala na ang lahat ng kulay nito at kulay-abo na lang. Ang saturation na 29%, gaya ng halimbawa nating kayumanggi, ay kupas at makalupang kulay. Ang pagbaba ng saturation ang pinakamabilis na paraan para pakalmahin ang matingkad na kulay nang hindi binabago ang katangian nito.
Lightness: gaano kaputla o kadilim
Porsyento rin ang lightness. Sa 0% ay itim ang kulay anuman ang hue at saturation; sa 100% ay puti ito; sa 50% ay buo at normal na kulay ito. Ang kayumanggi natin sa 28% ay nasa madilim na panig. Ang pagtaas ng numero ay nagbibigay ng mas maputlang bersyon ng parehong kulay, at ang pagbaba ay mas madilim, na eksaktong pagbabagong pinakamadalas gustuhin ng mga designer.
Bakit mas madali ito kaysa sa hex
Sa hex, ang pagpapaputla ng kulay ay nangangahulugang pagtaas sa lahat ng tatlong pares nang magkakaibang halaga para hindi lumihis ang hue, na halos imposibleng gawin sa mata lang. Sa HSL, nangangahulugan itong pagbabago ng iisang bilang at pag-iwan sa dalawa pa.
Paano gumagana ang conversion
Mula sa tatlong byte tungo sa anggulo at dalawang porsyento
Una, binabasa ng converter ang mga hex digit bilang halaga ng pula, berde at asul, bawat isa mula 0 hanggang 255, at ini-scale ang mga ito sa pagitan ng 0 at 1. Hinahanap nito ang pinakamalaki at pinakamaliit sa tatlo. Ang lightness ay ang average ng dalawa. Nakadepende ang saturation sa kung gaano kalayo ang pagitan nila, kaugnay ng lightness. Nakadepende ang hue sa kung aling channel ang pinakamalaki at kung paano naghahambing ang dalawa pa. Kung pareho ang lahat ng tatlo, kulay-abo ang kulay, zero ang saturation at walang kahulugan ang hue; ipinapakita ng converter ang 0 para rito.
Ang halimbawa
Para sa #5A4632, ang mga byte ay 90, 70 at 50. Ang pula ang pinakamalaki sa 0.353, ang asul ang pinakamaliit sa 0.196. Ang lightness ay kalahati ng kabuuan nila, 0.275, mga 28%. Ang agwat ay 0.157, kaya ang saturation ay 0.157 hinati sa kabuuang 0.549, mga 29%. Ang pula ang pinakamalaking channel at nasa pagitan ang berde, na naglalagay sa hue sa 30 digri. Ang resulta ay hsl(30, 29%, 28%).
Mga buong numero
Ang tatlong numero ay ni-round sa buong digri at buong porsyento kapag isinulat. Iyon ang anyong ginagamit ng mga tao at inaasahan ng CSS sa pang-araw-araw na trabaho, ngunit nangangahulugan itong may nawawalang impormasyon sa huling digit, gaya ng ipinaliwanag sa susunod na seksyon.
Ang pinananatili ng conversion at ang hindi nito kaya
Pinananatili nito ang kulay ayon sa pag-uuri ng mata
Ang resulta 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. Mapapaputla mo ang kulay o mapapadilim ang shade sa pagbabago ng isang numero, na halos imposible sa hex.
Hindi nito maipapangako ang parehong byte 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. Kung kailangan mo ang eksaktong byte pagbalik, itago ang hex. I-convert ang HEX sa HSL para gumawa gamit ang kulay, at panatilihin ang hex bilang master.
Walang hue ang mga kulay-abo
Kapag pantay ang tatlong byte, walang masasabi tungkol sa hue. Nagbibigay ang converter ng hue na 0 at saturation na 0%, at ang lightness lang ang naglalarawan sa kulay-abo. Huwag basahan ng kahulugan ang 0.
Paggamit ng HSL sa praktika
Pagbuo ng pamilya ng mga shade
Kunin ang base na kulay na hsl(30, 29%, 28%). Ang mas maliwanag na shade para sa hover ay hsl(30, 29%, 34%). Ang napakaputlang tint para sa background ay hsl(30, 29%, 94%). Ang mas madilim na shade para sa mga napindot na state ay hsl(30, 29%, 22%). Hindi gumagalaw ang hue at saturation, kaya halatang magkakabilang ang mga kulay. Ang paggawa ng gayon sa hex ay mangangailangan ng ilang pagtatangka at magmumukha pa ring bahagyang mali.
Theming at dark mode
Madalas na kailangan ng theme ang parehong palette sa maliwanag at madilim na bersyon. Sa HSL, pinananatili mo ang hue at inaayos ang lightness at saturation: pagaanin ang mga background at padilimin ang teksto para sa light theme, at kabaligtaran para sa dark. Ang pagtatakda ng hue bilang custom property at pagbabago lang ng lightness ay karaniwan at maayos na paraan para gawin ito.
Pagbuo ng mga palette
Para humanap ng mga kulay na bagay sa isang base, paikutin ang hue. Ang tatlumpung digri sa magkabilang panig ay nagbibigay ng analogous na mga kulay, ang 180 ay nagbibigay ng complement, at ang 120 o 240 ay nagbibigay ng triad. Ayusin ang saturation at lightness, baguhin ang hue, at magkakapareho ang dating ng mga kulay. Mabilis itong paraan para magsimula ng palette na hindi mukhang random.
Naa-access na contrast
Ang lightness ang pangunahing kontrol para sa contrast. Kung mahirap basahin ang teksto sa may kulay na background, karaniwang ang solusyon ay dagdagan ang pagkakaiba ng lightness nila, at ginagawa ito ng HSL na usapin ng pag-aayos ng isang numero sa bawat panig.
Paano mag-convert ng HEX sa HSL dito
I-type o i-paste ang hex code
Ilagay ang kulay sa unang field, may hash sign man o wala. Tinatanggap ang anyong may tatlo at anim na digit, at binabasa rin ang anyong may walong digit na may transparency.
Basahin ang hsl na halaga
Lumalabas agad ang sagot, gaya ng #5A4632 = hsl(30, 29%, 28%). Ang tatlong numero ay ang hue sa digri at ang saturation at lightness sa porsyento.
Kopyahin ito sa stylesheet mo
Gamitin ang resulta kung ano ito, sa rule gaya ng color: hsl(30, 29%, 28%). Para isaayos ang kulay, baguhin ang huling bilang. Ang tool para sa kabaligtarang direksyon ay ang HSL sa HEX.
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 HEX sa HSL
Pag-asa sa perpektong round trip
Dahil sa pag-round, ang pagbabalik ay maaaring magbigay ng code na isa o dalawang hakbang ang layo sa orihinal. Para sa isang kulay, hindi ito nakikita. Para sa design system na maraming kulay ang pabalik-balik na kino-convert, maaari itong mag-ipon. Panatilihin ang hex bilang pinagmulan.
Pag-aakalang ang pantay na lightness ay pantay na liwanag
Ang dalawang kulay na may parehong lightness sa HSL ay maaaring magmukhang magkaiba nang malaki sa liwanag: ang dilaw sa 50% ay mukhang higit na mas maliwanag kaysa sa asul sa 50%. Maginhawang numero ang lightness ng HSL, hindi sukat ng nakikitang liwanag. Para sa mga pagsusuri ng contrast, gumamit ng wastong contrast tool.
Paglimot sa mga percent sign
Sa CSS, may percent sign ang saturation at lightness sa hsl(), at payak na numero ang hue o numerong may deg. Klasikong pagkakamali ang pag-iwan sa mga sign.
Pagbibigay ng labis na kahulugan sa kulay-abo
Walang hue ang kulay-abo. Kung 0 ang ipinapakita ng converter para rito, hindi ibig sabihin na mapula ito.
Mga tanong ng mga tao bago mag-convert
Ano ang #FF0000 sa HSL?
hsl(0, 100%, 50%), purong pula.
Ano ang #FFFFFF sa HSL?
hsl(0, 0%, 100%), puti. Walang kahulugan ang hue para sa puti, at 0 ang ipinapakita ng converter.
Suportado ba ang HSL saanman?
Naiintindihan ng lahat ng kasalukuyang browser ang hsl() at hsla(). Matagal na itong bahagi ng CSS.
Eksakto ba ang conversion?
Eksakto ito sa diwa ng paglalarawan sa parehong kulay, ngunit ni-round ang mga numero sa buong digri at porsyento, kaya ang pagbabalik ay maaaring mapunta sa isang hakbang na layo.
Ina-upload ba ang kulay ko?
Hindi. Tumatakbo sa iyong browser ang aritmetika at walang ipinapadala saanman.
Paano ako babalik?
Gamit ang HSL sa HEX.
Matalinong pagpili kapag nagko-convert ka ng HEX sa HSL
Gamitin ang HSL para gumawa, ang hex para mag-imbak
Itago ang master palette sa hex, kung saan malinaw ito, at gamitin ang HSL kapag gusto mong gumawa ng mga variation. Nawawalan nang kaunti ang mga round trip; ang master ay hindi.
Isaalang-alang ang mas bagong color space
Nag-aalok na ngayon ang CSS ng oklch() at mga katulad na notasyon kung saan talagang magkapareho ang hitsura ng pantay na lightness. Sulit pag-aralan ang mga ito para sa mga bagong design system. Nananatiling notasyon ang HSL na halos lahat ay nakakaintindi at sinusuportahan ng bawat tool.
Gumamit ng mga custom property
Itakda ang --hue, --sat at --light, at bumuo ng mga kulay mula sa mga ito: hsl(var(--hue) var(--sat) var(--light)). Magbabago ang theme sa pag-edit ng ilang numero.
Pagbasa at pagsulat ng HSL nang may kumpiyansa
Ilang palatandaang dapat tandaan
Ilang numero ang nagpapadali sa pagbasa ng HSL. Ang mga hue sa multiple ng 60 ang mga purong kulay: 0 pula, 60 dilaw, 120 berde, 180 cyan, 240 asul, 300 magenta. Ang lightness na 50 na may saturation na 100 ang nagbibigay ng pinakadalisay na bersyon ng anumang hue, at ang lightness na 95 pataas ay tint na napakaputla kaya gumagana bilang background. Kapag nagko-convert ka ng HEX sa HSL at nakakita ng hue na malapit sa isa sa mga palatandaang ito, mapapangalanan mo ang pamilya ng kulay sa isang sulyap.
Paglipat sa pagitan ng mga pamilya
Ang pagdaragdag ng 180 sa hue ay nagbibigay ng kulay na kabaligtaran sa wheel, na siyang complement at karaniwang pinakamatinding contrast. Ang pagdaragdag o pagbabawas ng 30 ay nagbibigay ng kapitbahay na maayos na nakaupo sa tabi ng orihinal. Ginagamit ng mga designer ang mga hakbang na ito para pumili ng accent na bagay sa kulay ng brand nang walang hulaan.
Pagtatala ng mga na-convert na halaga
Kapag nagko-convert ka ng HEX sa HSL para sa palette, isulat ang mga resulta sa talahanayan na may orihinal na hex sa tabi. Ipinapakita ng talahanayan kung paano magkakaugnay ang mga kulay, at kung hindi tugma ang hue o lightness sa iba, makikita agad ang kakaiba. Nagbibigay din ito sa koponan mo ng pinagsasaluhang sanggunian.
Pagsubok sa totoong mga screen
Ang mga kulay na mukhang balanse sa naka-calibrate na monitor ay maaaring magmukhang iba sa telepono sa ilalim ng araw o sa murang laptop. Suriin ang tapos na palette sa hindi bababa sa dalawang device, at bahagyang ayusin ang lightness kung nawawala ang maputlang tint sa isa sa mga ito.
Mga kaugnay na converter
Sakop ng parehong pamilya ng mga tool ang mga katabing conversion. Para bumalik, gamitin ang HSL sa HEX. 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 at px sa em ay ginagawa para sa mga haba ang ginagawa ng pahinang ito para sa mga kulay.
Isang halimbawang nalutas
Sabihin nating #1E7A5C ang kulay ng brand mo. Kino-convert mo ang HEX sa HSL at nababasa mo ang hsl(160, 61%, 30%). Para sa hover state, isinusulat mo ang hsl(160, 61%, 36%), bahagyang mas maliwanag. Para sa napindot na state, hsl(160, 61%, 24%). Para sa napakaputlang background sa likod ng notice, hsl(160, 40%, 95%). Para sa disabled na button, hsl(160, 12%, 60%), ang parehong hue na inalisan ng halos lahat ng kulay. Lima na kulay, iisang hue, naisulat sa isang minuto, at mukhang magkakabilang silang lahat. Kapag nagbago ang kulay ng brand, babaguhin mo nang isang beses ang numero ng hue.
Maikling checklist
Bago mag-convert
Magpasya kung ano ang gusto mong gawin sa kulay: baguhin ito, i-theme ito o basahin lang.
Habang nagko-convert
I-paste ang hex, basahin ang hsl at itala ang tatlong numero.
Pagkatapos mag-convert
Gawin ang mga variation sa pagbabago ng isang numero bawat pagkakataon, at tingnan ang mga ito sa totoong background.
Mga karaniwang pagkakamali
Pagturing na eksakto ang mga ni-round na numero
Buong numero ang mga ito. Panatilihin ang hex bilang master.
Pagtutumbas ng lightness sa liwanag
Ang dalawang kulay na may parehong lightness ay maaaring magkaiba nang malaki sa kung gaano sila kaliwanag tingnan.
Pag-iwan sa mga percent sign
Kailangan ng saturation at lightness ang mga ito sa CSS.
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 HEX sa HSL.
Buod
Para mag-convert ng HEX sa HSL dito, i-type o i-paste ang hex code at basahin agad ang hsl na halaga. Pinananatili ng conversion 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, dahil mapapaputla mo ang kulay o mapapadilim ang shade sa pagbabago ng isang numero, na halos imposible sa hex. Inilalarawan ng dalawa 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 byte pagbalik, itago ang hex. Walang ina-upload.