Pretvornik sprejme vse oblike CSS hex zapisa: 6-mestno #3366cc, 3-mestno skrajšano #36c ter 4- in 8-mestno obliko z alfa kanalom, z ali brez #. Prikaže niz hsl() oziroma hsla(), posamezne vrednosti in razčlenitev po komponentah - poleg tega pa še vrstico za obratno pretvorbo iz HSL v HEX, če potrebuješ ravno nasprotno. Vse se izvede v tvojem brskalniku - brez nalaganja, brez računa, brez omejitev.
Pretvorba HEX v HSL
Vse poteka v vašem brskalniku - brez nalaganja, brez registracije.
CSS
hsl(220, 60%, 50%)Kako poteka pretvorba
Odtenek220
Nasičenost60%
Svetlost50%
Potrebuješ obratno smer? HSL v HEX
#3366ccKako pretvorim HEX v HSL?
Najprej hex kodo razberemo kot rdečo, zeleno in modro (0-255), nato isto barvo zapišemo kot odtenek, nasičenost in svetlost. Odtenek je kot na barvnem krogu (0-360), nasičenost pove, kako živa je barva (0-100 %), svetlost pa, kako svetla je (0-100 %). #3366cc tako postane hsl(220, 60%, 50%). To orodje to naredi sproti, med tipkanjem.
Kako uporabljati
- 1Vnesi hex kodo. Vtipkaj ali prilepi hex barvo, na primer #3366cc (ali #36c), ali jo izberi z barvno paleto. Znak # ni obvezen.
- 2Preberi vrednost HSL. Niz hsl(), posamezne vrednosti in predogled barve v živo se posodobijo sproti med tipkanjem, skupaj z razčlenitvijo odtenka, nasičenosti in svetlosti.
- 3Kopiraj obliko, ki jo potrebuješ. Klikni Kopiraj poleg niza hsl() ali surovih vrednosti. Potrebuješ obratno smer? Spodaj vnesi odtenek, nasičenost in svetlost, da dobiš hex kodo nazaj.
Komu je namenjeno
- Frontend razvijalci, ki hex kodo pretvorijo v hsl(), da lahko prilagodijo svetlost za stanja ob prehodu miške ali fokusu, ne da bi izbirali povsem novo barvo.
- Oblikovalci palet, ki ohranijo isti odtenek in postopoma spreminjajo nasičenost ter svetlost, da iz ene osnovne barve znamke ustvarijo svetlejše in temnejše različice.
- Avtorji tem in oblikovalskih žetonov, ki barve shranjujejo v HSL zapisu, ker ga je veliko lažje brati in ročno prilagajati kot hex niz.
- Vsi, ki usklajujejo barve med orodji, kjer eno pričakuje hex (Figma, večina CSS), drugo pa HSL (SCSS pomočniki, nekateri barvni sistemi).
Pogosta vprašanja
Je ta pretvornik HEX v HSL brezplačen?
Da - popolnoma brezplačen, brez registracije in brez omejitev. Deluje v celoti v tvojem brskalniku.
Ali se moje barve kam pošiljajo?
Ne. Pretvorba poteka z navadnim JavaScriptom neposredno na tvoji napravi - nič se ne pošlje na strežnik, orodje pa deluje tudi brez povezave, ko je stran enkrat naložena.
Kaj sploh je HSL?
HSL pomeni odtenek (hue), nasičenost (saturation) in svetlost (lightness). Odtenek je kot od 0 do 360 stopinj na barvnem krogu, nasičenost pove, kako živa je barva, od 0 do 100 odstotkov, svetlost pa gre od 0 odstotkov (črna) prek čiste barve pri 50 odstotkih do 100 odstotkov (bela).
Kako pretvorim hex v HSL ročno?
Hex razčleniš na rdečo, zeleno in modro ter vsako deliš s 255. Vzemi največjo in najmanjšo od teh treh vrednosti: svetlost je njuno povprečje, nasičenost je (max - min) deljeno s (1 - |2L - 1|), odtenek pa določa, kateri kanal je največji, preračunan na 0-360 stopinj.
Ali podpira skrajšani zapis, na primer #36c?
Da. V CSS skrajšanem zapisu se vsaka števka podvoji, zato se #36c razširi v #3366cc in pretvori v hsl(220, 60%, 50%). 4-mestna oblika deluje enako, zadnja števka pa predstavlja alfo.
Kako obravnava prosojnost (HSLA)?
8-mestna hex koda ima alfo zapisano v zadnjem paru znakov. Ta bajt (0-255) delimo s 255, da dobimo vrednost alfe med 0 in 1, kot jo pričakuje hsla(), zaokroženo na tri decimalke - tako #3366cc80 postane hsla(220, 60%, 50%, 0.502).
Lahko pretvori HSL nazaj v HEX?
Da. Uporabi vrstico HSL v HEX pod rezultatom: vnesi odtenek (0-360) ter nasičenost in svetlost (0-100 %) in takoj dobiš hex kodo. Vrednosti izven razpona se samodejno omejijo.
Zakaj je HSL uporabnejši od hexa?
HSL je berljiv za ljudi: barvo posvetliš z višanjem L, jo omiliš z nižanjem S ali spremeniš njeno barvno družino s spreminjanjem H - vse to brez ugibanja hex števk. Zato je odličen za dosledne palete, stanja ob premikanju miške in oblikovalske žetone.