Prevodník HEX na HSL

Ako funguje HEX kód a prečo ho HSL nahrádza

Šesťmiestny hexadecimálny kód je najkompaktnejší zápis farby v CSS a v nástrojoch pre dizajnérov. #1E90FF znamená tri dvojice hexadecimálnych číslic – prvý pár (1E) červenú, druhý (90) zelenú, tretí (FF) modrú. Každá zložka môže nadobúdať hodnoty od 00 do FF, teda od 0 do 255 v desiatkovej sústave. Tri číslice, napríklad #abc, sú skratkou: každý znak sa zdvojí na #aabbcc.

HEX je rýchly na kopírovanie, ale takmer nemožný na čítanie. #4f46e5 je tmavofialový odtieň – no bez naštudovania kanálov a trochy cviku to nikto neurčí. Ak chcete z tohto odtieňa vytvoriť svetlejšiu verziu pre hover stav, začnete hádať, ktoré číslice zmeniť. To je dôvod, prečo HEX nie je stavaný na prácu s farebnými variáciami.

HSL, teda Hue (odtieň), Saturation (sýtosť), Lightness (svetlosť), bol navrhnutý presne pre túto úlohu. Odtieň je uhol na farebnom kruhu 0–360°, sýtosť a svetlosť sú percentá. #4f46e5 v HSL zodpovedá hsl(242, 76%, 59%). Zmeniť svetlosť na 80 % a dostanete pastelovú verziu. Zachovať odtieň, zvýšiť sýtosť – máte výraznejšiu farbu. Všetky operácie sú priamočiare.

