Převodník HEX na HSL

Co je HEX a proč ho převádět na HSL

HEX kód je šestnáctková reprezentace barevného modelu RGB. Šest číslic (nebo tříznaková zkratka) přímo kóduje červenou, zelenou a modrou složku. V CSS a designových nástrojích se používá pro svou kompaktnost, ale pro člověka není intuitivní. změníte-li například #4f46e5 na #4f46e0, těžko odhadnete, jak se posune světlost.

HSL naproti tomu staví na lidském vnímání. Odstín (hue) měřený ve stupních 0–360 odpovídá poloze na barevném kruhu. Sytost (saturation) v procentech určuje intenzitu barvy a světlost (lightness) v procentech řídí jas od černé po bílou. Chcete-li z #4f46e5 udělat světlejší variantu, zvýšíte lightness — odstín zůstane stejný. Tento vztah dělá HSL přirozenou volbou pro generování palet, motivů nebo kontrolu kontrastu.

Stránka dělá jednu věc: přijme platný hex kód (šestimístný jako #1E90FF nebo třímístný jako #abc) a okamžitě vrátí HSL hodnotu. Zároveň zobrazí barvu ve všech podporovaných formátech — RGB, HSV, CMYK, LAB — takže si zkopírujete ten, který právě potřebujete. Vše běží ve vašem prohlížeči, nic se neodesílá na server.

Jak funguje převod HEX na HSL

Mezi HEX a HSL není přímá cesta. Nejprve se šestnáctkové číslice převedou na dekadické hodnoty RGB v rozsahu 0–255. U třímístné zkratky se každá číslice zdvojnásobí: #abc se stane #aabbcc. Pak se RGB normalizuje na desetinná čísla 0–1 a provede se matematická transformace.

Vzorec začíná nalezením nejvyšší a nejnižší hodnoty z R, G, B. Jejich rozdíl určuje sytost. Světlost je průměrem maxima a minima. Odstín se počítá podle toho, která složka je dominantní, s korekcí na šest segmentů barevného kruhu. Výsledný hue leží v rozsahu 0–360, saturation a lightness v procentech 0–100.

Pokud zadáte #4f46e5, RGB je (79, 70, 229). Po normalizaci na 0–1: R=0,31, G=0,275, B=0,898. Maximum je 0,898, minimum 0,275. Světlost = (0,898+0,275)/2 = 0,5865 → 58,65 %. Rozdíl = 0,623. Sytost = 0,623/(1-|2×0,5865-1|) = 0,623/0,827 ≈ 0,753 → 75,3 %. Odstín vychází z dominantní modré složky: 240° + korekce. Výsledek je HSL(243,8°, 75,3%, 58,6%).

Tento výpočet je standardizovaný a stránka ho provádí v reálném čase. Žádná aproximace, žádná databáze.

Výhody HSL pro návrháře a vývojáře

Tvorba palet a motivů

S HSL můžete generovat rodiny barev pouhou změnou jednoho parametru. Chcete-li k hlavní barvě přidat tři světlejší varianty, zvýšíte lightness o 10, 20 a 30 procentních bodů. Odstín a sytost zůstávají nedotčeny. V HEX byste museli ručně upravovat tři kanály a doufat, že výsledek bude vypadat konzistentně.

CSS custom properties a dynamické varianty

V CSS se HSL zapisuje přímo: hsl(243,8deg, 75,3%, 58,6%). Můžete ho uložit do vlastní proměnné a měnit jen jednu složku:

:root {
  --primary-h: 243.8;
  --primary-s: 75.3%;
  --primary-l: 58.6%;
}
.button:hover {
  background: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 10%));
}

Žádný jiný formát to neumožňuje tak přímočaře.

Přístupnost a WCAG

Při kontrole kontrastu potřebujete udržet odstín a zvyšovat světlost nebo sytost. HSL to dělá transparentní. Pokud máte text v barvě hsl(0, 100%, 40%) na bílém pozadí a kontrast vychází 3,5:1 (nedostatečné pro běžný text), zvýšíte lightness na 50 % a kontrast se zlepší. Odstín zůstane stejný, barva se jen zesvětlí.

Srovnání s HSV

HSV (odstín, sytost, hodnota) se liší v definici světlosti. HSV používá hodnotu (value) jako maximum z RGB, zatímco HSL počítá průměr maxima a minima. To má praktický dopad: v HSL se sytost blíží nule u velmi světlých i velmi tmavých barev. V HSV zůstává sytost vysoká i při tmavých odstínech. Pro práci s kontrastem a světlostí je HSL obvykle vhodnější.

