Změň hodnoty RGB na kód HEX
Zadej tři čísla a kód HEX se objeví během psaní: rgb(59, 130, 246) je #3B82F6. Pole přijímá čárky, mezery i procenta, takže hodnotu vložíš rovnou ze šablony stylů nebo z výběru barvy. Přepínačem přečteš i kanály zadané ve zlomcích od 0 do 1.
Jak změnit RGB na HEX?
Vyděl každý kanál šestnácti. Podíl je prvním znakem dvojice, zbytek druhým, a čísla od 10 do 15 se zapisují písmeny od A do F. Kanál 59 dává 3 a zbytek 11, tedy dvojici 3B.
Vzorec: každý kanál zapíšeš dvěma šestnáctkovými znaky a dvojice slepíš v pořadí červená, zelená, modrá.
Po témže výpočtu dává 130 dvojici 82 a 246 dvojici F6, takže rgb(59, 130, 246) se zapisuje jako #3B82F6. Kanál nižší než 16 dostane vedoucí nulu, aby dvojice měla vždy dva znaky, takže hodnota 10 se zapíše jako 0A.
Šedé odstíny mají všechny tři kanály stejné, takže jejich kódy tvoří tři shodné dvojice: 51 dává #333333 a 204 dává #CCCCCC. Takový kód zkrátíš na tři znaky a prohlížeč si ho zase rozvine.
Opačným směrem stojí výpočet na stejném čísle, jen každou dvojici násobíš šestnácti a přičteš druhý znak. Celý převod za tebe udělá převodník HEX na RGB.
Co jsou hodnoty RGB a co je šestnáctkový zápis?
RGB popisuje barvu třemi čísly, po jednom na kanál červený, zelený a modrý. Každé se vejde mezi 0 a 255, protože tolik stupňů jasu má jeden kanál v dvacetičtyřbitovém zápisu barvy. Tři kanály po 256 stupních dávají dohromady 16 777 216 barev[1].
Šestnáctkový zápis podává tatáž tři čísla v jiné číselné soustavě. Kanál má 256 stupňů a přesně tolik se vejde do dvou šestnáctkových znaků, takže každý kanál zabere v kódu rovná dvě místa. Celá barva klesne na šest znaků, bez čárek a bez závorek.
Právě tato úspornost rozhoduje o tom, kde který zápis potkáš. Kód HEX stojí v šablonách stylů, v polích barev ve Figmě a v manuálech značky. Hodnoty RGB se objevují v záložce Computed v prohlížeči, ve výběrech barvy grafických programů a všude tam, kde barva vstupuje do výpočtu.
Specifikace CSS Color Level 4 připouští čtyři délky kódu: tři, čtyři, šest a osm znaků[2]. Tříznaková verze funguje tam, kde jsou oba znaky dvojice stejné, protože prohlížeč ji rozvine zopakováním. Čtyř- a osmiznaková verze přidávají na konec krytí.
Obě podoby popisují barvu v témže barevném prostoru sRGB, který W3C přijalo pro HTML a CSS[1]. Kanál zapsaný jako 255 a týž kanál zapsaný jako FF je přesně stejný odstín.
Kódy HEX šedých odstínů používaných v rozhraních
#4D4D4D. Foto: Bill Abbott, CC BY-SA 2.0.| Hodnoty RGB | Kód HEX |
|---|---|
| 13, 13, 13 | #0D0D0D |
| 14, 14, 14 | #0E0E0E |
| 15, 15, 15 | #0F0F0F |
| 24, 24, 24 | #181818 |
| 35, 35, 35 | #232323 |
| 36, 36, 36 | #242424 |
| 37, 37, 37 | #252525 |
| 51, 51, 51 | #333333 |
| 60, 60, 60 | #3C3C3C |
| 64, 64, 64 | #404040 |
| 65, 65, 65 | #414141 |
| 66, 66, 66 | #424242 |
| 74, 74, 74 | #4A4A4A |
| 77, 77, 77 | #4D4D4D |
| 82, 82, 82 | #525252 |
| 84, 84, 84 | #545454 |
| 89, 89, 89 | #595959 |
| 97, 97, 97 | #616161 |
| 128, 128, 128 | #808080 |
| 204, 204, 204 | #CCCCCC |
Šedá se stejnými kanály dává vždy kód ze tří zopakovaných dvojic, takže #333333 zkrátíš na #333 a #CCCCCC na #CCC.
Jakou dvojici znaků dává hodnota kanálu?
| Hodnota kanálu | Dvojice znaků |
|---|---|
| 0 | 00 |
| 16 | 10 |
| 32 | 20 |
| 48 | 30 |
| 64 | 40 |
| 80 | 50 |
| 96 | 60 |
| 112 | 70 |
| 128 | 80 |
| 144 | 90 |
| 160 | A0 |
| 176 | B0 |
| 192 | C0 |
| 208 | D0 |
| 224 | E0 |
| 240 | F0 |
| 255 | FF |
Každý další řádek znamená šestnáct stupňů kanálu, tedy jeden krok na prvním znaku dvojice.
Kanály v zápisu 0–1 a jejich kódy HEX
| Zápis 0–1 | Hodnoty RGB | Kód HEX |
|---|---|---|
| 0, 0, 0 | 0, 0, 0 | #000000 |
| 0.1, 0.1, 0.1 | 26, 26, 26 | #1A1A1A |
| 0.2, 0.2, 0.2 | 51, 51, 51 | #333333 |
| 0.25, 0.25, 0.25 | 64, 64, 64 | #404040 |
| 0.5, 0.5, 0.5 | 128, 128, 128 | #808080 |
| 0.75, 0.75, 0.75 | 191, 191, 191 | #BFBFBF |
| 0.8, 0.8, 0.8 | 204, 204, 204 | #CCCCCC |
| 0.9, 0.9, 0.9 | 230, 230, 230 | #E6E6E6 |
| 1, 1, 1 | 255, 255, 255 | #FFFFFF |
| 0.2314, 0.5098, 0.9647 | 59, 130, 246 | #3B82F6 |
| 0.9373, 0.2667, 0.2667 | 239, 68, 68 | #EF4444 |
| 0.1333, 0.7725, 0.3686 | 34, 197, 94 | #22C55E |
Zlomek vynásobíš 255 a výsledek zaokrouhlíš na nejbližší celé číslo. Hodnota 0,5 tak dává 128 a hodnota 0,75 dává 191.
Kde přečteš hodnoty RGB v programu, ve kterém pracuješ?
Všechna tři místa ukazují tutéž barvu, jen jiným zápisem.
Photoshop
Klikni dvakrát na čtverec barvy nástroje dole v panelu nástrojů. V okně Výběr barvy stojí hodnoty v polích R, G a B, každá v rozsahu od 0 do 255.Figma
Vyber vrstvu a klikni na vzorek v sekci Fill v pravém panelu. Pod posuvníky odstínu a krytí rozbalíš seznam zápisů a zvolíš RGB; ve výchozím stavu tam stojí Hex.Prohlížeč
Klikni na prvek pravým tlačítkem, zvol Prozkoumat a přejdi na záložku Computed. Prohlížeč tam podává každou vlastnost barvy v zápisurgb()bez ohledu na to, jak je zapsaná v šabloně stylů.
Jak převést RGB na HEX v Excelu?
Zadej kanály do buněk A1, B1 a C1 a do čtvrté buňky napiš vzorec ="#"&DEC2HEX(A1;2)&DEC2HEX(B1;2)&DEC2HEX(C1;2). Pro hodnoty 59, 130 a 246 vrátí #3B82F6.
Dvojka v každém volání je argument místa, který doplní výsledek nulami zepředu[3]. Kód barvy vyžaduje přesně dva znaky na kanál a kanál s hodnotou 10 by bez tohoto argumentu dal samotné A.
Zkopírováním této buňky dolů přepočítáš celý sloupec. Česká verze programu ponechává anglický název DEC2HEX a argumenty odděluje středníkem.
Zdroje
- sRGB — Wikipedie
- CSS Color Module Level 4 — šestnáctkový zápis — W3C
- DEC2HEX — 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 RGB na HEX
Jaký kód HEX má rgb(51, 51, 51)?
Je to #333333, jedna z nejčastěji používaných šedých pro text. Hodnota 51 dává dvojici 33, a protože jsou všechny tři kanály stejné, kód se zkracuje na #333.
Přijme převodník čísla oddělená mezerou?
Ano. Pole přečte 59 130 246, 59, 130, 246 i celý zápis rgb(59 130 246 / 50%). Moderní syntaxe CSS odděluje kanály mezerou a krytí staví za lomítko, takže takový zápis vložíš rovnou ze šablony stylů.
Co dělat s hodnotou zapsanou jako rgba?
Zadej ji celou. Převodník přečte čtvrté číslo jako krytí a přidá je na konec kódu, takže rgba(59, 130, 246, 0.5) dá #3B82F680.
Dají se kanály zadat v procentech?
Ano. Zápis 50%, 50%, 50% odpovídá hodnotě 128 na každém kanálu a dává kód #808080. Sto procent znamená 255 a nula procent znamená 0.
Jak převést RGB na HEX z hlavy?
Vyděl kanál šestnácti. Podíl je prvním znakem dvojice, zbytek druhým, a čísla od 10 do 15 zapisuješ písmeny od A do F. Kanál 160 dává rovných 10 a nulový zbytek, tedy dvojici A0.
Čím se liší zápis 0–255 a 0–1?
Je to tatáž barva popsaná dvěma stupnicemi. Stupnice 0–255 platí v CSS a v grafických programech, stupnice 0–1 ve 3D enginech a v knihovnách pro grafy. Přepínač Zápis kanálů RGB pod poli říká převodníku, kterou z nich zadáváš.
Dá se z kódu HEX vrátit k hodnotám RGB?
Ano, a výsledek je přesně stejný, protože obě podoby popisují tatáž tři čísla. Tlačítko Prohodit pořadí přenese na převodník HEX na RGB, kde zadáš kód a přečteš kanály.
Jak z hodnot RGB získat barvu pro tisk?
Tiskárna popisuje barvu čtyřmi barvami, takže tatáž tři čísla je potřeba převést na CMYK. Udělá to převodník RGB na CMYK, který podává podíly azurové, purpurové, žluté a černé.
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.