HSL opisuje barvo tako, kot o njej govorimo: kateri odtenek, koliko barvita, kako svetla. Pretvorba HEX kode v HSL je najhitrejši način, da barvo dobiš v obliki, ki jo lahko zares prilagodiš — posvetliš jo, utišaš ali iz nje zgradiš celoten lestvico.
Kako poteka pretvorba iz HEX v HSL
- Pretvori HEX kodo v RGB in vsak kanal deli z 255, tako da so vse tri vrednosti med 0 in 1.
- Poišči največjo in najmanjšo izmed treh vrednosti. Njuna sredina je svetlost L.
- Razpon med njima določa nasičenost S: deli ga z (2 − max − min) za svetle barve ali z (max + min) za temne.
- Kanal, ki ima največjo vrednost, določi barvni odtenek H — rdeča pri 0°, zelena pri 120°, modra pri 240° — ostala dva kanala pa postavita odtenek znotraj tega segmenta.
Delujoč primer
Matematika je natančna, vendar se HSL vrednosti običajno zaokrožijo na cele stopinje in odstotke. Pretvorba nazaj lahko zato pristane en ali dva RGB koraka stran od izvirnika — v praksi nevidno, a dobro vedeti, če barve pogosto pretvarjaš naprej in nazaj.
HEX in HSL pojasnjeno
Kaj je HEX?
HEX koda je šestmestno šestnajstiško število, ki shrani rdečo, zeleno in modro komponento barve za vodilnim #. Vsako dvojico mest predstavlja ena komponenta, od 00 (brez) do FF (polno), kar daje enakih 16,7 milijona barv kot RGB v precej krajši notaciji. HEX je privzeta izbira v CSS, oblikovalskih orodjih in smernicah blagovnih znamk.
- Sintaksa:
- #RRGGBB
- Območje:
- 00–FF na komponento
- Najbolj primerno za:
- CSS, predaja oblikovanja, smernice blagovne znamke
Kaj je HSL?
HSL razdeli barvo na odtenek (0–360° na barvnem krogu), nasičenost (koliko barvita, 0–100%) in svetlost (koliko svetla, 0–100%). Ker vsaka komponenta ustreza načinu, kako ljudje opisujejo barvo, je HSL najlažji format za ustvarjanje odtenkov, tonov in doslednih palet — ročno ali v kodi.
- Sintaksa:
- hsl(H, S%, L%)
- Območje:
- 0–360°, 0–100%, 0–100%
- Najbolj primerno za:
- palete, odtenki in toni, tematizacija
Tabela za HEX v HSL
Najpogostejše CSS barve, pretvorjene iz HEX v HSL.
| Barva | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |