Převodník HSL na RGB

Co je HSL a proč se liší od RGB

HSL (Hue, Saturation, Lightness) je barevný model navržený pro lidské uvažování o barvě. Na rozdíl od RGB, které pracuje se třemi kanály červené, zelené a modré v rozsahu 0–255, HSL odděluje barevný tón (hue) od sytosti a světlosti. To znamená, že pokud změníte pouze světlost, tón zůstane nedotčený — něco, co v RGB nelze provést bez složitého nelineárního přepočtu.

Tento nástroj převádí HSL hodnoty na RGB (0–255) okamžitě, bez jakéhokoli zpoždění. Stačí zadat hue v rozsahu 0–360, saturaci a světlost v procentech, a všechny ostatní formáty se aktualizují samy. Výstup zahrnuje HEX, RGB, HSL, HSV, CMYK a LAB.

Proč je to užitečné? HSL je standardem v designových nástrojích pro tvorbu palet a témat. Když potřebujete převést tyto hodnoty do CSS nebo jiného kódu, který očekává RGB, ruční převod je zdlouhavý a náchylný k chybám. Tento nástroj vše vyřeší okamžitě a bez rizika posunu barev.

Jak převod funguje — matematika a standardy

Převod HSL na RGB není náhodný. Je definován normami, jako je CSS Color Module Level 4 (W3C). Algoritmus nejprve normalizuje saturaci a světlost na desetinná čísla — například 75 % → 0,75 — a hue na úhel v kruhu. Poté se použije pomocná funkce, která vypočítá mezilehlé hodnoty pro každý barevný kanál.

Konkrétní postup: pro hue H, saturaci S a světlost L se nejprve spočítá chroma C = (1 - |2L - 1|) × S. Poté se hue rozdělí do šesti sektorů (0–60°, 60–120°, 120–180°, 180–240°, 240–300°, 300–360°) a pro každý sektor se spočítá mezilehlá hodnota X = C × (1 - |(H / 60°) mod 2 - 1|). Pak se přičte posun m = L - C/2, aby se výsledné RGB hodnoty dostaly do rozsahu 0–1, a nakonec se vynásobí 255.

Tento proces je ztrátový? Ne. Každá platná HSL hodnota se mapuje na přesně jeden RGB triplet v zobrazitelném rozsahu. Na rozdíl od konverzí z LAB nebo CMYK do RGB, kde může dojít k ořezání mimo gamut (out‑of‑gamut clipping), zde k žádnému posunu barev nedochází. Převod je vratný — při zpětném převodu RGB na HSL dostanete původní hodnotu.

Vstupní a výstupní hodnoty nástroje

Nástroj přijímá HSL v přesně definovaném formátu: hue 0–360, saturace v procentech, světlost v procentech. Příklad: 243, 75%, 59%. Okamžitě po zadání se aktualizují všechna výstupní pole:

• HEX — standardní hexadecimální reprezentace, například #4F46E5
• RGB — tři čísla 0–255, například 79, 70, 229
• HSL — zpětné zobrazení původní hodnoty pro kontrolu
• HSV — hue, saturace, hodnota (value), kde saturace i hodnota jsou v procentech
• CMYK — azurová (Cyan), purpurová (Magenta), žlutá (Yellow), černá (Key) — vše v procentech
• LAB — světlost (L), kanál a (zelená–červená), kanál b (modrá–žlutá)

Důležité upozornění: CMYK výstup je odhad pro obrazovku. Profesionální tisk používá specifické profily (např. FOGRA, SWOP, ISO Coated v2) a skutečné hodnoty závisí na papíru, inkoustu a kalibraci tiskárny. Proto se hodnoty CMYK z tohoto nástroje mohou lišit od hodnot v tiskovém workflow.

Okrajové případy a chybová hlášení

Pokud zadáte neplatnou hodnotu — například hue mimo 0–360, saturaci bez procent, nebo světlost mimo 0–100 % — nástroj zobrazí chybovou zprávu: "Zadejte HSL jako hue 0–360 se dvěma procenty, například 243, 75%, 59%." Tato zpráva je konkrétní a navádí uživatele ke správnému formátu.

Další okrajové případy, které nástroj korektně zpracovává:

• Hue = 0 nebo 360: obě hodnoty vedou ke stejné barvě (červená), nástroj je zpracuje bez problémů.
• Saturace = 0 %: barva je šedá, bez ohledu na hue. Výstupní RGB bude mít všechny tři kanály stejné (odstíny šedi).
• Světlost = 0 %: výsledná barva je černá (RGB 0, 0, 0). Světlost = 100 %: bílá (RGB 255, 255, 255).
• Saturace = 100 % a světlost = 50 %: barva je plně sytá, v maximálním možném rozsahu.

