Převeď HEX kód na hodnoty RGB
Zadej HEX kód a hodnoty RGB se objeví během psaní: #3B82F6 je rgb(59, 130, 246). Převodník čte kódy o třech, čtyřech, šesti i osmi znacích, takže zachytí i krytí v kódu #3B82F680. Přepínač pod poli ti dá kanály jako 0–255 nebo jako 0–1.
Jak se převádí HEX na RGB?
Čti kód po dvojicích znaků a každou dvojici převeď ze šestnáctkové soustavy do desítkové. První dvojice je červený kanál, druhá zelený, třetí modrý, a každá hodnota se vejde mezi 0 a 255. Kód #3B82F6 se rozpadá na 3B, 82 a F6, což dává rgb(59, 130, 246).
Vzorec: R, G a B jsou po sobě jdoucí dvojice znaků kódu přečtené jako šestnáctková čísla.
Jednu dvojici spočítáš i z hlavy, protože jde o jedno násobení a jedno sčítání. První znak vynásob šestnácti a přičti druhý, přičemž A znamená 10, B znamená 11 a F znamená 15. Pro dvojici 3B to dává 3 × 16 + 11, tedy 59.
Některé kódy se vracejí častěji než jiné. Černá #000000 je rgb(0, 0, 0), bílá #FFFFFF je rgb(255, 255, 255) a šedá #808080 je rgb(128, 128, 128), přesně polovina každého kanálu.
Opačným směrem stojí výpočet na stejném čísle, jen s jednou změnou: kanál dělíš šestnácti a zbytek zapíšeš jako druhý znak dvojice. Celý převod za tebe udělá převodník RGB na HEX.
Co je HEX kód a co je RGB?
RGB popisuje barvu třemi čísly: po jednom pro červený, zelený a modrý kanál, všechna v rozsahu 0 až 255. Obrazovka skládá barvu ze světla, takže čím vyšší čísla, tím jasnější bod, a tři maximální hodnoty dávají bílou[1].
HEX kód popisuje tutéž barvu kratším způsobem. Hodnota jednoho kanálu se v šestnáctkové soustavě vejde přesně do dvou znaků, takže celá barva zabere šest znaků za křížkem.
V každodenní práci se oba zápisy objevují jinde. HEX kód ti dá Figma, panel barev v redakčním systému i manuál značky, protože je krátký a snadno se předává. Hodnoty RGB přicházejí tam, kde se s barvou počítá: u kontrastu podle WCAG, u zápisu s průhledností a v 3D enginech.
Specifikace CSS Color Level 4 připouští čtyři délky kódu: tři, čtyři, šest nebo osm znaků[2]. Tříznaková verze je zkratka, v níž prohlížeč každý znak zdvojí, takže #123 znamená totéž co #112233. Čtyř- a osmiznaková verze přidávají na konec krytí, kde 00 je úplná průhlednost a FF plné krytí.
Obě podoby popisují barvu v prostoru sRGB. Standard navrhly v roce 1996 firmy Hewlett-Packard a Microsoft a W3C jej přijalo pro HTML a CSS pod označením IEC 61966-2-1[3]. Proto stejný kód dává na každé odpovídající obrazovce stejnou barvu.
HEX kódy pojmenovaných barev CSS a jejich hodnoty RGB
| Název v CSS | HEX kód | Hodnoty RGB |
|---|---|---|
| black | #000000 | 0, 0, 0 |
| white | #FFFFFF | 255, 255, 255 |
| red | #FF0000 | 255, 0, 0 |
| lime | #00FF00 | 0, 255, 0 |
| blue | #0000FF | 0, 0, 255 |
| yellow | #FFFF00 | 255, 255, 0 |
| aqua | #00FFFF | 0, 255, 255 |
| fuchsia | #FF00FF | 255, 0, 255 |
| silver | #C0C0C0 | 192, 192, 192 |
| gray | #808080 | 128, 128, 128 |
| maroon | #800000 | 128, 0, 0 |
| olive | #808000 | 128, 128, 0 |
| green | #008000 | 0, 128, 0 |
| purple | #800080 | 128, 0, 128 |
| teal | #008080 | 0, 128, 128 |
| navy | #000080 | 0, 0, 128 |
| orange | #FFA500 | 255, 165, 0 |
| pink | #FFC0CB | 255, 192, 203 |
Slovo green označuje v CSS barvu s poloviční jasností zeleného kanálu, zatímco plných 255 na tomto kanálu nese název lime.
HEX kódy z rozhraní: hodnoty RGB a zápis 0–1
| HEX kód | Hodnoty RGB | Zápis 0–1 |
|---|---|---|
| #FAFAFA | 250, 250, 250 | 0.9804, 0.9804, 0.9804 |
| #F5F5F5 | 245, 245, 245 | 0.9608, 0.9608, 0.9608 |
| #333333 | 51, 51, 51 | 0.2, 0.2, 0.2 |
| #1A1A1A | 26, 26, 26 | 0.102, 0.102, 0.102 |
| #3B82F6 | 59, 130, 246 | 0.2314, 0.5098, 0.9647 |
| #EF4444 | 239, 68, 68 | 0.9373, 0.2667, 0.2667 |
| #EE3333 | 238, 51, 51 | 0.9333, 0.2, 0.2 |
| #22C55E | 34, 197, 94 | 0.1333, 0.7725, 0.3686 |
Zlomkový zápis vzniká dělením každého kanálu 255, takže 128 dává 0.502 a 255 dává rovnou 1.
Jaké znaky se do HEX kódu přidávají pro krytí?
| Krytí | Znaky v kódu | Hodnota kanálu | Přesné krytí |
|---|---|---|---|
| 100% | FF | 255 | 100% |
| 90% | E6 | 230 | 90,20% |
| 80% | CC | 204 | 80% |
| 75% | BF | 191 | 74,90% |
| 70% | B3 | 179 | 70,20% |
| 60% | 99 | 153 | 60% |
| 50% | 80 | 128 | 50,20% |
| 40% | 66 | 102 | 40% |
| 30% | 4D | 77 | 30,20% |
| 25% | 40 | 64 | 25,10% |
| 20% | 33 | 51 | 20% |
| 10% | 1A | 26 | 10,20% |
| 5% | 0D | 13 | 5,10% |
| 0% | 00 | 0 | 0% |
Kanál krytí má 256 stupňů, stejně jako každý barevný kanál. Přesně na kulaté procento padnou hodnoty po 20 %, tedy 0, 20, 40, 60, 80 a 100. Ostatní dvojice leží dvě desetiny procenta vedle hodnoty z prvního sloupce a na obrazovce vypadají stejně.
Kde najdeš HEX kód v programu, ve kterém pracuješ?
Každý z těchto programů ukazuje kód vybraného prvku, jen na jiném místě.
Figma
Vyber vrstvu a klikni na čtvercový vzorek v sekci Fill v pravém panelu. Otevře se výběr barvy a pod posuvníky odstínu a krytí je seznam, kterým přepneš zápis mezi Hex, RGB, HSB, HSL a CSS. Figma ukazuje ve výchozím stavu Hex.Photoshop
Klikni dvakrát na čtverec barvy dole v panelu nástrojů. V okně Výběr barvy je kód v poli označeném křížkem, pod hodnotami R, G a B.Canva
Vyber prvek a klikni na barvu v horní liště. Pod barvami dokumentu stiskni Přidat novou barvu a do pole s křížkem zapíšeš nebo z něj přečteš šestiznakový kód.Prohlížeč
Klikni na prvek pravým tlačítkem a zvol Prozkoumat. V panelu stylů je u každé barevné vlastnosti malý vzorek a kliknutí na něj se stisknutou klávesou Shift přepíná zápis mezi HEX, RGB a HSL.
Jak se převádí HEX na RGB v Excelu?
Zadej kód do buňky A1 a do tří sousedních buněk napiš vzorce =HEX2DEC(ČÁST(A1;2;2)), =HEX2DEC(ČÁST(A1;4;2)) a =HEX2DEC(ČÁST(A1;6;2)). Pro kód #3B82F6 vrátí 59, 130 a 246.
První z těchto funkcí čte šestnáctkové číslo[4] a druhá z kódu vyřezává po sobě jdoucí dvojice znaků. ČÁST chce buňku, pozici prvního znaku a počet znaků, a protože kód začíná křížkem, kanály stojí na pozicích 2, 4 a 6.
Zkopírováním těchto tří buněk dolů převedeš celý sloupec kódů. Česká verze Excelu ponechává u obou převodů mezi soustavami anglické názvy HEX2DEC a DEC2HEX, zatímco funkce pro výřez textu se jmenuje ČÁST.
Zdroje
- RGB — Wikipedie
- CSS Color Module Level 4 — šestnáctkový zápis — W3C
- sRGB — Wikipedie
- HEX2DEC — funkce Excelu — Microsoft Support
Všechny hodnoty v tabulkách jsme spočítali z definic jednotek a před zveřejněním ověřili výpočtem. Historické údaje a názvy místních jednotek vycházejí ze zdrojů uvedených výše.
Poslední revize obsahu: · napsal a zkontroloval tým Arteon
Časté dotazy k převodu HEX na RGB
Jsou #FFF a #FFFFFF stejná barva?
Ano. Tříznakový zápis každý znak zdvojí, takže #FFF se rozvine na #FFFFFF a #38F na #3388FF[2]. Oba dají v RGB přesně stejná tři čísla.
Jaký HEX kód mají bílá a černá?
Bílá je #FFFFFF, tedy rgb(255, 255, 255), a černá je #000000, tedy rgb(0, 0, 0). Ve zkráceném zápisu jsou to #FFF a #000.
Co znamená křížek před kódem barvy?
Křížek otevírá šestnáctkový zápis a říká prohlížeči, že další znaky jsou kód barvy. Sám o sobě nenese žádnou hodnotu, takže převodník přijme kód s křížkem i bez něj.
Kolik barev lze HEX kódem popsat?
Každý ze tří kanálů má 256 stupňů, což dává 16 777 216 kombinací[3]. Osmiznakový kód k tomu přidává 256 stupňů krytí.
Jak se do HEX kódu zapisuje průhlednost?
Na konec přidej dva znaky krytí: #3B82F680 je tatáž modrá při polovičním krytí. Převodník takový kód přečte a výsledek podá v zápisu rgba(59, 130, 246, 0.5). Dvojice pro kulaté hodnoty najdeš v tabulce krytí na této stránce.
Čím se liší zápis 0–255 a 0–1?
Je to tatáž barva na dvou stupnicích. CSS, Figma a grafické programy počítají kanál v bajtech od 0 do 255, kdežto Unity, three.js, OpenGL a matplotlib ve zlomcích od 0 do 1. Přepínač Zápis kanálů RGB pod poli podá výsledek na té stupnici, kterou zrovna potřebuješ.
Dá se HEX kód použít v tiskové zakázce?
Tiskový stroj pracuje se čtyřmi barvami, takže tiskový soubor popisuje barvu hodnotami CMYK. Tři čísla získaná zde zadej do převodníku RGB na CMYK a dostaneš podíly azurové, purpurové, žluté a černé.
Jak se ověří, že má barva dostatečný kontrast?
WCAG počítají kontrast z hodnot kanálů, takže práce začíná převodem kódu na RGB. Hotové číslo spolu s prahy pro text podá kontrola kontrastu barev.
Pomoz nám vylepšit naše nástroje
Máš nápad, našel jsi chybu nebo chceš navrhnout nový nástroj? Napiš nám – odpovídáme do 24 hodin.