Převod barvy mezi RGB, HSL a hexadecimálním

Práce s barvou na webu znamená neustále žonglovat mezi několika notacemi. Převodník barev se vyhne ručním chybám a umožňuje okamžitě přejít z jednoho formátu do druhého podle kontextu použití. Každý formát má své silné stránky a vědět, který použít, je jedním z reflexů front-end vývojáře.

Zde jsou typické případy použití, které motivují převod barvy:

• RGB je nativní v CSS a JavaScriptu, čitelný pro lidi pro pochopení dominanty (kanály červená, zelená, modrá v rozsahu 0-255).
• HSL činí úpravu odstínu triviální: stačí upravit saturaci nebo jas bez přepočítávání každého kanálu.
• HEX je kanonický formát pro kopírování a vkládání: šest znaků, kompatibilní všude, ideální pro mockupy Figma, Sketch nebo styleguide.
• Převody HEX to RGB, RGB to HEX, HEX to HSL a jejich reciproky jsou nejčastější operace v CSS a JavaScriptu.

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

Každý kanál je kódován celým číslem mezi 0 a 255, což odpovídá jednomu bajtu na komponentu a dává 16 777 216 možných barev. Alfa kanál RGBA jde od 0 (průhledný) do 1 (neprůhledný) a ovládá průhlednost.

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

HEX a HEX8 (hexadecimální notace)

Velmi rozšířený kompaktní formát: #RRGGBB na šesti znacích, kde každý pár reprezentuje RGB kanál v základu 16. Varianta #RRGGBBAA na osmi znacích přidává alfa kanál v hexadecimální podobě (00 průhledný, FF neprůhledný). Existuje také krátká notace #RGB: #F53 je ekvivalent #FF5533.

.nadpis  { color: #1400B6; }
.stin    { color: #1400B680; }   /* alpha 50% */
.akcent  { color: #F53; }        /* krátká forma */

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

HSL popisuje barvu percepčně. Hue je úhel na barevném kruhu (0 až 360°), Saturation a Lightness jsou procenta. Je to preferovaný formát pro generování variant: zesvětlit hover tlačítko, desaturovat zakázaný stav, vytvořit konzistentní paletu změnou pouze odstínu.

$primary: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* světlejší */
$primary-muted: hsl(247, 30%, 36%);    /* méně saturovaný */

Další existující formáty

CMYK (Cyan, Magenta, Yellow, Key) se používá v tisku: popisuje barvu odečítáním inkoustů a není relevantní pro obrazovku. OKLCH a LAB jsou percepčně uniformní prostory, které se objevily v CSS Color Level 4; umožňují lepší kontrolu vnímaného jasu. Tento nástroj se soustředí na převody RGB, HEX a HSL, které pokrývají naprostou většinu webových potřeb.

HEX na RGB znamená parsovat řetězec po párech znaků a interpretovat každý pár jako celé číslo v základu 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 inverzní operace: každý kanál se převede do základu 16, doplní se na dva znaky, pak se spojí.

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

RGB na HSL je více algoritmické. Kanály se normalizují mezi 0 a 1, počítá se min a max pro odvození jasu, pak saturace, pak odstín podle dominantního kanálu. Kompletní vzorec je dokumentován ve specifikaci CSS Color Module Level 3.

Nástroj funguje v obou směrech mezi RGB, HEX a HSL. Pro provedení převodu:

1. Zvolte vstupní formát: RGB, HEX nebo HSL.
2. Zadejte hodnotu (například #1400B6, rgb(20, 0, 182) nebo hsl(247, 100%, 36%)).
3. Spusťte převod: ekvivalenty v ostatních dvou formátech se zobrazí okamžitě.
4. Zkopírujte požadovaný výsledek pomocí věnovaného tlačítka a vložte ho do svého stylu nebo mockupu.

Výpočet probíhá na straně prohlížeče, žádná data nejsou odesílána na server.

• Web design a CSS: získat HEX z mockupu a dostat ekvivalent HSL pro generování hover nebo active stavu bez odchýlení od odstínu.
• Vizuální identita a paleta: deklinovat primární barvu do několika variant (světlá, tmavá, ztlumená) hraním si s jasem nebo saturací HSL.
• Ilustrace a grafika: přenést obrazovou barvu (RGB) na hexadecimální kód pro předání software nebo klientovi.
• Přístupnost: převést do RGB formátu pro následný výpočet kontrastního poměru (WCAG AA vyžaduje 4.5:1 pro běžný text) s barvou pozadí.
• CSS proměnné a preprocesory: napájet design tokeny v SASS souboru nebo Tailwind tématu z jediné referenční barvy.

Několik kompletních převodů pro ilustraci korespondence mezi třemi formáty:

#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álem:

#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)

Jaký je rozdíl mezi HEX a HEX8?

Klasický HEX kóduje tři RGB kanály na šesti znacích (#RRGGBB). HEX8 přidává dva znaky pro alfa kanál (#RRGGBBAA), což umožňuje řízení průhlednosti v jediném řetězci. #1400B6FF a #1400B6 dávají vizuálně stejnou barvu, neprůhlednou.

Je lepší HSL nebo RGB v CSS?

Oba jsou ekvivalentní v renderingu. HSL je expresivnější pro generování konzistentní palety nebo stavových variant (hover, focus), protože měníte pouze jeden percepční parametr. RGB zůstává praktické při práci s daty z canvasu nebo ze senzoru.

Proč moje HEX dává jiný odstín než očekávaný?

Tři časté příčiny: zaměnění krátkého #RGB a dlouhého #RRGGBB (znaky jsou duplikovány, ne zřetězeny), chyba při kopírování jednoho znaku, nebo zobrazení na nekalibrovaném monitoru. Také zkontrolujte, že vaše CSS nepřekrývá rodičovskou neprůhlednost, která modifikuje finální rendering.

K čemu slouží alfa kanál RGBA a HSLA?

Alfa kanál ovládá neprůhlednost barvy, od 0 (zcela průhledné) do 1 (zcela neprůhledné). Je užitečný pro overlay, stíny, deaktivované stavy nebo překryvy na obrázku. Na rozdíl od CSS vlastnosti opacity, RGBA a HSLA ovlivňují pouze cílenou barvu a ne její potomky.

Lze převést barvu bez ztráty přesnosti?

Mezi RGB a HEX je převod přesný, oba formáty kódují stejnou informaci na 24 bitech. Převod na HSL zahrnuje zaokrouhlení odstínu, saturace a jasu; tam a zpět RGB > HSL > RGB může vrátit hodnotu posunutou o jednu jednotku na některých kanálech.

Proč použít online převodník místo vlastní funkce?

Pro jednorázový test, prototypování palety nebo rychlé ověření HEX ekvivalentu HSL barvy získané z mockupu je online převodník okamžitý. Pro opakující se programatickou potřebu zůstává knihovna jako color, chroma-js nebo tinycolor2 vhodnější.