Všechny konverze probíhají přímo v prohlížeči. Nic, co zadáte, není odesláno na server. To znamená, že nástroj funguje offline a nevyžaduje připojení k internetu.

Kdo nástroj využije a proč

Cílová skupina je jasně definovaná: designéři a front‑end vývojáři. Designéři vytvářejí palety v HSL, protože je to intuitivnější. Chtějí měnit světlost, aniž by se změnil tón — to je v HSL triviální, v RGB by to vyžadovalo nelineární úpravy. Když pak předávají hodnoty vývojářům, ti potřebují RGB nebo HEX pro CSS, JavaScript nebo jiné technologie.

Další skupinou jsou lidé, kteří přemýšlejí o barvě v lidských termínech — "chci tuto barvu, ale o trochu světlejší" — a potřebují znát přesné číselné hodnoty pro obrazovku.

Nástroj také pomáhá pochopit vztahy mezi barevnými modely. Například HSL a HSV: HSL odděluje světlost (lightness) od sytosti, zatímco HSV odděluje hodnotu (value) od sytosti. To znamená, že při stejné sytosti a světlosti v HSL může být výsledek v HSV zcela jiný. Nástroj ukazuje oba modely vedle sebe, což usnadňuje porozumění jejich odlišnostem.

Z hlediska přístupnosti je HSL užitečný pro návrh barevných schémat, která splňují kontrastní poměry WCAG. Změnou světlosti v HSL lze snadno dosáhnout požadovaného kontrastu, aniž by se změnil barevný tón.

Praktické příklady a časté chyby

Příklad: 243, 75%, 59%. Hue 243 je modrofialový tón. Saturace 75 % znamená, že barva je poměrně sytá, ale ne plně. Světlost 59 % je střední, takže barva není ani tmavá, ani světlá. Výstup:

• RGB: (79, 70, 229)
• HEX: #4F46E5
• HSV: (243, 69%, 90%)
• CMYK: (65%, 69%, 0%, 10%)
• LAB: (36, 25, -61)

Časté chyby při používání nástroje:

1. Zadání hue mimo rozsah 0–360. Například hodnota 400. Nástroj to odmítne s chybovou zprávou.
2. Zapomenutí procent u saturace a světlosti. Pouhé 243, 75, 59 není platné — správně je 243, 75%, 59%.
3. Záměna HSL a HSV. Lidé někdy zadávají HSV hodnoty do HSL pole a očekávají stejný výsledek. To nefunguje, protože modely mají odlišné výpočty.
4. Zadání desetinných čísel bez procent. Například 243, 0.75, 0.59 není akceptováno. Saturace a světlost musí být v procentech.

Často kladené otázky (FAQ)

Otázka: Je převod HSL na RGB ztrátový?

Ne. Každá platná HSL hodnota se mapuje na přesně jeden RGB triplet v zobrazitelném rozsahu. Při zpětném převodu RGB na HSL dostanete původní hodnotu.

Otázka: Proč se liší CMYK hodnoty od toho, co používám v tisku?

Nástroj poskytuje odhad CMYK pro obrazovku. Profesionální tisk používá specifické profily (např. FOGRA, SWOP, ISO Coated v2) a skutečné hodnoty závisí na papíru, inkoustu a kalibraci tiskárny. Vždy konzultujte s tiskárnou nebo použijte ICC profily.

Otázka: Mohu zadat HSL hodnoty bez procent?

Ne. Saturace a světlost musí být zadány v procentech (např. 75 %, 59 %). Bez procent nástroj zobrazí chybovou zprávu.

Otázka: Co se stane, když zadám hue 360?

Hue 360 a 0 vedou ke stejné barvě (červená). Nástroj zpracuje obě hodnoty korektně.

Otázka: Je možné nástroj používat offline?

Ano. Všechny konverze probíhají přímo ve vašem prohlížeči. Nic se neodesílá na server, takže nástroj funguje i bez připojení k internetu.

Otázka: Jaký je rozdíl mezi HSL a HSV?

HSL (Hue, Saturation, Lightness) odděluje světlost, zatímco HSV (Hue, Saturation, Value) odděluje hodnotu (jas). HSL je intuitivnější pro lidské vnímání a používá se pro tvorbu palet. HSV se často používá v grafických editorech pro výběr barev. Oba modely mají stejný hue, ale saturace a světlost / hodnota se počítají odlišně.