Žiadny z týchto formátov neprenáša alfa kanál. Štandardný HEX (šesťmiestny ani trojmiestny) ani HSL neobsahujú priehľadnosť. Konverzia vždy pracuje s plne nepriehľadnými farbami. Ak potrebujete alfa kanál, hexadecimálny kód v osemmiestnom tvare (napr. #4f46e580) táto stránka nespracúva – nie je to súčasť jej rozsahu.

Ako sa líši HSL od HEX a prečo na tom záleží

HEX je priamo adresovaný farebný priestor RGB v základni 16. HSL je naopak percepčný model – neopisuje fyzické napätie na monitore, ale to, ako farbu vníma človek.

• Odtieň (hue) v stupňoch: 0° je červená, 120° zelená, 240° modrá, 360° je opäť červená.
• Sýtosť (saturation) v percentách: 0 % je úplne sivá, 100 % maximálna intenzita.
• Svetlosť (lightness) v percentách: 0 % je čierna, 100 % biela. 50 % je čistý odtieň bez prímesi bielej alebo čiernej.

Hodnota svetlosti 50 % je kľúčová – vtedy zodpovedá farba najčistejšej verzii zvoleného odtieňa. Ak si vezmete modrú hsl(240, 100%, 50%), je to presne rgb(0, 0, 255). Ak znížite svetlosť na 30 %, dostanete tmavomodrú, ale odtieň zostáva nezmenený. To je nemožné robiť v HEX intuitívne.

HEX #0000FF je modrá, HEX #000080 je tmavomodrá. Ktoré číslice medzi nimi ležia? V HSL je odpoveď jednoduchá: zmeňte tretie číslo – svetlosť.

Tento princíp je dôvodom, prečo frontendoví vývojári a dizajnéri migrujú na HSL pre CSS custom properties. Definujete --primary-hue: 242 a potom používate hsl(var(--primary-hue), 76%, 59%) pre hlavnú farbu, hsl(var(--primary-hue), 76%, 80%) pre svetlú verziu. HEX túto dynamiku neponúka.

Ako prebieha konverzia medzi HEX a HSL

Matematika medzi RGB (ktoré HEX priamo reprezentuje) a HSL je presne definovaná a táto stránka ju vykonáva v prehliadači – žiadny server, žiadne nahrávanie.

Postup je nasledovný:

1. HEX → RGB: Každý pár hexadecimálnych číslic (alebo zdvojený znak pri trojmiestnom kóde) sa prevedie na desiatkové číslo 0–255. Pre #4f46e5 je to R=79, G=70, B=229.
2. Normalizácia na rozsah 0–1: Každá zložka sa vydelí 255. R=0,31, G=0,275, B=0,898.
3. Výpočet minimálnej a maximálnej hodnoty: Z troch normalizovaných hodnôt sa nájde min a max (tu min=0,275, max=0,898). Rozdiel (delta) je 0,623.
4. Výpočet svetlosti (L): L = (min + max) / 2. Pre tento príklad (0,275 + 0,898) / 2 = 0,5865. V percentách 58,65 %, po zaokrúhlení 59 %.
5. Výpočet sýtosti (S): Ak je min = max (sivá), S = 0. Inak sa používa podmienka: ak je L menšia ako 0,5, S = delta / (max + min). Ak je L väčšia alebo rovná 0,5, S = delta / (2 - max - min). Pre náš prípad L=0,5865 ≥ 0,5, takže S = 0,623 / (2 - 0,898 - 0,275) = 0,623 / 0,827 = 0,753. V percentách 75,3 %, zaokrúhlene 76 %.
6. Výpočet odtieňa (H): Podľa toho, ktorá zložka je max:
   • Ak max = R, H = (G - B) / delta mod 6
   • Ak max = G, H = (B - R) / delta + 2
   • Ak max = B, H = (R - G) / delta + 4 Pre náš prípad max = B, takže H = (0,31 - 0,275) / 0,623 + 4 = 0,0562 + 4 = 4,0562. V stupňoch 4,0562 × 60 = 243,37°, po zaokrúhlení 242° pri citlivejšom zaokrúhlení na 0 desatinných miest (v závislosti od implementácie môže byť mierny rozdiel). To je dôvod, prečo niektoré online nástroje ukazujú mierne odlišné hodnoty odtieňa – rôzne zaokrúhľovacie stratégie.

Výsledok: hsl(242, 76%, 59%).

Rovnaká farba sa na stránke zobrazí aj v RGB, HSV, CMYK a LAB, všetky vypočítané súčasne z pôvodného RGB vstupu.

Čo stránka robí – vstupy, výstupy a okrajové prípady

Vstup: Platný hexadecimálny kód. Buď šesťmiestny #4f46e5 alebo trojmiestny #abc. Znak # na začiatku je nepovinný – ak ho vynecháte, stránka ho doplní automaticky. Ak zadáte napríklad 4f46e5, je to to isté ako #4f46e5.

Neplatný vstup: Čokoľvek, čo nie je šesťmiestny alebo trojmiestny hex kód – napríklad #xyz, #12345, alebo len red – zobrazí chybu: „Zadajte hex kód ako #4f46e5 alebo #abc.“ Táto chybová hláška je presne tá, ktorú stránka používa, žiadna iná. Žiadne pokusy o fuzzy match alebo automatickú opravu.

Výstup: Okrem HSL hodnôt (odtieň 0–360°, sýtosť 0–100 %, svetlosť 0–100 %) stránka zobrazí farbu aj v:

• HEX (pôvodný vstup, normalizovaný na šesťmiestny tvar)
• RGB (desiatkovo)
• HSV (Hue, Saturation, Value – podobný HSL, ale s inou definíciou jasu)
• CMYK (azúrová, purpurová, žltá, čierna – odhad pre obrazovku)
• LAB (CIE Lab, perceptuálne uniformný priestor)

Všetky políčka sa aktualizujú súčasne – stačí upraviť jedno a ostatné sa prepočítajú. Nie je potrebné klikať na tlačidlo konvertovať.

Okrajový prípad – farebný gamut: Ak zadáte farbu v CMYK alebo LAB, ktorá leží mimo viditeľného RGB gamutu (napríklad extrémne sýta farba v tlači, ktorá sa nedá zobraziť na monitore), stránka farbu upraví na najbližšiu zobraziteľnú farbu. Keď potom túto upravenú farbu skonvertujete späť na hex, môže dôjsť k miernemu posunu oproti pôvodnému zámeru.

CMYK ako odhad: Hodnoty CMYK sú len orientačný prepočet z RGB. Nie sú kalibrované pre konkrétnu tlačiareň, papier ani ICC profil. Pre profesionálnu tlač vždy overte farby na kalibrovanom monitore alebo vzorkovníku.

Všetky výpočty prebiehajú v prehliadači – JavaScript stránky nikam neposiela dáta. Nič, čo napíšete, nie je uložené, odoslané na server ani analyzované. Súkromie je zaručené na úrovni architektúry, nie len politiky.

Kto tento nástroj využije a na čo

• Frontendový vývojár píšuci CSS: Dizajnér pošle mockup s farbou #3b82f6. Potrebujete z nej urobiť hover variantu – v HSL je to len zmena svetlosti o 10 percent. HEX by ste hádali. HSL je priamo použiteľné v CSS vlastnostiach.
• UI/UX dizajnér: Premýšľate v odtieňoch a sýtosti. Brand farbu máte zadanú v HEX (napr. z loga), no potrebujete ju vložiť do HSL palety, aby ste vytvorili konzistentnú sadu farieb. Tento nástroj vám dá presný prepočet.
• Tvorca farebných schém: HSL umožňuje jednoduché generovanie komplementárnych (odtieň + 180°), analógových (odtieň ± 30°) alebo monochromatických (rovnaký odtieň, rôzne svetlosti) schém. HEX by ste na to museli použiť s kalkulačkou.
• Audítor webovej prístupnosti: Na kontrolu kontrastných pomerov podľa WCAG potrebujete farbu v ľubovoľnom formáte. HSL uľahčuje odhad – znížením svetlosti textu a zvýšením svetlosti pozadia viete rýchlo dosiahnuť požadovaný pomer.

Časté otázky (FAQ)

Čo znamená trojmiestny hex kód a ako ho mám používať? Trojmiestny hex kód (napríklad #abc) je skratka pre šesťmiestny #aabbcc. Každý znak sa zdvojí. Je to kompaktná alternatíva pre farby, ktoré majú rovnaké hodnoty v každom páre, napríklad #fff (biela), #000 (čierna), #f00 (červená). Niektoré farby sa do tohto tvaru nezmestia – napríklad #4f46e5 nemá zdvojené znaky, takže musíte použiť šesťmiestny tvar.

Prečo po konverzii späť dostávam mierne inú farbu? Ak zadáte farbu v LAB alebo CMYK, ktorá je mimo RGB gamutu, stránka ju upraví na najbližšiu zobraziteľnú. Pri spätnom prepočte na hex je výsledok už táto upravená farba. Tento posun je nevyhnutný – neexistuje spôsob, ako zobraziť farbu mimo gamutu na bežnom monitore.

Je HSL to isté ako HSV (tiež nazývaný HSB)? Nie. Oba modely používajú rovnaký odtieň, ale HSL definuje svetlosť (Lightness) ako (min + max) / 2, zatiaľ čo HSV definuje hodnotu (Value/ Brightness) ako max zložku. HSL preto dáva symetrický prechod od čiernej cez čistú farbu po bielu, zatiaľ čo HSV končí pri max zložke. HSL je vhodnejšia na vytváranie paliet farieb s rôznou svetlosťou.

Sú tieto CMYK hodnoty vhodné pre profesionálnu tlač? Nie. Sú to len orientačné prepočty z RGB. Pre presnú tlač použite kalibrovaný softvér a ICC profily. Pre bežnú orientáciu – napríklad na odhad, či je farba tlačiteľná – postačia, ale pre ofsetovú tlač sú nespolehlivé.

Ako zistím, že som zadal neplatný hex kód? Stránka zobrazí chybu: „Zadajte hex kód ako #4f46e5 alebo #abc.“ Ak sa táto hláška neobjaví, farba je platná. Platný hex kód obsahuje iba znaky 0–9, A–F (veľké aj malé písmená sú akceptované) a je dlhý presne 3 alebo 6 znakov (voliteľne s # na začiatku).

Ukladá si stránka moje zadané farby? Nie. Všetky konverzie prebiehajú výhradne v pamäti vášho prehliadača. Stránka nekomunikuje so serverom, neposiela ani neukladá žiadne údaje. Obnovenie stránky resetuje všetky polia do počiatočného stavu.