Jak nástroj používat a co očekávat

Vstupní formát

Přijímá se šestimístný hex kód s # nebo bez něj: #4f46e5, 4f46e5. Třímístná zkratka #abc se automaticky rozšíří na #aabbcc. Velikost písmen není důležitá, #FF0000 i #ff0000 fungují stejně.

Co se stane při chybě

Pokud zadáte neplatný řetězec — například #xyz, #12345 (pět znaků) nebo #12 34 — zobrazí se chybová hláška: „Zadejte hex kód ve formátu #4f46e5 nebo #abc.“ Žádná tichá korekce, žádný fallback.

Hranice gamutu

Všechny barvy, které lze zapsat v šestnáctkovém hex kódu, leží v RGB gamutu. Pokud však přepnete na LAB nebo CMYK a zadáte hodnotu mimo viditelný RGB gamut, nástroj barvu upraví na nejbližší zobrazitelnou variantu. Při zpětném převodu do hex může dojít k nepatrné odchylce. Toto není chyba — je to důsledek rozdílu mezi barevnými prostory.

CMYK jako odhad

CMYK hodnoty jsou orientační a vycházejí z konverzního algoritmu bez znalosti konkrétního tiskového profilu. Pro profesionální tisk je vždy nutná kalibrace na skutečném zařízení.

Bez alpha kanálu

Standardní hex kód (šestimístný nebo třímístný) neobsahuje informaci o průhlednosti. HSL alpha kanál nemá. Všechny konverze pracují s plně neprůhlednými barvami.

Časté chyby a úskalí

Záměna třímístné a šestimístné notace

Třímístná zkratka #abc není stejná jako #a0b0c0. Je to #aabbcc. Pokud potřebujete přesnou barvu, používejte šest míst.

Neočekávaný posun při zpětném převodu

Převod z HSL zpět na HEX může u některých barev vykázat mírně odlišné číslice než originál. Důvodem je zaokrouhlení při přechodu z desetinných čísel na celočíselné RGB 0–255. Rozdíl je maximálně ±1 v jednom kanálu a při běžném použití nepostřehnutelný.

Iluze o CMYK pro tisk

Mnoho uživatelů předpokládá, že CMYK hodnoty z online nástroje jsou připravené pro ofsetový tisk. Není tomu tak. Každá tiskárna má svůj profil a stejná CMYK čísla mohou na různých strojích vypadat jinak.

Zapomenutí na sytost u světlých barev

V HSL při vysoké světlosti (nad 90 %) klesá viditelná sytost, i když je procentuálně vysoká. Fyziologicky je to dáno tím, že lidské oko nerozlišuje odstíny v blízkosti bílé.

FAQ

Jaký je rozdíl mezi HSL a HSLA? HSLA přidává alpha kanál pro průhlednost. Tento nástroj pracuje pouze s HSL bez alpha, protože hex kód průhlednost neobsahuje.

Proč mi po zadání #fff vrací HSL(0°, 0%, 100%)? #fff je bílá. Odstín je definován pouze u barev s nenulovou sytostí. U bílé, černé a šedé (kde jsou všechny RGB složky stejné) je sytost 0 % a odstín formálně 0°.

Mohu zadat hex kód s osmi číslicemi (s alpha kanálem)? Ne. Stránka přijímá pouze šestimístné a třímístné kódy bez alpha. Pro průhledné barvy použijte RGBA, HSLA nebo hex s osmi místy v jiném nástroji.

Proč se liší CMYK hodnoty od mé tiskárny? CMYK je závislý na barevném profilu zařízení. Tento nástroj používá obecný konverzní model bez ICC profilu. Pro přesný tisk vždy kalibrujte na konkrétním stroji.

Co znamená, když se barva po převodu do LAB mírně posune? LAB má širší gamut než RGB. Pokud LAB hodnota leží mimo RGB rozsah, nástroj ji ořízne na nejbližší zobrazitelnou barvu. Při zpětném převodu do hex se tím změní původní číslice.

Je možné převést HSL zpět na HEX? Ano, stránka zobrazuje všechny formáty současně. Stačí zadat hex kód a HSL hodnota se zobrazí i s možností kopírování. Pro opačný směr použijte příslušnou stránku HSL-to-HEX.