Co tato stránka dělá a čím se liší
Na této stránce zadáte tři čísla – červenou, zelenou a modrou složku v rozsahu 0 až 255 – a okamžitě uvidíte odpovídající hexadecimální barevný kód, například #1E90FF. Nástroj zároveň zobrazí barvu vizuálně a automaticky aktualizuje všechny ostatní podporované barevné formáty: HSL, HSV, CMYK, LAB a také klasický výběr barvy. Nemusíte nikam klikat ani mačkat tlačítko „převést“ – jakákoli změna v jednom poli se okamžitě projeví ve všech ostatních.
Zásadní rozdíl oproti jiným převodníkům je v tom, že RGB (desítkové, tři kanály 0–255) a hex (šestnáctkové, šestimístný kód) pracují ve stejném barevném prostoru – sRGB, který používají prakticky všechny běžné displeje. Proto při převodu nedochází k žádnému ořezání ani přiblížení barev. Hex výstup vždy začíná znakem # a pokud nepoužijete osmimístný tvar s alpha kanálem, nese informaci pouze o barvě, nikoli o průhlednosti. Výsledný hex kód je vždy šestimístný, protože každá hodnota 0–255 se mapuje na dvě hexadecimální číslice.
Matematika převodu RGB na hex
Samotný převod je čistě aritmetický a je definován barevným prostorem sRGB. Každá z hodnot R, G, B je celé číslo od 0 do 255. Chcete-li ji převést na hexadecimální tvar, vydělíte ji šestnácti. Celočíselný podíl udává první hex číslici (0–15, tedy 0–F), zbytek po dělení udává druhou hex číslici (rovněž 0–15, tedy 0–F). Výsledek zapíšete jako dvě číslice bez mezer.
Příklad: hodnota 79 se vydělí 16 → podíl 4, zbytek 15 → hexadecimálně 4F. Hodnota 70 → podíl 4, zbytek 6 → 46. Hodnota 229 → podíl 14, zbytek 5 → E5. Výsledný hex kód je pak #4F46E5. Stejný postup platí pro jakoukoli kombinaci: červená 0 dává 00, zelená 255 dává FF, modrá 128 dává 80. Protože je rozsah 0–255 přesně 256 hodnot (2⁸) a každá hex číslice reprezentuje 16 hodnot (2⁴), vystačíte vždy přesně na dvě číslice na kanál.
Všimněte si, že převod je zcela reverzibilní – z hex kódu #1E90FF získáte zpět R=30, G=144, B=255. V tomto nástroji to funguje obousměrně: upravíte-li hex pole, okamžitě se přepočítají RGB i všechny ostatní formáty.
Šest nebo tři znaky? Specifika hex kódu
Hexadecimální zápis barev v CSS a designových nástrojích má několik podob. Plný šestimístný kód (#RRGGBB) je standard a tento nástroj jej vždy generuje. Existuje také zkrácený tříznakový tvar (#RGB), který je platný, pokud se každá dvojice číslic skládá ze dvou stejných znaků – například #AABBCC lze zapsat jako #ABC. Tento nástroj tříznakový vstup akceptuje a interně ho rozšíří na plný šestimístný tvar. Pokud tedy zadáte #abc, nástroj jej převede na #AABBCC a podle toho upraví i RGB hodnoty.
Důležité je, že nástroj tříznakový tvar nikdy sám negeneruje – výstup je vždy šestimístný. Je to proto, že ne všechny barvy lze tříznakovou zkratkou vyjádřit (např. #1E90FF nemá stejné číslice v párech). Pokud by nástroj automaticky zkracoval, mohl by uživatele zmást, protože by ztratil informaci o přesné barvě.
Co se týče velikosti písmen, hex kód není case-sensitive – #1e90FF, #1E90ff i #1E90FF znamenají stejnou barvu. Nástroj standardně zobrazuje velká písmena, protože jsou v CSS běžnější, ale interně zpracuje jakýkoli tvar.
Barevný prostor sRGB a bezztrátový převod
Všechny barvy, které zadáte jako RGB triádu v rozsahu 0–255, leží v barevném prostoru sRGB. Stejný prostor používají monitory, televize, mobilní telefony a naprostá většina webových prohlížečů. Hex kód je jen jiný zápis téže barvy – matematicky jde o identické mapování. Proto při převodu mezi RGB a hex nedochází k žádné ztrátě informace ani k ořezání gamutu.
Tato vlastnost odlišuje RGB→hex převod od převodu například RGB→CMYK. U CMYK byste museli počítat s tiskovým profilem, papírem a rozdílným gamutem (CMYK je subtraktivní, RGB aditivní). Tady žádný takový problém není. Pokud zadáte R=255, G=0, B=0, dostanete #FF0000 bez ohledu na to, jaký monitor používáte – barva je definována stejně.
Praktický důsledek: pokud pracujete výhradně pro obrazovku (web, aplikace, digitální design), můžete RGB a hex zaměňovat zcela volně. Nástroj je v tomto smyslu jen převodník zápisu, nikoli konvertor barevných prostorů. To je důležité pochopit – nemění se barva, mění se pouze způsob, jak ji zapisujete.
Praktické použití v CSS a designu
Front-end vývojáři denně používají hex kódy v CSS pro vlastnosti jako color, background-color, border-color nebo box-shadow. Když dostanete ze zdrojového souboru (Photoshop, GIMP, Figma) hodnoty RGB jako 79, 70, 229, potřebujete je rychle převést na #4F46E5, abyste je mohli vložit do stylopisu. Tento nástroj to dělá okamžitě a zároveň vám ukáže, jak barva vypadá.
Pro UI/UX designéry je klíčové, že hex kód je univerzální jazyk mezi návrhovými nástroji a kódem. Většina designových systémů (Material Design, Bootstrap, Tailwind) používá hex hodnoty. Pokud například prototypujete v Sketchu a exportujete prvky jako RGB trojice, tento nástroj je převede do formátu, který můžete rovnou použít v Tailwind třídách nebo v CSS proměnných.
Studenti a hobbyisté ocení, že si mohou vyzkoušet, jak spolu souvisí desítkové a šestnáctkové vyjádření barev. Stačí zadat libovolnou RGB kombinaci a sledovat, jak se mění hex kód a naopak. Je to přímá ukázka principu aditivního míchání barev – čím vyšší hodnota kanálu, tím více světla dané barvy přidáváte.
Vstupní formáty a ošetření chyb
RGB hodnoty zadáváte jako tři čísla oddělená čárkou nebo mezerou. Nástroj akceptuje oba způsoby: 79,70,229 i 79 70 229. Pokud použijete jiný separátor (např. středník nebo lomítko), nástroj vstup nerozpozná a zobrazí chybovou hlášku. Stejně tak pokud zadáte číslo mimo rozsah 0–255 (např. 300 nebo -5), nebo pokud zadáte méně či více než tři čísla, objeví se zpráva: „Enter RGB as three numbers 0–255, like 79, 70, 229.“
Nástroj neumožňuje zadávat RGB s desetinnou čárkou – očekává celá čísla. Je to dáno tím, že hex kód pracuje s celočíselnými hodnotami a v CSS se desetinné RGB hodnoty standardně nepoužívají (existuje sice funkce rgb() s desetinnými čísly, ale ta převádí na jiný formát). Pokud byste přesto potřebovali zadat desetinnou hodnotu, museli byste ji nejprve zaokrouhlit.
Všechny zpracování probíhá čistě ve vašem prohlížeči – žádná data se neodesílají na server. Můžete tedy používat nástroj i offline nebo na citlivých datech bez obav o soukromí.
FAQ
Proč nástroj vždy zobrazuje šestimístný hex kód, i když by bylo možné použít tříznakovou zkratku?
Nástroj negeneruje tříznakovou zkratku automaticky, protože ne všechny barvy ji umožňují. Tříznakový tvar je platný pouze tehdy, když se každá dvojice hex číslic skládá ze dvou stejných znaků (např. #AABBCC → #ABC). U barev jako #1E90FF to možné není, protože dvojice jsou různé. Generováním plného šestimístného kódu eliminujeme riziko ztráty informace.
Co se stane, když zadám číslo větší než 255?
Nástroj zobrazí chybovou hlášku: „Enter RGB as three numbers 0–255, like 79, 70, 229.“ Hodnoty mimo rozsah nejsou akceptovány, protože by neodpovídaly standardnímu sRGB rozsahu. Pokud byste například zadali 300, nástroj by to vyhodnotil jako neplatný vstup a žádný hex kód by se nevygeneroval.
Mohu pomocí tohoto nástroje převést hex kód zpět na RGB?
Ano, stačí zadat hex kód do pole pro hex (např. #4F46E5 nebo #abc) a nástroj okamžitě přepočítá RGB hodnoty a všechny ostatní formáty. Funguje to obousměrně – upravíte-li jakékoli pole, všechna ostatní se automaticky aktualizují.
Proč hex kód neobsahuje průhlednost (alpha kanál)?
Tento nástroj pracuje s klasickým šestimístným hex kódem, který alpha kanál neobsahuje. Pokud potřebujete průhlednost, museli byste použít osmimístný hex tvar (např. #4F46E580), který nástroj nepodporuje. Pro práci s alpha kanálem byste měli použít jiný nástroj na této platformě, který se věnuje RGBA nebo hex s alpha.
Jaký je rozdíl mezi barevnými modely RGB a CMYK a proč tento nástroj používá pouze sRGB?
RGB je aditivní model (míchání světla) používaný pro obrazovky. CMYK je subtraktivní model (míchání inkoustu) pro tisk. Protože hex kód je definován v rámci sRGB, převod mezi RGB a hex je bezztrátový a probíhá v témže prostoru. Při převodu RGB→CMYK byste museli počítat s tiskovým profilem a papírem, což je mimo rozsah tohoto nástroje.
Je možné zadat RGB hodnoty s desetinnou čárkou?
Ne, nástroj očekává celá čísla v rozsahu 0–255. Desetinné hodnoty (např. 79,5) nejsou akceptovány. Pokud potřebujete pracovat s desetinnými RGB hodnotami, musíte je nejprve zaokrouhlit na nejbližší celé číslo.