Převodník HEX na RGB barvy

Co je HEX kód barvy?

HEX kód barvy je šestimístný alfanumerický řetězec používán v webu a digitální grafice k reprezentaci konkrétní barvy. Formát sleduje vzor #RRGGBB, kde každá dvojice dvou znaků kóduje intenzitu jedné z tří přídavných základních barev — červené (RR), zelené (GG) a modré (BB) — pomocí hexadecimální notace (základ 16). Každá dvojice se pohybuje od 00 (nula intenzity) do FF (maximální intenzita, ekvivalentní 255 v desítkové soustavě).

HEX kódy pocházejí z potřeby definovat barvy v HTML a CSS bez použití jmenovitých klíčových slov. I když CSS nyní podporuje několik formátů barev včetně rgb(), hsl() a oklch(), HEX zůstává nejčastěji používanou notací v front-endu, návrhu a směrnicích pro značky. Virtuálně každá barva v nástrojích jako Figma, Sketch, Adobe Photoshop a Canva se zobrazuje jako HEX hodnota výchozí.

Počet jedinečných barev reprezentovatelných šestimístnými HEX kódy je 16 777 216 (256 × 256 × 256). Tento počet se často označuje jako "True Color" nebo "24-bitová barva", což odpovídá hloubce barev většiny moderních displejů. Každý kanál má 8 bitů (jednu bajtu) a tři kanály společně vytvářejí 24 bitů barevných dat.

HEX kódy jsou nezávislé na velkém a malém písmenu, takže #ff8000 a #FF8000 odkazují na stejnou barvu. Některé style guide preferují velké písmeno pro lepší čitelnost, zatímco CSS minifikátory často vylučují malá písmena, aby ušetřily bajty — i když v praxi je rozdíl nepatrný.

Jak převést HEX na RGB krok za krokem

Převod HEX kódu barvy na jeho RGB ekvivalent je přímočarý. Proces zahrnuje rozdělení šestimístného řetězce na tři dvojice a převod každé dvojice z hexadecimální (základ 16) na desítkovou (základ 10). Zde je krok za krokem:

1. Odstraňte znak háčku. Pokud HEX kód začíná #, odstraňte ho. Například #1A2B3C se stane 1A2B3C.
2. Rozdělte na tři dvojice. Rozdělte zbývající řetězec na tři skupiny dvou znaků: 1A, 2B, 3C.
3. Převod každé dvojice na desítku. Použijte hexadecimální soustavu, kde první znak je násoben 16 a druhý znak je připojen:
   • Červená: 1A → (1 × 16) + 10 = 26
   • Zelená: 2B → (2 × 16) + 11 = 43
   • Modrá: 3C → (3 × 16) + 12 = 60
4. Zapište hodnotu RGB. Kombinujte tři desítkové hodnoty: rgb(26, 43, 60).

Hexadecimální číslice a jejich desítkové ekvivalenty jsou: 0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14, F=15. Učení A až F je jedinou částí, která se liší od standardní desítkové aritmetiky.

Pro programatický převod nabízí většina jazyků zabudované funkce. V JavaScriptu parseInt("1A", 16) vrátí 26. V Pythonu int("1A", 16) dělá totéž. CSS samo zvládne obě formáty natively, takže převod je primárně užitečný, když potřebujete manipulovat jednotlivými kanály barev v kódu — například při úpravě jasnosti, vytváření gradientů programaticky nebo smíchání dvou barev.

3-Digit vs 6-Digit HEX Kódy

