Konverzia farby medzi RGB, HSL a hexadecimálnou

Práca s farbou na webe znamená neustále žonglovanie medzi viacerými notáciami. Konvertor farieb zabraňuje manuálnym chybám a umožňuje okamžitý prechod z jedného formátu do druhého podľa kontextu použitia. Každý formát má svoje silné stránky a vedieť, ktorý použiť, je jedným z reflexov front-end vývojára.

Tu sú typické použitia, ktoré motivujú konverziu farby:

• RGB je natívne v CSS a JavaScripte, čitateľné ľuďmi pre pochopenie dominantnej zložky (kanály červená, zelená, modrá na 0-255).
• HSL robí modifikáciu odtieňa triviálnou: stačí upraviť saturáciu alebo svetlosť bez prepočítavania každého kanála.
• HEX je kanonický formát pre kopírovanie: šesť znakov, kompatibilný všade, ideálny pre Figma, Sketch makety alebo style guides.
• Konverzie HEX to RGB, RGB to HEX, HEX to HSL a ich obrátené sú najbežnejšie operácie v CSS a JavaScripte.

RGB a RGBA (Red, Green, Blue, Alpha)

Každý kanál je kódovaný celým číslom medzi 0 a 255, čo zodpovedá jednému bajtu na zložku a dáva 16 777 216 možných farieb. Alfa kanál RGBA ide od 0 (priehľadný) do 1 (nepriehľadný) a kontroluje priehľadnosť.

.button {
    background-color: rgb(20, 0, 182);
    border-color: rgba(20, 0, 182, 0.5);
}

HEX a HEX8 (hexadecimálna notácia)

Veľmi rozšírený kompaktný formát: #RRGGBB na šiestich znakoch, kde každý pár reprezentuje RGB kanál v základe 16. Variant #RRGGBBAA na ôsmich znakoch pridáva alfa kanál v hexadecimálnom (00 priehľadný, FF nepriehľadný). Krátka notácia #RGB tiež existuje: #F53 je ekvivalent #FF5533.

