Prevodník HSL na HEX

Prečo práve HSL na HEX?

Táto stránka rieši jednu vec a rieši ju priamo: prevedie farebný zápis v modeli HSL na hexadecimálny kód (HEX). To, čo ju odlišuje od bežných konvertorov, je dôraz na prirodzenú väzbu medzi týmito dvoma formátmi. HSL je model navrhnutý pre ľudské vnímanie farieb – keď zmeníte svetlosť, odtieň zostane nedotknutý, čo je dôvod, prečo ho dizajnéri používajú na generovanie paliet a tém. HEX je naopak šesťmiestny (prípadne trojmiestny skrátený) zápis RGB hodnôt v šestnástkovej sústave; nenesie so sebou alfu, pokiaľ nepoužijete osemmiestny tvar.

Konverzia medzi HSL a HEX je priama a bezkonkurenčne presná v rámci farebného priestoru sRGB. Na rozdiel od prevodov do LAB alebo CMYK, ktoré pri farbách mimo gamutu vykonávajú orezanie, tu k žiadnemu posunu ani strate informácie nedochádza. Každá farba, ktorú dokážete vyjadriť v HSL v rámci platných rozsahov, má svoj presný hexadecimálny ekvivalent a naopak.

Ako prebieha prevod z HSL na HEX

Algoritmus je jednoduchý, ale vyžaduje presné medzikroky. Najprv sa HSL hodnoty prevedú na RGB, a až potom na HEX. Postup je nasledovný:

1. Normalizácia vstupov: Hue (0–360) sa vydelí 360, čím vznikne hodnota v rozsahu 0–1. Saturation a Lightness (0–100 %) sa vydelia 100.
2. Prepočet na RGB: Použije sa štandardný algoritmus:
   • Ak je S = 0, farba je odtieň šedej: R = G = B = L.
   • Inak sa vypočítajú pomocné hodnoty C = (1 - |2L - 1|) × S, X = C × (1 - |(H × 6) mod 2 - 1|), m = L - C/2.
   • Podľa intervalu H (0–60°, 60–120°, …) sa určia základné RGB zložky (R₁, G₁, B₁) ako kombinácia C, X a 0.
   • Konečné RGB = (R₁ + m, G₁ + m, B₁ + m) v rozsahu 0–1.
