Prevodník RGB na HSL

Prečo práve RGB na HSL? Rozdiel medzi displejom a vnímaním

Táto stránka prevádza farby z modelu RGB, ktorý je prirodzený pre displeje, do modelu HSL, navrhnutého tak, aby zodpovedal ľudskému uvažovaniu o farbách. V RGB tri hodnoty 0–255 (napríklad 79, 70, 229) určujú, koľko červeného, zeleného a modrého svetla má displej zmiešať. Zmena jedného kanála pritom často nečakane zmení výsledný odtieň. HSL to rieši inak: hue (odtieň) je uhol na 0–360° kruhu, saturácia (sýtosť) a lightness (svetlosť) sú percentá. Môžete meniť svetlosť nezávisle, pričom odtieň zostáva konštantný. To z neho robí preferovaný model pre tvorbu paliet, tém a prístupných kontrastných variácií.

Zatiaľ čo RGB vyjadruje surové intenzity, HSL popisuje farbu tak, ako ju človek vníma a kategorizuje. Nástroj na tejto stránke vám umožní zadať ľubovoľnú RGB farbu a okamžite vidieť jej HSL ekvivalent, plus HEX, HSV, CMYK a LAB. Všetky polia sa aktualizujú súčasne, konverzia prebieha výhradne vo vašom prehliadači – žiadne dáta nie sú odosielané na server.

Ako nástroj funguje: vstupy, výstupy a pravidlá

Vstup je jednoduchý: zadajte tri celé čísla v rozsahu 0 až 255, oddelené čiarkami alebo medzerami. Príklad: 79, 70, 229. Ak zadáte neplatný vstup, zobrazí sa chybové hlásenie: „Zadajte RGB ako tri čísla 0–255, napríklad 79, 70, 229.“ Rovnako môžete do HSL polí zadať hodnoty priamo – napríklad 243, 75 %, 59 % – a nástroj ich automaticky prepočíta späť na RGB. Pri neplatnom HSL vstupe sa zobrazí: „Zadajte HSL ako hue 0–360 s dvoma percentami, napríklad 243, 75 %, 59 %.“

Výstup obsahuje päť formátov naraz:

