Jak RGB a HSL modely souvisí a proč je převodník užitečný
Tento nástroj převádí barvu z formátu RGB, který popisuje, jak monitor míchá červené, zelené a modré světlo, do formátu HSL, který je navržený pro lidské uvažování o barvě. Na rozdíl od RGB, kde změna jednoho kanálu často změní vnímaný odstín, HSL umožňuje měnit světlost nezávisle při zachování stejného odstínu. Díky tomu je HSL preferovaným modelem pro tvorbu palet, motivů a přístupných kontrastních variant.
Vstupem jsou tři čísla v rozsahu 0–255, například 79, 70, 229. Výstupem je odstín ve stupních (0–360), sytost v procentech a světlost v procentech. Kromě HSL nástroj zobrazí také HEX, HSV, CMYK (odhad pro obrazovku) a LAB. Jakákoli úprava libovolného pole okamžitě aktualizuje všechna ostatní. Všechny konverze probíhají přímo v prohlížeči – žádný vstup není odesílán na server.
Jak RGB model funguje na obrazovkách
RGB je aditivní barevný model. Každý pixel na monitoru obsahuje tři subpixely – červený, zelený a modrý. Když se všechny tři rozsvítí na plný výkon (255, 255, 255), vznikne bílá. Když všechny zhasnou (0, 0, 0), vznikne černá. Všechny ostatní barvy jsou kombinací různých intenzit těchto tří světel.
Standardní pracovní prostor je sRGB, který definuje, jakých odstínů je displej schopen. Každá hodnota 0–255 odpovídá 8 bitům na kanál, což dává 16 777 216 možných barev. Tento rozsah je dán hardwarem – starší monitory zvládaly méně, moderní profesionální displeje mohou pracovat s 10bitovými kanály.
Při zadávání RGB hodnot je třeba dodržet přesný formát: tři celá čísla oddělená čárkami nebo mezerami. Pokud zadáte neplatný vstup, zobrazí se hláška: „Zadejte RGB jako tři čísla 0–255, například 79, 70, 229.“
Co dělá HSL model jiným a proč je užitečný
HSL odděluje tři kvality barvy, které lidské oko přirozeně rozlišuje:
- Odstín (Hue) – úhel na barevném kruhu 0–360°. 0° je červená, 120° zelená, 240° modrá.
- Sytost (Saturation) – čistota barvy v procentech. 0 % je šedá, 100 % je plně sytá barva.
- Světlost (Lightness) – vnímaný jas v procentech. 0 % je černá, 100 % je bílá.
Tento model řeší zásadní problém RGB: když chcete vytvořit světlejší variantu barvy, v RGB musíte zvýšit všechny tři kanály, což může posunout odstín. V HSL stačí zvýšit světlost. Stejně tak pro tmavší variantu snížíte světlost a odstín zůstane zachován.
Z tohoto důvodu použijete HSL když:
- Navrhujete světlý a tmavý režim aplikace – stačí změnit světlost všech barev o stejnou hodnotu.
- Tvoříte paletu odstínů pro datovou vizualizaci – HSL světlost je intuitivní pro sekvenční škály.
- Potřebujete dodržet WCAG kontrast – upravíte světlost, aniž byste změnili identitu barvy.
Přímý vstup HSL do nástroje funguje také – například 243, 75 %, 59 %. Neplatný vstup zobrazí: „Zadejte HSL jako odstín 0–360 a dvě procenta, například 243, 75 %, 59 %.“
Matematika převodu RGB → HSL krok za krokem
Samotný převod probíhá v několika krocích. Vezměme si barvu 79, 70, 229 z úvodu.
1. Normalizace RGB hodnot na rozsah 0–1
Každou hodnotu vydělíme 255:
- R' = 79 / 255 ≈ 0,310
- G' = 70 / 255 ≈ 0,275
- B' = 229 / 255 ≈ 0,898
2. Nalezení minima a maxima
- Cmax = 0,898 (modrý kanál)
- Cmin = 0,275 (zelený kanál)
- Δ (delta) = Cmax - Cmin = 0,623
3. Výpočet světlost (Lightness)
L = (Cmax + Cmin) / 2 L = (0,898 + 0,275) / 2 = 0,586 → v procentech: 58,6 %
4. Výpočet sytost (Saturation)
Pokud je Δ = 0 (barva je šedá), sytost je 0 %. Jinak:
S = Δ / (1 - |2L - 1|) S = 0,623 / (1 - |2 × 0,586 - 1|) S = 0,623 / (1 - |0,172|) S = 0,623 / 0,828 ≈ 0,752 → 75,2 %
5. Výpočet odstínu (Hue)
Záleží na tom, který kanál je maximální:
- Cmax = B', proto: H' = 4 + (R' - G') / Δ
- H' = 4 + (0,310 - 0,275) / 0,623 = 4 + 0,056 ≈ 4,056
- H = H' × 60° = 4,056 × 60 ≈ 243,4°
Výsledek: HSL(243°, 75 %, 59 %). Nástroj zaokrouhlí na celá čísla.
HSL pro tvorbu palet a přístupnost
Hlavní výhoda HSL nastává při práci s variantami jedné barvy. Pokud máte brandovou barvu #4F46E5 (RGB 79, 70, 229, HSL 243°, 75 %, 59 %), můžete vytvořit:
- Tint (světlejší variantu): zvýšíte světlost na 80 %, sytost ponecháte
- Shade (tmavší variantu): snížíte světlost na 30 %, sytost ponecháte
- Tone (méně sytou variantu): snížíte sytost na 40 %, světlost ponecháte
V RGB by každá taková úprava vyžadovala ruční ladění všech tří kanálů a výsledek by často posunul odstín. V HSL je změna jedné proměnné předvídatelná.
Pro přístupnost je tento model obzvlášť cenný. WCAG 2.1 vyžaduje kontrastní poměr alespoň 4,5:1 pro běžný text a 3:1 pro velký text. Pomocí HSL můžete vzít barvu pozadí a generovat varianty textu s dostatečným kontrastem pouze úpravou světlosti, aniž byste opustili odstín brandu.
Příklad: bílé pozadí (HSL 0°, 0 %, 100 %) a tmavě modrý text. Chcete-li stejný text na světle modrém pozadí, zvýšíte světlost pozadí a text ponecháte. Pokud by kontrast nestačil, mírně snížíte světlost textu. Odstín zůstává konstantní a branding zůstává konzistentní.
Omezení HSL a proč někdy nestačí
HSL není percepčně uniformní. To znamená, že žlutá a modrá při stejné světlosti 50 % vypadají subjektivně jinak jasné. Žlutá působí světleji, modrá tmavší. Lidské oko je na různé vlnové délky různě citlivé.
Pro skutečně uniformní vnímání byste měli použít model LAB, který nástroj také zobrazuje. LAB odděluje světlost (L) od dvou barevných os (a a b) a je navržen tak, aby stejná vzdálenost v modelu odpovídala stejnému vnímanému rozdílu.
Další omezení: RGB i HSL jsou display-referenční. Popisují barvy v kontextu konkrétního monitoru v sRGB prostoru. Když zadáte LAB nebo CMYK hodnotu, která leží mimo viditelný RGB rozsah, nástroj ji upraví na nejbližší zobrazitelnou barvu. Při zpětném převodu může dojít k nepatrnému posunu – to je vlastnost, nikoli chyba.
CMYK výstup je pouze odhad pro obrazovku. Pokud potřebujete barvu pro profesionální tisk, vždy ji ověřte na fyzickém vzorníku.
Praktické použití v CSS a JavaScriptu
CSS podporuje HSL nativně od verze CSS Color Module Level 3:
.prvni-barva {
background-color: hsl(243, 75%, 59%);
}
.druha-barva {
background-color: hsla(243, 75%, 59%, 0.8); /* s průhledností */
}
V JavaScriptu můžete HSL hodnoty dynamicky měnit:
const el = document.querySelector('.prvek');
const aktualniBarva = 'hsl(243, 75%, 59%)';
// Změna světlosti na 70 %
el.style.backgroundColor = 'hsl(243, 75%, 70%)';
Tento přístup se běžně používá v komponentových knihovnách pro generování tematických variant. Místo aby vývojář definoval deset různých RGB hodnot, stačí definovat jednu HSL hodnotu a světlost dopočítat.
Často kladené otázky
Proč nástroj zobrazuje HSL s desetinnými místy, když CSS používá celá čísla? Nástroj zobrazuje přesné hodnoty pro případy, kdy potřebujete barvu dále zpracovávat programově. Pro CSS stačí zaokrouhlit na celá čísla. Výstupní pole můžete zkopírovat a při vkládání do CSS hodnoty zaokrouhlit.
Liší se HSL v CSS od HSL v tomto nástroji?
Ne. CSS hsl() používá stejnou definici: odstín 0–360, sytost a světlost v procentech. Hodnoty můžete přenášet přímo.
Proč když převedu barvu z HSL zpět na RGB, dostanu mírně odlišná čísla? Při zaokrouhlování na celá čísla RGB (0–255) dochází k nepatrné ztrátě přesnosti. Rozdíl je obvykle 1–2 jednotky RGB, což je na obrazovce nerozeznatelné.
Můžu pomocí HSL vytvořit duhovou paletu pro graf? Ano. Stačí fixovat sytost na 100 % a světlost na 50 % a měnit odstín od 0° do 360°. Výsledné barvy budou mít stejnou sytost i světlost, ale kvůli neuniformitě HSL mohou některé působit tmavší (modrá) nebo světlejší (žlutá). Pro lepší výsledek použijte LAB nebo HSL s upravenou světlostí.
Co když potřebuji barvu pro tisk? Použijte CMYK hodnoty pouze jako orientační. Pro přesný tisk vždy pracujte s fyzickými vzorníky Pantone nebo jiných certifikovaných systémů.
Je bezpečné zadávat do nástroje citlivé barvy z projektu? Ano. Všechny konverze probíhají lokálně v prohlížeči. Žádná data neopouštějí váš počítač.