3. Prevod na HEX: Každá zložka sa vynásobí 255, zaokrúhli na celé číslo a prevedie na dvojmiestny hexadecimálny reťazec. Ak sú všetky tri zložky násobkom 17 (t. j. dajú sa zapísať ako 0x00, 0x11, …, 0xFF), zobrazí sa aj trojmiestna skrátená forma (napr. #1a2b3c nemá skrátený tvar, ale #112233 áno → #123).

Na stránke sa tento výpočet spúšťa okamžite pri každej zmene vstupných polí. Nie je potrebné stláčať tlačidlo – stačí upraviť hodnotu a HEX kód sa aktualizuje.

Správny vstup – čo očakávať a ako sa vyhnúť chybám

Používateľ zadáva tri údaje:

• Odtieň (Hue): celé číslo od 0 do 360 (napr. 243)
• Sýtosť (Saturation): percentuálna hodnota od 0 % do 100 % (napr. 75 %)
• Svetlosť (Lightness): percentuálna hodnota od 0 % do 100 % (napr. 59 %)

Ak niektorá z hodnôt chýba, je mimo povoleného rozsahu alebo nie je správne naformátovaná (napríklad chýba znak % pri sýtosti a svetlosti), stránka zobrazí chybové hlásenie:
„Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.“

Časté chyby:

• Zadanie desatinných čísel pre odtieň – systém akceptuje len celé čísla.
• Vynechanie znaku % – napr. 75 namiesto 75% spôsobí chybu.
• Použitie iného oddeľovača ako čiarka – odporúča sa formát hue, sat%, light% s medzerou za čiarkou, aj keď nástroj toleruje určitú flexibilitu.
• Prekročenie rozsahu – sýtosť ani svetlosť nemôžu byť menšie ako 0 % alebo väčšie ako 100 %.

Všetky spracovanie prebieha priamo v prehliadači. Nič, čo používateľ zadá, nie je odoslané na server. Stránka funguje kompletne na strane klienta.

Výstupné hodnoty – HEX a ďalšie farebné modely

Primárnym výstupom je hexadecimálny kód farby, napríklad #4f46e5 pre vstup 243, 75 %, 59 %. Ak sú všetky tri RGB zložky vyjadriteľné jednou hexadecimálnou číslicou (t. j. každá je násobkom 17: 0, 17, 34, …, 255), zobrazí sa aj trojmiestna skrátená forma, napríklad #abc namiesto #aabbcc.

Súčasne sa aktualizujú aj ostatné farebné modely:

• RGB: hodnoty v rozsahu 0–255 (napr. rgb(79, 70, 229))
• HSV: odtieň, sýtosť a hodnota (value) v percentách
• CMYK: odhad pre tlač – pozor, ide o orientačný prepočet na základe sRGB, ktorý sa môže líšiť od profesionálnych tlačových profilov. Stránka na to výslovne upozorňuje.
• LAB: prepočet na CIE Lab, užitočný pre kolorimetrické porovnania, ale rovnako len odhad v rámci sRGB gamutu.

Prepočet do CMYK a LAB nie je taký priamočiary ako HSL → RGB → HEX. Vyžaduje medzikonverziu cez lineárny RGB a ďalšie transformácie, ktoré môžu byť ovplyvnené použitým profilom. Preto stránka tieto hodnoty označuje ako „odhad“ a neodporúča sa na ne spoliehať pri finálnom tlačovom výstupe.

Praktické scenáre a najčastejšie omyly

Tento nástroj používajú najmä:

• Dizajnéri, ktorí v HSL vytvárajú farebné palety a potrebujú HEX kódy pre implementáciu v kóde alebo v nástrojoch ako Figma, Sketch.
• Front-end vývojári, ktorí z dizajnových súborov získavajú HSL hodnoty a musia ich previesť do CSS vlastností (napr. background-color: #4f46e5).
• Každý, kto upravuje témy alebo testuje kontrastný pomer podľa WCAG – zmenou svetlosti v HSL si zachová odtieň a potom skonvertuje výsledok na HEX pre produkčné použitie.

Najčastejšie omyly:

1. Mýlenie HSL a HSB/HSV – HSL používa Lightness, kde 100 % znamená bielu; HSB/HSV používa Brightness/Value, kde 100 % je čistá farba. Preto rovnaké vstupné čísla dávajú rôzne výsledky.
2. Očakávanie alfa kanála – šesťmiestny HEX nenesie informáciu o priehľadnosti. Na to slúži osemmiestny tvar (napr. #4f46e580), ktorý tento nástroj negeneruje.
3. Prekročenie gamutu – keďže HSL aj HEX sú v sRGB, k orezaniu nedochádza. To je výhoda oproti prepočtom do CMYK alebo LAB, kde môžu byť niektoré farby „mimo“ a musia sa nahradiť najbližšou reprodukovateľnou.
4. Zabudnutie percent – Sýtosť a svetlosť musia byť v percentách, inak nástroj nerozpozná vstup.

FAQ

Prečo sa niekedy zobrazí trojmiestny kód namiesto šesťmiestneho?
Ak sú všetky tri RGB zložky deliteľné 17 (napr. R=17, G=34, B=51 → #112233), vznikne skrátená forma #123. Je to platný CSS zápis a prehliadače ho interpretujú rovnako ako šesťmiestny.

Čo ak zadám desatinné číslo pre odtieň, napríklad 243,5?
Vstup musí byť celé číslo v rozsahu 0–360. Desatinné miesta spôsobia chybu a zobrazí sa upozornenie. Odtieň je definovaný v stupňoch, nie v reálnych číslach.

Je možné previesť HEX späť na HSL?
Táto stránka je jednostranná – konvertuje iba z HSL na HEX. Pre opačný smer by ste potrebovali samostatný nástroj. HEX na HSL by fungoval rovnako priamo: HEX → RGB → HSL.

Prečo sa CMYK líši od profesionálnej tlačiarne?
Pretože prepočet vychádza z farieb v sRGB, ktoré nie sú identické s farebným priestorom tlače (napr. CMYK podľa normy ISO Coated). Stránka uvádza len orientačnú hodnotu; presný profil musí byť nastavený v grafickom softvéri.

Čo znamená, že konverzia je „bezstratová“ v rámci sRGB?
Znamená to, že každá farba vyjadrená v HSL (v rozsahoch 0–360, 0–100 %, 0–100 %) má presný hexadecimálny ekvivalent a naopak. Pri prepočte sa nestráca žiadna informácia – na rozdiel od konverzií do farebných priestorov s menším rozsahom.

Môžem použiť výsledný HEX kód priamo v CSS?
Áno. HEX je natívny formát pre CSS, takže ho môžete vložiť do vlastností ako color, background-color, border-color a pod. Ak potrebujete priehľadnosť, budete musieť použiť osemmiestny HEX (napr. #4f46e580) alebo funkciu rgba().