• HSL: hue (0–360), saturácia (%), svetlosť (%)
• HEX: hexadecimálny kód (napr. #4F46E5)
• HSV: odtieň, sýtosť, hodnota (value)
• CMYK: odhad pre obrazovku (farba, ktorú vidíte na monitore, sa môže líšiť od tlače)
• LAB: farebný model nezávislý od zariadenia

Priamy vstup do LAB alebo CMYK je tiež možný, ale platí dôležité pravidlo: ak zadáte LAB alebo CMYK hodnotu, ktorá mapuje mimo viditeľný RGB rozsah, nástroj ju upraví na najbližšiu zobraziteľnú farbu. Pri spätnom prevode takejto farby môže dôjsť k miernemu posunu. CMYK výstup je určený len ako orientačný odhad – pre profesionálnu tlač ho vždy overte na kalibrovanom zariadení.

Pre koho je tento prevod určený a prečo

Nástroj cieli na niekoľko špecifických skupín, ktoré dennodenne pracujú s farbami:

UI/UX dizajnéri potrebujú vytvárať prístupné farebné palety. HSL im umožňuje meniť svetlosť nezávisle od odtieňa – napríklad pri tvorbe dvoch variantov tlačidla (svetlý a tmavý) stačí upraviť len hodnotu lightness, hue a saturácia zostanú rovnaké. To je presne to, čo RGB neponúka: zmena jedného kanála by zmenila aj odtieň.

Front-end vývojári prekladajú dizajnové tokeny z RGB (napríklad z Figmy alebo Sketchu) do CSS funkcie hsl(). HSL je v CSS prirodzenejšia pre dynamické manipulácie – JavaScriptom viete ľahko meniť svetlosť celej komponenty bez zložitých prepočtov.

Tvorcovia tém generujú svetlé a tmavé varianty brandovej farby. HSL im umožňuje zachovať jadrový odtieň a meniť len svetlosť – presne to, čo potrebujete pre tmavý režim aplikácie.

Dizajnéri dátových vizualizácií potrebujú percepčne usporiadané škály. Lightness kanál v HSL je intuitívny pre sekvenčné schémy – môžete vytvoriť plynulý prechod od svetlej po tmavú farbu, pričom odtieň zostáva konštantný. To zaisťuje, že divák ľahko rozlíši hodnoty podľa svetlosti, nie podľa zmeny odtieňa.

Matematika za prevodom: RGB na HSL krok za krokom

Prevod z RGB na HSL nie je tajomný, ale vyžaduje normalizáciu a nájdenie minima a maxima. Postup je nasledovný:

1. Normalizujte RGB hodnoty na rozsah 0–1 vydelením 255. Pre 79, 70, 229 to je približne 0,31; 0,275; 0,898.
2. Nájdite minimum a maximum z týchto troch hodnôt. V našom prípade je minimum 0,275 (zelená) a maximum 0,898 (modrá).
3. Svetlosť (L) je priemer minima a maxima: (0,275 + 0,898) / 2 = 0,5865. V percentách: 58,65%.
4. Ak je minimum rovné maximu (sivá farba), saturácia je 0 % a odtieň je nedefinovaný (zvyčajne 0). Inak pokračujte ďalej.
5. Rozdiel (delta) je max - min = 0,623.
6. Saturácia (S) závisí od svetlosti: ak je L menšie ako 0,5, S = delta / (max + min); ak je väčšie alebo rovné 0,5, S = delta / (2 - max - min). V našom prípade 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%.
7. Odtieň (H) sa počíta podľa toho, ktorá zložka je maximum:
   • Ak je max červená: H = ( (G - B) / delta ) mod 6
   • Ak je max zelená: H = ( (B - R) / delta ) + 2
   • Ak je max modrá: H = ( (R - G) / delta ) + 4 V našom prípade je max modrá, takže H = ( (0,31 - 0,275) / 0,623 ) + 4 = 0,056 + 4 = 4,056. Prevod na stupne: 4,056 × 60 = 243,36°. Výsledok je približne 243°, 75%, 59%.

Táto matematika je implementovaná priamo v kóde nástroja. Dôležité je, že HSL nie je percepčne uniformný – napríklad žltá a modrá pri rovnakej svetlosti (povedzme 50 %) vyzerajú subjektívne odlišne. Pre presnejšiu percepčnú prácu slúži model LAB, ktorý je tiež súčasťou výstupu.

Obmedzenia a časté chyby používateľov

HSL síce rieši mnohé problémy RGB, ale nie je dokonalý. Tu sú najčastejšie chyby a obmedzenia, s ktorými sa pri práci stretnete:

• Nesprávny formát vstupu: používatelia často zadávajú RGB ako desatinné čísla (napr. 79,5; 70; 229) alebo zabúdajú na oddelenie čiarkami. Nástroj akceptuje len tri celé čísla 0–255.
• HSL v CSS: niektorí vývojári si neuvedomujú, že CSS hsl(243, 75%, 59%) očakáva stupne pre hue, nie radiány. Nástroj zobrazuje hue v stupňoch, takže je priamo použiteľný.
• CMYK ako presný výstup: CMYK je tu len odhad pre obrazovku. Ak potrebujete farbu vytlačiť, vždy ju overte na kalibrovanom monitore alebo použite ICC profil.
• Percepčná nejednotnosť: HSL nie je vhodný na vytváranie farebných schém, ktoré majú pôsobiť rovnako jasne – na to slúži LAB. Napríklad pri svetlosti 50 % bude modrá vyzerať tmavšie ako žltá, aj keď matematicky majú rovnakú L hodnotu.
• Out-of-gamut situácie: pri zadávaní LAB alebo CMYK hodnôt, ktoré ležia mimo sRGB rozsahu, nástroj farbu upraví. Výsledok môže byť menej sýty, než ste očakávali. Vždy kontrolujte HEX alebo RGB výstup.

Praktické použitie v CSS a JavaScripte

HSL je v modernom CSS natívne podporovaný cez funkciu hsl(). Pre náš príklad bude CSS zápis: hsl(243deg 75% 59%). Môžete ho použiť priamo:

.button {
  background-color: hsl(243deg 75% 59%);
}

V JavaScripte môžete HSL jednoducho meniť pomocou interpolácie reťazcov:

const lightness = 59;
const color = `hsl(243deg 75% ${lightness}%)`;

Tento prístup je oveľa čistejší, ako keby ste mali meniť tri RGB kanály zvlášť a pritom riskovať, že zmeníte odtieň. Pre dynamické témy stačí definovať brandovú farbu ako HSL a meniť len lightness – svetlý variant (napr. 80 %) a tmavý variant (napr. 20 %) budú mať rovnaký odtieň a sýtosť.

Priame porovnanie farebných modelov

Z tabuľky je zrejmé, prečo sa HSL hodí na webové témy a palety – poskytuje lepšiu kontrolu nad vnímaním ako RGB, ale nie je tak presný ako LAB. Nástroj na tejto stránke preto ponúka oba modely: HSL pre bežnú prácu a LAB pre situácie, kde potrebujete percepčnú presnosť (napr. pri tvorbe farboslepých paliet).

FAQ

1. Môžem zadať RGB hodnoty s desatinnými miestami? Nie, nástroj akceptuje len celé čísla 0–255. Desatinné miesta, ako napríklad 79.5, spustia chybové hlásenie.

2. Prečo je CMYK výstup len odhad? CMYK je model pre tlač, ktorý závisí od konkrétneho tlačového zariadenia, atramentu a papiera. Tento nástroj ho počíta z sRGB priestoru, čo je len približný prevod bez ICC profilu. Pre tlač vždy overte farbu na kalibrovanom monitore alebo použite profesionálny nástroj.

3. Čo sa stane, keď zadám LAB hodnotu, ktorá nie je v RGB rozsahu? Nástroj ju automaticky upraví na najbližšiu zobraziteľnú farbu. Dôsledkom je, že pri spätnom prevode (z upravenej farby naspäť do LAB) dostanete inú hodnotu, než ste pôvodne zadali. Tento posun je typicky malý, ale pri kritickej práci ho treba zohľadniť.

4. Je HSL v CSS to isté ako HSL v tomto nástroji? Áno, hodnoty sú kompatibilné. Nástroj zobrazuje hue v stupňoch (0–360), saturáciu a svetlosť v percentách, rovnako ako CSS funkcia hsl(). Výstup môžete priamo skopírovať do CSS kódu.

5. Prečo pri rovnakej svetlosti vyzerá modrá tmavšie ako žltá? HSL nie je percepčne uniformný. Rovnaká L hodnota (napr. 50 %) znamená matematicky rovnakú svetlosť, ale ľudské oko vníma modrú ako tmavšiu. Pre presné percepčné škály použite model LAB, ktorý je tiež súčasťou výstupu.

6. Ako zistím, či je moja farba v RGB rozsahu? Ak je každá z troch hodnôt v rozsahu 0–255, farba je v sRGB priestore a teda zobraziteľná na bežných monitoroch. Všetky vstupy mimo tohto rozsahu nástroj odmietne.