Převodník HSL na HEX

Jak tato stránka převádí HSL na HEX

Tato stránka řeší jednu věc: zadáte barvu v modelu HSL – odstín (hue) ve stupních 0–360, sytost (saturation) v procentech 0–100 % a světlost (lightness) v procentech 0–100 % – a okamžitě získáte její hexadecimální (HEX) kód. Žádné zbytečné kroky, žádné přepínání mezi nástroji.

Co dělá tuto stránku odlišnou od běžných převodníků? HSL je barevný model navržený pro lidské myšlení o barvách. Když změníte světlost, odstín zůstane nedotčený – proto se HSL používá pro generování palet a témat. HEX je naproti tomu šestiznaková (nebo tříznaková zkratka) RGB notace, která neobsahuje alfa kanál, pokud není použita osmiznaková forma #RRGGBBAA. Převod z HSL do HEX je přímý a bezztrátový v rámci sRGB gamutu, na rozdíl od konverzí do CMYK nebo LAB, které mohou vyžadovat úpravy barev mimo reprodukovatelný rozsah.

Vstupní formát a ošetření chyb

Stránka přijímá tři hodnoty: H (0–360), S (0 % – 100 %) a L (0 % – 100 %). Ukázkový vstup: 243, 75 %, 59 %. Pokud některá hodnota chybí, je mimo povolený rozsah nebo není správně formátovaná, zobrazí se chybová hláška:

„Zadejte HSL jako odstín 0–360 se dvěma procenty, například 243, 75 %, 59 %.“

Nejčastější chyby, které uživatelé dělají:

• Vynechání znaku % u sytosti nebo světlosti – například zápis 243, 75, 59 je neplatný.
• Zadání odstínu mimo 0–360 (např. 400 nebo -10).
• Použití desetinné čárky místo tečky (např. 243,5 je v pořádku, 243,5 s čárkou jako oddělovačem desetin není, pokud není v souladu s regionálním nastavením prohlížeče).

Důležité: CMYK výstup, který se zobrazuje vedle HEX, je pouze orientační odhad pro obrazovku. Profesionální tiskové hodnoty se mohou lišit kvůli gamutu tiskárny a ICC profilům. Veškeré zpracování probíhá přímo ve vašem prohlížeči – nic, co zadáte, není nahráno na žádný server.

Okamžitý převod a související barevné modely