CSS podporuje zkrácenou 3-dílnou HEX formát (#RGB) jako pohodlnou variantu, kdy se každá z trojice skládá z identických číslic. V tomto zkráceném formátu se každá jednoduchá číslice zvyšuje o dvojnásobek. Například:

• #F80 se rozšiřuje na #FF8800 → rgb(255, 136, 0)
• #FFF se rozšiřuje na #FFFFFF → rgb(255, 255, 255)
• #000 se rozšiřuje na #000000 → rgb(0, 0, 0)
• #09C se rozšiřuje na #0099CC → rgb(0, 153, 204)
• #A3F se rozšiřuje na #AA33FF → rgb(170, 51, 255)

Zkrácený zápis snižuje počet dostupných barev z 16,7 milionu na pouhých 4 096 (16 × 16 × 16), takže nemůže zobecnit každou barvu. Nejčastěji se používá pro jednoduché nebo známé barvy v souborech CSS, kde je důležitost kompaktnosti.

CSS také podporuje 4-dílné (#RGBA) a 8-dílné (#RRGGBBAA) HEX kódy, které zahrnují kanál alfa (pronikavost). Hodnota alfa následuje stejnou hexadecimální logiku: FF je plně průhledný a 00 je plně průhledný. Například #FF880080 reprezentuje barvu rgb(255, 136, 0) s 50% průhledností. Naše konvertor se zaměřuje na standardní 3- a 6-dílné formáty; pokud zadáte kód s kanálem alfa, bude zpracován pouze RGB část.

Referenční tabulka HEX kódů a jejich RGB ekvivalentů

Podívejte se níže na referenční tabulku běžných HEX barev a jejich RGB ekvivalentů. Tato tabulka pokrývá nejčastěji používané barvy v web designu, CSS pojmenované barvy a oblíbené palety firem.

CSS definuje 147 pojmenovaných barev v celku, každá s odpovídajícím HEX kódem. I když pojmenované barvy jsou pohodlné pro prototypování, profesionální projekty obvykle spoléhají na HEX nebo RGB hodnoty pro přesnost a konzistenci mezi prohlížeči a nástroji pro návrh.

Populární barvy firem – HEX a RGB hodnoty

Programátoři a designéři často potřebují přesné HEX a RGB hodnoty populárních barev firem pro modelování, integrace a style guide. Podívejte se níže na rychlý přehled některých nejčastěji vyžádaných barev firem:

Průvodci firemními barvami často specifikují barvy v několika formátech (HEX, RGB, CMYK, Pantone). Při implementaci firemních barev v CSS vždy ověřte hodnoty proti oficiálním průvodcům firem, aby se zajistila přesnost. Barvy se mohou mírně lišit mezi displeji, takže je důležité zachovat konzistenci v kódu.

Porovnání barevných modelů: HEX, RGB, HSL a CMYK

Porozumění tomu, kdy použít každý barevný model, vám pomůže pracovat efektivněji v různých nástrojích a médiích:

HEX a RGB jsou matematicky totožné — reprezentují stejnou barevnou prostor pomocí různých zápisů. Převod mezi nimi je jednoduchý překlad z báze 16 na bázi 10 s žádnou ztrátou přesnosti nebo rozdíl gamutu. HSL je transformace RGB do cylindrického souřadnicového systému, který usnadňuje samostatné myšlení o tónu, nasycení a jas. CMYK je subtraktivní barevný model používaný v tisku a nemůže reprezentovat všechny RGB barvy (a naopak), takže převody mezi RGB a CMYK jsou přibližné.

V moderním CSS (úroveň 4) je funkce color() a nové barevné prostory jako oklch() a display-p3 získávají přijetí, zejména pro širokou barevnou gamut. Nicméně HEX a RGB zůstávají základním standardem pro kompatibilitu ve webových prohlížečích a jsou podporovány každým používaným prohlížečem.

Použití HEX a RGB v CSS a JavaScriptu

Oba HEX a RGB hodnoty jsou platné v CSS a produkují identické výsledky. Zde jsou praktické příklady použití každého formátu:

Deklarace CSS:

/* HEX zápis */
body { background-color: #1A2B3C; }

/* RGB zápis */
body { background-color: rgb(26, 43, 60); }

/* RGB s alfa (pronikavostí) */
.overlay { background-color: rgba(26, 43, 60, 0,5); }

/* Moderní CSS — prostorově oddělený syntax */
.card { color: rgb(26 43 60 / 80%); }

JavaScriptové funkce převodu:

// HEX na RGB
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

// RGB na HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
}

Při práci s HTML Canvas API musí být barvy často nastaveny jako řetězce. Obě hodnoty "#FF8000" a "rgb(255, 128, 0)" fungují pro fillStyle a strokeStyle. Nicméně metoda getImageData() vrátí pixelová data jako pole 0–255 celých čísel (RGBA), což činí RGB přirozeným formátem pro manipulaci s pixely.

V CSS vlastnostech (proměnných) jsou často uloženy HEX hodnoty pro jednoduchost:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226; /* pro použití s rgba() */
}
.element {
  background: rgba(var(--primary-rgb), 0,3);
}

Tento vzor uložení čistých kanálových hodnot RGB jako CSS proměnné je populární technikou, která umožňuje dynamické nastavení opacnosti bez konverze mezi formáty v době spuštění.

Accessibilita a kontrast barvy

Přepočet HEX na RGB je často prvním krokem při výpočtu kontrastních poměrů pro splnění požadavků na přístupnost. Návod na přístupnost obsahu webových stránek (WCAG) vyžaduje minimální kontrastní poměr 4,5:1 pro normální text a 3:1 pro velký text (18px+ tučný nebo 24px+ běžný).

Formulář pro kontrastní poměr vyžaduje relativní luminanci každého barvy, která je vypočítána z lineárních hodnot RGB. Kroků je:

1. Přepočet HEX na RGB (0–255 na kanál).
2. Normalizace každého kanálu na 0–1 dělením na 255.
3. Applikace sRGB lineárního vzorce: pokud je hodnota ≤ 0,04045, rozdělte ji na 12,92; jinak vypočtěte ((hodnota + 0,055) / 1,055) ^ 2,4.
4. Vypočtení luminance: L = 0,2126 × R + 0,7152 × G + 0,0722 × B.
5. Vypočtení kontrastního poměru mezi dvěma barvami: (L1 + 0,05) / (L2 + 0,05), kde L1 je světlejší barva.

Jako vidíte, hodnoty RGB jsou zásadní vstupem pro každou přístupnostní kontrastní kalkulaci. Nástroje jako WebAIM Contrast Checker, Chrome DevTools color picker a axe accessibility scanner všechny tuto konverzi provedou interně.

Pro návrháře, rychlá pravidla zubů: tmavý text na světlém pozadí (nebo naopak) s luminancí rozdílem alespoň 125 a barevným rozdílem alespoň 500 (použitím součtu absolutních rozdílů přes R, G, B kanály) bude obecně splňovat standardy WCAG AA.