Výběr barvy v HSL je pohodlný, ale styly, předání designu a brand dokumenty často používají HEX. Tenhle převodník ten rozdíl zacelí a dá ti šestimístný kód pro libovolnou kombinaci odstínu, sytosti a světlosti.
Jak funguje převod z HSL na HEX
- Převěz sytost a světlost na zlomky: 60% se stane 0.6.
- Spočti chromu C = (1 − |2L − 1|) × S — to ukazuje, jak daleko je barva od šedi.
- Použij odstín, aby ses umístil s touto chromou na červený, zelený a modrý kanál, potom posuň všechny tři o L − C/2.
- Vynásob každý kanál 255, zaokrouhli a zapiš jako dvě hexadecimální cifry.
Ukázkový příklad
Zaokrouhlování probíhá jednou, v posledním kroku, když se každý kanál přiřkne k celému 0–255 číslu. Výsledek je nejbližší HEX k tvému HSL vstupu a obvykle shodný s tím, co ukazuje designový nástroj.
HSL a HEX vysvětleno
Co je HSL?
HSL rozděluje barvu na odstín (hue, 0–360° na barevném kruhu), sytost (saturation, jak barevná, 0–100%) a jas (lightness, jak světlá, 0–100%). Protože každá část odpovídá způsobu, jak lidé barvy popisují, je HSL nejjednodušší formát pro vytváření odstínů, tónů a konzistentních palet — ručně i v kódu.
- Syntaxe:
- hsl(H, S%, L%)
- Rozsah:
- 0–360°, 0–100%, 0–100%
- Nejlepší pro:
- palety, odstíny a tóny, theming
Co je HEX?
HEX kód je šestimístné hexadecimální číslo, které po úvodním # uchovává červený, zelený a modrý kanál barvy. Každý pár číslic pokrývá jeden kanál od 00 (žádný) po FF (plný), což dává stejných 16,7 milionu barev jako RGB, ale v kratším zápisu. HEX je výchozí v CSS, designových nástrojích a styleguidu značky.
- Syntaxe:
- #RRGGBB
- Rozsah:
- 00–FF na kanál
- Nejlepší pro:
- CSS, předání designu, brand guidelines
Referenční tabulka HSL na HEX
Nejběžnější CSS barvy převedené z HSL na HEX.
| Barva | 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 |