HSL opisuje boju onako kako ljudi govore o njoj: koji ton, koliko kolorita, koliko svijetla. Pretvorba HEX koda u HSL najbrži je način da dobiješ boju u obliku kojeg stvarno možeš podešavati — posvijetliti, prigušiti ili izgraditi cijelu skalu.
Kako funkcionira pretvorba HEX u HSL
- Pretvori HEX kod u RGB i podijeli svaki kanal s 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ćenje S: podijeli ga s (2 − max − min) za svijetle boje, ili s (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.
Primjer
Matematika je točna, ali HSL vrijednosti se obično zaokružuju na cijele stupnjeve i postotke. Povratna pretvorba može zato završiti jedan ili dva RGB koraka udaljena od izvornika — u praksi nevidljivo, ali dobro znati ako boje često kružno pretvaraš.
HEX i HSL objašnjeno
Što je HEX?
HEX kod je šesteroznamenkasti heksadecimalni broj koji pohranjuje kanale crvene, zelene i plave boje iza vodećeg #. Svaki par znamenki predstavlja jedan kanal, od 00 (nijedan) do FF (puno), što daje istih 16,7 milijuna boja kao RGB u znatno kraćem zapisu. HEX je zadano u CSS-u, alatima za dizajn i smjernicama brenda.
- Sintaksa:
- #RRGGBB
- Raspon:
- 00–FF po kanalu
- Najbolje za:
- CSS, predaja dizajna, smjernice brenda
Što je HSL?
HSL razdvaja boju na nijansu (0–360° na kolor kotaču), zasićenost (koliko je šarena, 0–100%) i svjetlinu (koliko je svijetla, 0–100%). Budući da svaki dio odgovara načinu na koji ljudi opisuju boju, HSL je najjednostavniji format za izradu tonova, nijansi i konzistentnih paleta — ručno ili u kodu.
- Sintaksa:
- hsl(H, S%, L%)
- Raspon:
- 0–360°, 0–100%, 0–100%
- Najbolje za:
- palete, tonovi i nijanse, theming
Referentna tablica HEX u HSL
Najčešće CSS boje, pretvorene 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%) |