Převodník barev (HEX ↔ RGB)
Převodník barev převede libovolnou barvu mezi zápisem HEX (např. #2563eb) a RGB (červená, zelená, modrá) a hned ukáže barevný náhled. Hodí se webovým vývojářům, grafikům i každému, kdo potřebuje přepsat barvu z jednoho formátu do druhého. Vše počítá přímo ve vašem prohlížeči — žádná data neopouštějí vaše zařízení a nemusíte se registrovat.
Jak převodník barev funguje
Barvu na obrazovce tvoří tři světelné složky — červená (R), zelená (G) a modrá (B), každá v rozsahu 0 až 255. Tomu se říká model RGB. HEX je jen jiný zápis přesně téže informace: každá ze tří složek se zapíše dvojicí šestnáctkových číslic (0–9 a A–F), takže 00 znamená 0 a ff znamená 255. Kód #2563eb se tedy skládá z 25 (červená = 37), 63 (zelená = 99) a eb (modrá = 235).
Nástroj funguje obousměrně. Když upravíte pole HEX, rozdělí kód na tři dvojice a každou převede na desítkové číslo 0–255. Když změníte některé z polí R, G, B, provede opačný převod: každé číslo zapíše jako dvě šestnáctkové číslice a spojí je do jednoho kódu #RRGGBB. Podporuje i zkrácený tříznakový zápis — #f0c se automaticky rozvine na #ff00cc. Barevný čtvereček pod poli vždy ukáže výslednou barvu.
Jak převodník barev použít
- Do pole HEX napište kód barvy (s křížkem i bez něj, šest nebo tři znaky).
- Hodnoty R, G, B a náhled se přepočítají okamžitě.
- Opačně: přepište některé z čísel R, G, B a pole HEX se dopočítá samo.
- Výsledný HEX kód nebo trojici RGB zkopírujte do svého CSS, grafického editoru nebo dokumentu.
Příklad převodu:
| HEX | R | G | B |
|---|---|---|---|
| #2563eb | 37 | 99 | 235 |
| #ffffff | 255 | 255 | 255 |
| #000000 | 0 | 0 | 0 |
| #f0c → #ff00cc | 255 | 0 | 204 |
K čemu se převodník barev hodí
Nejčastěji ho využijí weboví vývojáři a kodéři: CSS umí obojí zápis, ale barevný výběr v grafickém programu často vydá jen RGB, zatímco kód potřebujete v HEX (nebo naopak). Hodí se také grafikům při sjednocování palety, tvůrcům e-mailových šablon, kde je HEX standardem, i studentům, kteří se učí, jak se barvy na obrazovce skládají. Protože celý výpočet běží lokálně ve vašem prohlížeči, můžete ho použít i offline a žádná zadaná barva se nikam neodesílá.
Je to jen dvojí zápis téže barvy. RGB uvádí tři čísla 0–255 pro červenou, zelenou a modrou složku. HEX zapisuje stejné tři hodnoty šestnáctkově jako šesticiferný kód #RRGGBB. Obojí popisuje naprosto stejnou barvu. Ne. Nástroj křížek sám doplní i odstraní, takže <code>2563eb</code> i <code>#2563eb</code> fungují stejně. Ve výsledku HEX se křížek zobrazuje, protože tak se kód píše v CSS a HTML. Je to zkrácený zápis, kde se každá číslice zdvojí. <code>#f0c</code> tedy odpovídá <code>#ff00cc</code>. Funguje jen tehdy, když jde každou složku zapsat jednou opakovanou číslicí; jinak je nutný plný šestiznakový kód. Ne. Převádí pouze základní barvu ve formátu RGB a šestiznakový HEX. Osmiznakový HEX s průhledností (#RRGGBBAA) ani zápis RGBA tento nástroj nepřevádí. Nástroj přepočítá RGB až ve chvíli, kdy je HEX platný — tedy přesně tři nebo šest znaků z rozsahu 0–9 a A–F. Dokud píšete a kód je rozepsaný, hodnoty počkají a nezobrazí nesmysl. Ne. <code>#FF00CC</code> i <code>#ff00cc</code> znamenají tutéž barvu. Nástroj přijímá velká i malá písmena; ve výsledku obvykle vypisuje malá. Ne. Celý převod probíhá výhradně ve vašem prohlížeči pomocí JavaScriptu. Nic se nenahrává, neukládá ani neodesílá a nástroj funguje i bez připojení k internetu. V CSS můžete použít oba zápisy: buď HEX jako <code>color:#2563eb</code>, nebo RGB jako <code>color:rgb(37, 99, 235)</code>. Zkopírujte si ten, který se vám hodí.Časté dotazy
Jaký je rozdíl mezi HEX a RGB?
Musím psát křížek # před HEX kódem?
Co znamená tříznakový HEX jako #f0c?
Podporuje nástroj průhlednost (alfa kanál)?
Proč se mi po zadání neúplného HEX kódu nic nezměnilo?
Jsou písmena v HEX kódu citlivá na velikost?
Odesílá se moje barva někam na server?
Jak dostanu barvu do CSS?
Zdroje a standardy
📅 Naposledy aktualizováno: 16. 7. 2026