Výber farby v HSL je pohodlný, ale štýly, handoffy a brand dokumenty často vyžadujú HEX. Tento prevodník to spojí a dá ti šesťciferný kód pre ľubovoľnú kombináciu odtieňa, sytosti a svetlosti.
Ako funguje konverzia z HSL na HEX
- Preveď sytosť a svetlosť na zlomky: 60% je 0.6.
- Vypočítaj chromu C = (1 − |2L − 1|) × S — to ukazuje, ako ďaleko je farba od šedej.
- Použi odtieň na umiestnenie tejto chromy do červeného, zeleného a modrého kanála, potom všetky tri posuň o L − C/2.
- Vynásob každý kanál 255, zaokrúhli ho a zapíš ako dve hexadecimálne číslice.
Príklad
Zaokrúhľovanie sa deje raz, v poslednom kroku, keď každý kanál uzamkneš na celé 0–255. Výsledok je najbližší HEX k tvojemu HSL vstupu a zvyčajne zodpovedá tomu, čo ukáže dizajnový nástroj.
HSL a HEX vysvetlené
Č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
Č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
Referenčná tabuľka HSL → HEX
Najbežnejšie CSS farby prevedené z HSL na HEX.
| Farba | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |