Hex kódy barev srozumitelně: jak funguje #RRGGBB

Jak funguje hex kód barvy

Každá barva na obrazovce vzniká smícháním červeného, zeleného a modrého světla. Hex kód zapisuje sílu každého z nich dvěma znaky za znakem #: nejdřív červenou, pak zelenou, pak modrou. To je vzor #RRGGBB.

Znaky jsou šestnáctkové (hexadecimální), tedy počítání se šestnácti číslicemi: 0 až 9, pak a (10), b (11), c (12), d (13), e (14) a f (15). Jedna dvojice pokryje 256 hodnot, od 00 (0) po ff (255), přesně rozsah rgb().

Dvojici převedete na běžné číslo tak, že první číslici vynásobíte 16 a přičtete druhou. Níže je #1e90ff, barva CSS dodgerblue, ve čtyřech formátech a pak rozepsaná po dvojicích.

Takže #1e90ff je rgb(30, 144, 255): trochu červené, slušná dávka zelené a plná modrá, což dohromady dává jasnou blankytně modrou. Tři dvojice po 256 hodnotách dávají 16 777 216 možných barev.

Trojmístná a čtyřmístná zkratka hex

Když jsou obě číslice v každé dvojici stejné, stačí každou dvojici napsat jednou. Z #ffcc00 se stane #fc0 a prohlížeč každou číslici zase zdvojí. #1e90ff krátký zápis nemá, protože 1e a 90 nejsou zdvojené dvojice.

Krátký zápis pokrývá jen 4 096 z 16,7 milionu barev. Čtyřmístná varianta stejným způsobem přidává neprůhlednost, takže #f008 znamená #ff000088.

Průhlednost v hex: osmimístný hex s alfa kanálem

Osmimístný kód přidává čtvrtou dvojici pro alfu, tedy neprůhlednost: #RRGGBBAA. 00 je zcela průhledná a ff zcela plná barva. Všechny aktuální prohlížeče ho v CSS podporují, stejně jako čtyřmístnou zkratku #RGBA.

Dvojici získáte tak, že neprůhlednost vynásobíte 255, zaokrouhlíte na celé číslo a převedete do hex. 50 % dává 127,5, což se zaokrouhlí na 128, zapsané jako 80. Tady je celá tabulka pro #1e90ff.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

Dva háčky. Zaprvé, 80 je 128 z 255, tedy 50,2 %, ne přesně 50 %: alfa v hex má jen 256 kroků, takže většina kulatých procent je jen blízké přiblížení. Zadruhé, Android dává alfu na začátek. V barevném zdroji Androidu znamená #801e90ff totéž co #1e90ff80 v CSS.

Jak přečíst hex kód od oka

Barvu odhadnete i bez převádění. Dívejte se na první číslici každé dvojice, protože nese téměř všechnu informaci.

• Největší první číslice určuje převládající světlo. #d2691e má d v červené, 6 v zelené a 1 v modré, takže jde o oranžovohnědou.
• Dva vysoké kanály se smíchají: červená a zelená dají žlutou, zelená a modrá azurovou, červená a modrá purpurovou nebo fialovou.
• Tři stejné dvojice dávají šedou. #333333 je tmavě šedá, #999999 světle šedá. Téměř stejné dvojice, jako #708090, dávají tlumenou, našedlou barvu.
• Vysoké číslice celkově znamenají světlou barvu, nízké tmavou. Když jsou všechny tři dvojice c0 nebo víc, barva je bledá. Když jsou všechny tři 30 nebo méně, je velmi tmavá.
• Zelená při stejném čísle vypadá mnohem jasněji než modrá. #00ff00 má světlost OKLCH 0,866, #0000ff jen 0,452.

Proč #808080 není střední šedá

#808080 leží číselně přesně uprostřed: 128 z 255 v každém kanálu. Vizuálně ale na půli cesty mezi černou a bílou nepůsobí. Jeho světlost OKLCH je 0,600, takže se jeví, jako by urazil 60 % cesty k bílé.

Hodnoty hex jsou už zakódované křivkou sRGB, která zhruba sleduje oko, ale ne přesně. #808080 vyzařuje asi 21,6 % světla bílé a percepční modely kladou vizuální střed níž: OKLCH na #636363, CIELAB na #777777.

Pro text je to důležité. Šedá #808080 na bílé má 3,95:1 a pro běžný text WCAG AA nesplní. #767676 je nejsvětlejší šedá, která 4,5:1 splní, a #777777, o krok světlejší, už s 4,48:1 neprojde.

Velká, nebo malá písmena, s # i bez

U hex kódů nezáleží na velikosti písmen. #1E90FF, #1e90ff a #1E90ff jsou v CSS, SVG i v grafických nástrojích stejná barva. Zvolte jeden styl a držte se ho všude, aby hledání v kódu našlo každé použití. V CSS se běžně píšou malá písmena.

Znak # je součástí syntaxe CSS, ne barvy. Figma a mnoho grafických nástrojů zobrazuje kód bez něj a programovací jazyky ho často zapisují jako číslo s předponou 0x, třeba ve Flutteru, kde Color(0xFF1E90FF) začíná dvojicí alfa.

Jak zjistit hex kód barvy na obrazovce

Použijte kapátko: nástroj, který přečte barvu pod kurzorem a ukáže její kód. Tyto nástroje jsou zdarma a většinou už je máte nainstalované.

• Chrome a Edge: otevřete DevTools klávesou F12, v panelu Styly klikněte na libovolný barevný čtvereček a ikonou kapátka vyberte barvu ze stránky.
• PickShade: výběr barvy na hlavní stránce má v Chrome a Edge tlačítko kapátka, které vybere barvu odkudkoli z obrazovky.
• Windows: nainstalujte Microsoft PowerToys a zkratkou Win + Shift + C otevřete Color Picker.
• macOS: otevřete Digital Color Meter (Digitální kolorimetr) ve složce Aplikace, Utility. Přepněte ho na sRGB a v nabídce Zobrazení nastavte zobrazení hodnot v šestnáctkové soustavě.
• Figma, Photoshop a většina grafických aplikací: kapátko vyvoláte klávesou I.
• Na fotce nebo snímku obrazovky: otevřete ji ve výběru barev z obrázku a klikněte na libovolný pixel. Obrázek zůstane ve vašem zařízení.

Vybraná hodnota se může od originálu o pár jednotek lišit, protože obrazovky používají barevné profily a obrázky jsou komprimované. Když potřebujete přesnou hodnotu, zkopírujte ji z grafického souboru nebo z CSS, ne ze snímku obrazovky.

Otázky a odpovědi