HSL popisuje farbu tak, ako o nej ľudia hovoria: aký odtieň, aká sýtosť, aká jasnosť. Prevod HEX kódu do HSL je najrýchlejší spôsob, ako získať farbu v tvare, ktorý reálne môžeš upravovať — zosvetliť ju, utlmiť alebo z nej postaviť celú škálu.
Ako funguje konverzia z HEX na HSL
- Preveď HEX na RGB a každý kanál vydel 255, aby všetky tri hodnoty ležali medzi 0 a 1.
- Nájdi najväčšiu a najmenšiu z týchto troch hodnôt. Ich priemer je svetlosť L.
- Rozdiel medzi nimi určuje sýtosť S: vydel ho (2 − max − min) pre svetlé farby alebo (max + min) pre tmavé.
- Kanál s najväčšou hodnotou určuje odtieň H — červená pri 0°, zelená pri 120°, modrá pri 240° — a zvyšné dva kanály umiestnia odtieň v rámci toho segmentu.
Príklad
Výpočet je presný, ale HSL hodnoty sa bežne zaokrúhľujú na celé stupne a percentá. Pri spätnej konverzii sa teda môžeš dostať o jedno alebo dve RGB „kroku“ ďalej od originálu — v praxi neviditeľné, ale dobré vedieť pri opakovaných cykloch úprav.
HEX a HSL vysvetlené
Čo je HEX?
HEX kód je šestciferné hexadecimálne číslo, ktoré uchováva červený, zelený a modrý kanál farby za úvodným #. Každý pár číslic reprezentuje jeden kanál od 00 (žiadny) po FF (plný), čo dáva rovnakých 16,7 milióna farieb ako RGB v kompaktnejšom tvare. HEX je predvolený v CSS, dizajnových nástrojoch a brand manuáloch.
- Syntax:
- #RRGGBB
- Rozsah:
- 00–FF na kanál
- Najvhodnejšie pre:
- CSS, odovzdanie dizajnu, brand manuály
Čo je HSL?
HSL rozdeľuje farbu na odtieň (hue, 0–360° na farebnom kruhu), sýtosť (saturation, ako farebná, 0–100%) a svetlosť (lightness, ako jasná, 0–100%). Keďže každá časť zodpovedá tomu, ako ľudia opisujú farby, HSL je najjednoduchší formát na tvorbu odtieňov, tmavších alebo svetlejších variácií a konzistentných paliet — ručne alebo v kóde.
- Syntax:
- hsl(H, S%, L%)
- Rozsah:
- 0–360°, 0–100%, 0–100%
- Najvhodnejšie pre:
- palety, odtiene a tiene, theming
Referenčná tabuľka HEX → HSL
Najbežnejšie CSS farby prevedené z HEX na HSL.
| Farba | 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%) |