HSL opisuje boju onako kako ljudi pričaju o njoj: koja nijansa, koliko je zasićena, koliko je svijetla. Pretvaranje HEX koda u HSL najbrži je način da boju dobiješ u obliku koji možeš stvarno podesiti — posvijetliti, prigušiti ili izgraditi cijelu skalu.
Kako radi konverzija iz HEX u HSL
- Pretvori HEX kod u RGB i podijeli svaki kanal sa 255, tako da sve tri vrijednosti budu između 0 i 1.
- Pronađi najveću i najmanju od te tri vrijednosti. Njihov prosjek je svjetlina L.
- Raspon između njih određuje zasićenost S: podijeli ga sa (2 − max − min) za svijetle boje, ili sa (max + min) za tamne.
- Kanal koji drži maksimum odlučuje nijansu H — crvena na 0°, zelena na 120°, plava na 240° — a preostala dva kanala pozicioniraju nijansu unutar tog segmenta.
Primjer koji radi
Matematika je tačna, ali se HSL vrijednosti obično zaokružuju na cijele stepene i postotke. Pretvaranje natrag stoga može rezultirati jednim ili dva RGB koraka udaljenim od originala — nevidljivo u praksi, ali korisno znati ako boje često kružno pretvaraš.
HEX i HSL objašnjeni
Šta je HEX?
HEX kod je šesteroznamenkasti heksadecimalni broj koji pohranjuje crvenu, zelenu i plavu komponentu boje iza vodećeg #. Svaki par znamenki pokriva jednu komponentu, od 00 (nema) do FF (puno), što daje istih 16,7 miliona boja kao RGB, ali u kraćem zapisu. HEX je zadani u CSS-u, alatima za dizajn i smjernicama brenda.
- Sintaksa:
- #RRGGBB
- Opseg:
- 00–FF po kanalu
- Najbolje za:
- CSS, predaja dizajna, smjernice brenda
Šta je HSL?
HSL dijeli boju na nijansu (0–360° na kolor točku), zasićenost (koliko je boja intenzivna, 0–100%) i svjetlinu (koliko je svijetla, 0–100%). Pošto svaki dio odgovara načinu na koji ljudi opisuju boju, HSL je najjednostavniji format za izradu 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, teming
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%) |