HSL opisuje boju onako kako ljudi razgovaraju o njoj: koja nijansa, koliko je zasićena, koliko je svetla. Pretvaranje HEX koda u HSL je najbrži način da dobiješ boju u obliku koji možeš stvarno da podešavaš — posvetliš je, utišaš ili izgradiš čitav sklop tonova.
Kako funkcioniše pretvaranje HEX u HSL
- Konvertuj HEX kod u RGB i podeli svaki kanal sa 255, tako da sve tri vrednosti budu između 0 i 1.
- Pronađi najveću i najmanju od tri vrednosti. Njihov prosek je svetlina L.
- Raspon između njih određuje zasićenost S: podeli ga sa (2 − max − min) za svetle boje, ili sa (max + min) za tamne.
- Kanal koji drži maksimum određuje nijansu H — crvena na 0°, zelena na 120°, plava na 240° — a preostala dva kanala pozicioniraju nijansu unutar tog segmenta.
Praktičan primer
Matematika je tačna, ali se HSL vrednosti obično zaokružuju na cele stepene i procente. Vraćanje nazad može zato pomeriti RGB za jedan ili dva koraka u odnosu na original — nevidljivo u praksi, ali korisno znati ako boje često konvertuješ napred-nazad.
HEX i HSL objašnjeni
Šta je HEX?
HEX kod je šestocifreni heksadecimalni broj koji čuva crvenu, zelenu i plavu komponentu boje iza početnog #. Svaki par cifara predstavlja jednu komponentu, od 00 (nema) do FF (puno), što daje istih 16,7 miliona boja kao RGB, ali u kraćem zapisu. HEX je podrazumevan u CSS-u, dizajn alatima i brend smernicama.
- Sintaksa:
- #RRGGBB
- Opseg:
- 00–FF po kanalu
- Najbolje za:
- CSS, predaja dizajna, brend smernice
Šta je HSL?
HSL deli boju na hue (0–360° na točku boja), saturation (koliko je zasićena, 0–100%) i lightness (koliko je svetla, 0–100%). Pošto svaki deo odgovara načinu na koji ljudi opisuju boju, HSL je najlakši format za pravljenje nijansi, tonova i konzistentnih paleta — ručno ili u kodu.
- Sintaksa:
- hsl(H, S%, L%)
- Opseg:
- 0–360°, 0–100%, 0–100%
- Najbolje za:
- palete, nijanse i tonovi, theming
HEX u HSL referentna tabela
Najčešće CSS boje, konvertovane iz HEX u HSL.
| Boja | 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%) |