Jakmile upravíte kterýkoli ze vstupů (H, S nebo L), HEX kód se aktualizuje okamžitě. Současně se přepočítají i všechna ostatní barevná pole: RGB, HSV, CMYK a LAB. Pokud má výsledná barva RGB kanály, které lze každý vyjádřit jedním hexadecimálním znakem (například #aabbcc), zobrazí se i tříznaková zkratka (#abc). Tato zkratka je plně ekvivalentní – prohlížeče ji interpretují stejně.

Příklad: zadáte H=243, S=75 %, L=59 %. Výsledný HEX kód je #4f46e5. RGB hodnoty: R=79, G=70, B=229. Žádný z těchto kanálů nelze zkrátit na jeden hexadecimální znak, takže se tříznaková forma nezobrazí.

Matematika převodu: z HSL do RGB a do HEX

Pro zájemce o to, co se děje pod kapotou – převod je standardizovaný podle specifikace CSS Color Module Level 4. Algoritmus je dvoukrokový:

1. HSL → RGB

Nejprve se HSL převede na meziprodukt – RGB v rozsahu 0–1. Pokud je S=0, je barva v odstínech šedi: R = G = B = L/100. Pokud S > 0, použijí se pomocné funkce:

• C = (1 - |2L/100 - 1|) × (S/100)
• X = C × (1 - |(H/60) mod 2 - 1|)
• m = L/100 - C/2

Podle toho, do kterého sextantu odstín spadá (0–60, 60–120, 120–180, 180–240, 240–300, 300–360), se přiřadí hodnoty R, G, B jako kombinace C, X a 0. Poté se ke každému kanálu přičte m a výsledek se vynásobí 255.

2. RGB → HEX

Každý kanál (0–255) se převede na dvě hexadecimální číslice. Například R=79 se zapíše jako 4F (79 = 4×16 + 15, tedy 4F). Výsledný řetězec je #4F46E5. Velikost písmen není rozhodující – #4f46e5 i #4F46E5 jsou platné.

Tříznaková zkratka vznikne, pouze pokud je R kanál ve tvaru xx, G ve tvaru yy a B ve tvaru zz, kde x, y, z jsou identické číslice. Například #ff00bb → #f0b, ale #4f46e5 nelze zkrátit.

Klíčové: v rámci sRGB gamutu nedochází k žádnému ořezávání ani posunu. Barva je vždy stejná – pouze se mění formát zápisu.

Kdo tuto konverzi potřebuje a proč

Stránka je určena především třem skupinám:

Designéři vytvářejí palety v HSL, protože model umožňuje snadno generovat varianty: změníte světlost a získáte světlejší nebo tmavší verzi stejného odstínu. Výsledné HEX kódy pak exportují do CSS nebo designových nástrojů jako Figma či Sketch.

Frontend vývojáři dostávají specifikace v HSL a potřebují je převést na HEX pro vlastnost color nebo background-color v CSS. HSL je sice v CSS také podporován, ale HEX je stále nejběžnějším formátem v kódových základnách a nástrojích pro kontrolu kvality.

Tvůrci témat a systémů pro přístupnost využívají HSL k řízení kontrastu podle WCAG – stačí upravit světlost při zachování odstínu, otestovat poměr kontrastu a výslednou barvu převést na HEX pro produkční nasazení. Tento postup je rychlejší než manuální ladění RGB kanálů.

Omezení HEX oproti HSL: HEX v šesti- nebo tříznakové formě neobsahuje nativní dimenzi „světlost“. Pokud potřebujete odvodit tmavší variantu barvy, musíte sáhnout po RGB aritmetice nebo použít preprocesor (Sass, Less). HSL tuto informaci nese přímo.

Proč je konverze HSL na HEX jednodušší než jiné konverze

Ne všechny převody mezi barevnými modely jsou bezztrátové. Když převádíte barvu z sRGB do CMYK, může dojít k posunu, protože tiskový gamut je menší. Podobně LAB > sRGB může vyžadovat ořezání hodnot mimo viditelné spektrum.

HSL → HEX je jiný případ. HSL je pouze transformace RGB – neexistuje žádný gamutový rozdíl. Každá barva, kterou lze vyjádřit v HSL, je zároveň platnou barvou v RGB a tedy i v HEX. Výsledek je deterministický a plně vratný: z HEX dokážete zpětně vypočítat přesné HSL hodnoty (s výjimkou zaokrouhlovacích chyb u 8bitového RGB).

Tato vlastnost dělá z HSL → HEX jednu z nejbezpečnějších konverzí v barevném designu. Můžete ji použít bez obav z nečekaných posunů nebo ztráty informace.

Často kladené otázky

Co se stane, když zadám odstín 360? 360 je povolený, ale chová se stejně jako 0?
Ano, 360 je platná hodnota a interně se převede na 0. Odstín je cyklická veličina – 360° a 0° označují stejný bod na barevném kruhu. Pokud zadáte 360, nástroj ji akceptuje a převede korektně.

Proč se HEX kód někdy zobrazuje velkými a někdy malými písmeny?
Specifikace CSS nerozlišuje velikost písmen – #4F46E5, #4f46e5 i #4F46e5 jsou platné a prohlížeče je interpretují stejně. Tento nástroj používá malá písmena, což je v CSS komunitě nejběžnější konvence.

Jak získám alfa kanál (průhlednost) pro HEX?
Standardní šestiznakový HEX neobsahuje alfa kanál. Pro průhlednost potřebujete osmiznakovou formu #RRGGBBAA, kde AA představuje alfa hodnotu v hexadecimálním tvaru (00–FF). Tato stránka převádí čistě HSL → HEX, alfa kanál není součástí vstupu ani výstupu. Pro přidání průhlednosti je nutné alfa hodnotu dopočítat ručně.

Proč se CMYK liší od hodnot, které mi poskytuje tiskárna?
CMYK výstup na této stránce je přibližný matematický převod bez použití ICC profilů. Profesionální tisk používá specifické profily (např. FOGRA, SWOP) a gamut tiskárny je užší než sRGB. Výsledky se proto mohou lišit. Pro přesný tisk doporučujeme použít nástroj s podporou ICC profilů.

Jaký je přesný vzorec pro převod, pokud ho chci naprogramovat sám?
Algoritmus je definován v CSS Color Module Level 4. Zjednodušený postup:

1. Vydělte H 60, zbytek po dělení 2 použijte pro výpočet X.
2. Vypočtěte C = (1 – |2L/100 – 1|) × (S/100).
3. Na základě sextantu přiřaďte R, G, B jako (C, X, 0) a přičtěte posun m = L/100 – C/2.
4. Vynásobte 255, zaokrouhlete, převeďte na hex.
   Hotová implementace je k dispozici v CSS knihovnách jako d3-color nebo color.

Můžu zadat hodnoty bez znaku %?
Ne. Sytost a světlost vyžadují znak %, protože specifikace HSL definuje tyto složky v procentech. Pokud znak vynecháte, nástroj zobrazí chybovou hlášku. Formát 243, 75, 59 je neplatný, zatímco 243, 75%, 59% je korektní.