.title  { color: #1400B6; }
.shadow { color: #1400B680; }   /* alpha 50% */
.accent { color: #F53; }        /* krátka forma */

HSL a HSLA (Hue, Saturation, Lightness, Alpha)

HSL popisuje farbu perceptuálne. Hue je uhol na farebnom kolese (0 až 360°), Saturation a Lightness sú percentá. Je to preferovaný formát pre generovanie variantov: zosvetlenie tlačidla pri hover, desaturácia disabled stavu, vytvorenie koherentnej palety variovaním iba odtieňa.

$primary: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* svetlejšie */
$primary-muted: hsl(247, 30%, 36%);    /* menej nasýtené */

Ďalšie existujúce formáty

CMYK (Cyan, Magenta, Yellow, Key) sa používa v tlači: popisuje farbu odčítaním atramentov a nie je relevantný na obrazovke. OKLCH a LAB sú perceptuálne uniformné priestory, ktoré sa objavili v CSS Color Level 4; umožňujú lepšiu kontrolu nad pocítenou svetlosťou. Tento nástroj sa zameriava na konverzie RGB, HEX a HSL, ktoré pokrývajú obrovskú väčšinu webových potrieb.

HEX na RGB spočíva v parsovaní reťazca po pároch znakov a interpretácii každého páru ako celého čísla v základe 16:

const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB na HEX je opačná operácia: každý kanál je konvertovaný do základu 16, doplnený na dva znaky a potom zreťazený.

const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB na HSL je viac algoritmické. Normalizujeme kanály medzi 0 a 1, počítame min a max pre odvodenie svetlosti, potom saturácie, potom odtieňa podľa dominantného kanála. Kompletný vzorec je zdokumentovaný v špecifikácii CSS Color Module Level 3.

Nástroj funguje v oboch smeroch medzi RGB, HEX a HSL. Pre vykonanie konverzie:

1. Zvoľte vstupný formát: RGB, HEX alebo HSL.
2. Zadajte hodnotu (napríklad #1400B6, rgb(20, 0, 182) alebo hsl(247, 100%, 36%)).
3. Spustite konverziu: ekvivalenty v ostatných dvoch formátoch sa okamžite zobrazia.
4. Skopírujte požadovaný výsledok cez dedikované tlačidlo a vložte ho do vášho stylesheetu alebo makety.

Výpočet sa vykonáva na strane prehliadača, žiadne dáta nie sú odosielané na server.

• Web dizajn a CSS: získať HEX z makety a získať ekvivalentný HSL pre generovanie hover alebo active stavu bez odchýlenia sa od odtieňa.
• Vizuálna identita a paleta: deklinovať primárnu farbu do viacerých variantov (svetlý, tmavý, tlmený) variovaním svetlosti alebo saturácie HSL.
• Ilustrácia a grafika: transponovať obrazovkovú farbu (RGB) na hexadecimálny kód k odoslaniu softvéru alebo klientovi.
• Prístupnosť: konvertovať na RGB formát pre následný výpočet kontrastného pomeru (WCAG AA vyžaduje 4.5:1 pre bežný text) s farbou pozadia.
• CSS premenné a preprocessory: napájať design tokens v SASS súbore alebo Tailwind téme z jedinej referenčnej farby.

Niekoľko kompletných konverzií pre ilustráciu korešpondencie medzi tromi formátmi:

#1400B6 -> rgb(20, 0, 182)    -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51)   -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113)  -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15)  -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0)       -> hsl(0, 0%, 0%)

S alfa kanálom:

#1400B680 -> rgba(20, 0, 182, 0.50)   -> hsla(247, 100%, 36%, 0.50)
#FF5733CC -> rgba(255, 87, 51, 0.80)  -> hsla(11, 100%, 60%, 0.80)

Aký je rozdiel medzi HEX a HEX8?

Klasický HEX kóduje tri RGB kanály na šiestich znakoch (#RRGGBB). HEX8 pridáva dva znaky pre alfa kanál (#RRGGBBAA), čo umožňuje spravovať priehľadnosť v jednom reťazci. #1400B6FF a #1400B6 dávajú vizuálne rovnakú farbu, nepriehľadnú.

Treba preferovať HSL alebo RGB v CSS?

Oba sú ekvivalentné v renderovaní. HSL je expresívnejšie pre generovanie koherentnej palety alebo stavových variantov (hover, focus), pretože modifikujeme jediný perceptuálny parameter. RGB zostáva praktické pri práci s dátami z canvasu alebo senzora.

Prečo môj HEX dáva iný odtieň ako očakávaný?

Tri časté príčiny: zámena medzi krátkym #RGB a dlhým #RRGGBB (znaky sú duplikované, nie zreťazené), chyba kopírovania na znaku, alebo zobrazenie na nekalibrovanej obrazovke. Skontrolujte tiež, že vaše CSS neprekrýva rodičovskou opacitou, ktorá modifikuje finálny render.

K čomu slúži alfa kanál RGBA a HSLA?

Alfa kanál kontroluje opacitu farby, od 0 (úplne priehľadný) do 1 (úplne nepriehľadný). Je užitočný pre overlays, tiene, disabled stavy alebo prekrytia na obrázku. Na rozdiel od CSS vlastnosti opacity, RGBA a HSLA ovplyvňujú iba cielenú farbu, nie jej deti.

Možno konvertovať farbu bez straty presnosti?

Medzi RGB a HEX je konverzia presná, oba formáty kódujú rovnakú informáciu na 24 bitoch. Konverzia na HSL zahŕňa zaokrúhlenia na odtieni, saturácii a svetlosti; cesta tam-späť RGB > HSL > RGB môže teda vrátiť hodnotu posunutú o jednotku na niektorých kanáloch.

Prečo používať online konvertor namiesto vlastnej funkcie?

Pre jednorazový test, prototypovanie palety alebo rýchle overenie HEX ekvivalentu HSL farby extrahovanej z makety je online konvertor okamžitý. Pre opakujúcu sa programatickú potrebu zostáva knižnica ako color, chroma-js alebo tinycolor2 vhodnejšia.