HSL popisuje barvu tak, jak o ní lidé mluví: jaký odstín, jak intenzivní, jak světlá. Převod HEX na HSL je nejrychlejší cesta, jak dostat barvu do podoby, kterou můžeš skutečně doladit — zesvětlit, ztlumit nebo z ní vybudovat celou škálu.
Jak funguje převod z HEX na HSL
- Převěď HEX na RGB a vyděl každý kanál 255, aby všechny tři hodnoty byly mezi 0 a 1.
- Najdi největší a nejmenší z těch tří hodnot. Jejich průměr je světlost L.
- Rozdíl mezi nimi určuje sytost S: vyděl ho (2 − max − min) pro světlé barvy, nebo (max + min) pro tmavé.
- Kanál s maximem rozhodne o odstínu H — červená na 0°, zelená na 120°, modrá na 240° — a zbývající dva kanály umístí odstín uvnitř tohoto segmentu.
Ukázkový příklad
Matematika je přesná, ale HSL hodnoty se obvykle zaokrouhlují na celá stupně a procenta. Při zpětném převodu tak můžeš skončit o jeden nebo dva RGB kroky od původní barvy — v praxi neviditelné, ale dobré vědět, pokud barvy často převádíš tam a zpět.
HEX a HSL vysvětleno
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
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
Referenční tabulka HEX na HSL
Nejběžnější CSS barvy převedené z HEX na HSL.
| Barva | 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%) |