Ako funguje prevod RGB na hex – referenčný článok
Na tejto stránke zadáte tri čísla pre červenú, zelenú a modrú zložku (každú v rozsahu 0–255) a okamžite uvidíte zodpovedajúci hexadecimálny farebný kód v tvare #1E90FF. Nástroj zároveň zobrazí samotnú farbu a aktualizuje všetky ostatné podporované formáty (HSL, HSV, CMYK, LAB a farebný výber). Môžete tak hex kód priamo skopírovať a použiť v CSS, dizajnovom softvéri alebo akomkoľvek workflow, kde sa hex očakáva.
Čím sa táto stránka líši od iných konvertorov: Prevod prebieha z RGB (desiatkový, tri kanály 0–255) na hex (šesťmiestny, prípadne trojmiestny skrátený). Oba formáty reprezentujú presne ten istý farebný gamut – sRGB pracovný priestor používaný väčšinou displejov – takže nedochádza k žiadnemu orezaniu gamutu ani k priblíženiu. Hex výstup vždy začína znakom # a pokiaľ nepoužijete osemmiestny tvar, nenesie žiadny alfa kanál. RGB vstup očakáva tri čísla oddelené čiarkami alebo medzerami (napr. 79, 70, 229), výsledný hex kód je vždy šesťmiestny (napr. #4F46E5), pretože každá hodnota 0–255 sa mapuje na dvojicu hexadecimálnych číslic.
RGB farebný model a stupnica 0 až 255
RGB je aditívny farebný model – farba vzniká sčítaním červeného, zeleného a modrého svetla. Každý kanál je reprezentovaný celým číslom od 0 po 255, čo zodpovedá 8 bitom na kanál (2⁸ = 256 úrovní). Nula znamená, že svetlo v danom kanále úplne chýba, 255 znamená maximálnu intenzitu, ktorú bežný monitor dokáže zobraziť. Kombináciou troch 8-bitových hodnôt získate 16 777 216 možných farieb (256³). Tento rozsah bol historicky zvolený kvôli kompatibilite s 8-bitovou hardvérovou reprezentáciou farieb v počítačovej grafike a dodnes zostáva štandardom pre sRGB.
Keď zadáte napríklad 255, 0, 0, získate čistú červenú. 0, 255, 0 je čistá zelená, 0, 0, 255 čistá modrá. Rovnaké hodnoty vo všetkých troch kanáloch (napr. 128, 128, 128) dávajú odtiene sivej. Ak je aspoň jeden kanál mimo intervalu 0–255 alebo vstup nie je v očakávanom tvare, nástroj zobrazí presné chybové hlásenie: „Zadajte RGB ako tri čísla 0–255, napríklad 79, 70, 229.“
Štruktúra hexadecimálneho farebného kódu
Hexadecimálny kód farby v CSS má tvar #RRGGBB, kde RR, GG a BB sú dvojice hexadecimálnych číslic (0–9, A–F). Každá dvojica reprezentuje intenzitu jedného kanála v šestnástkovej sústave. Napríklad hodnota 255 (desiatkovo) sa v hex zapíše ako FF – pretože 15 × 16 + 15 = 255. Hodnota 0 je 00, hodnota 128 je 80 atď. Hexadecimálne číslice nie sú citlivé na veľkosť písmen: #ff0000 aj #FF0000 znamenajú červenú.
Nástroj automaticky nezlučuje páry do trojmiestneho skráteného tvaru (napr. #AABBCC zostáva ako #AABBCC, nie #ABC). Vstupné pole pre hex však trojmiestnu skratku akceptuje – napríklad #abc nástroj interne rozšíri na #AABBCC. Táto funkcionalita je užitočná pri rýchlom zadávaní, no treba pamätať, že skratka funguje len vtedy, keď sú obe číslice v každej dvojici rovnaké. Inak by skratka nebola jednoznačná.
Ako prebieha konverzia – matematika na pozadí
Prevod z desiatkovej hodnoty kanála na hexadecimálnu dvojicu je priamočiary. Vezmime červenú zložku 79. Vydelíme 79 číslom 16: celočíselný podiel je 4, zvyšok je 15. V hex sústave je číslo 4 reprezentované ako 4, číslo 15 ako F. Výsledná dvojica je 4F. Rovnaký postup aplikujeme na zelenú 70: 70 / 16 = 4, zvyšok 6 → dvojica 46. Modrá 229: 229 / 16 = 14, zvyšok 5 → v hex 14 je E, 5 je 5, dvojica E5. Celý hex kód teda znie #4F46E5.
Tento výpočet je čisto mechanický a presne opačný prevod (hex na RGB) funguje rovnako: každej hexadecimálnej číslici priradíme desiatkovú hodnotu (0–15), prvú číslicu vynásobíme 16 a pripočítame druhú. Preto je konverzia medzi RGB a hex stratovo reverzibilná – ak prevediete RGB na hex a naspäť, dostanete pôvodné hodnoty bez akejkoľvek straty presnosti.
sRGB pracovný priestor – prečo nedochádza k orezaniu
Oba formáty – RGB (tri 8-bitové kanály) aj hex (šesť hexadecimálnych číslic) – pracujú v tom istom farebnom priestore, konkrétne sRGB. sRGB je štandardný priestor pre web, bežné monitory a väčšinu digitálnych obrázkov. Jeho gamut (rozsah reprodukovateľných farieb) je presne vymedzený tým, čo dokáže vyjadriť trojica 8-bitových hodnôt. Keďže hex kód je len iný zápis tých istých hodnôt, nikdy nedochádza k situácii, že by farba „vypadla“ z gamutu alebo sa musela aproximovať.
To je dôležitý rozdiel oproti prevodom medzi RGB a CMYK, kde sa farby často orezávajú, pretože tlačové profily majú iný gamut. Pri prevode RGB ↔ hex k žiadnemu orezaniu nedochádza – je to čisto zmena číselnej sústavy.
Použitie hex kódov v CSS a dizajne
Hexadecimálne kódy sú v CSS najrozšírenejším spôsobom zápisu farieb. Používajú sa vo vlastnostiach ako color, background-color, border-color a mnohých ďalších. Napríklad:
body { background-color: #4F46E5; }
a { color: #FF6600; }
Okrem šesťmiestneho tvaru pozná CSS aj osemmiestny hex (napr. #FF660088), kde posledná dvojica reprezentuje alfa kanál (priehľadnosť) v rozsahu 00 (úplne priehľadné) až FF (úplne nepriehľadné). Tento nástroj však štandardne pracuje s nepriehľadnými farbami – šesťmiestny hex nenesie alfa informáciu.
Tip pre vývojárov: Ak potrebujete farbu s priehľadnosťou, môžete ju zadať ako osemmiestny hex priamo do hex vstupného poľa nástroja. Ostatné formáty sa vtedy aktualizujú, pričom RGB zostane bez alfa (ak nie je podporovaný, ako napr. HSL s alfa). Pre bežné webové použitie však šesťmiestny hex úplne postačuje.
Vstupné formáty a práca s chybami
RGB vstup akceptuje tri čísla oddelené čiarkami a prípadnými medzerami: 79, 70, 229, 79,70,229, 79 70 229 – všetky tvary fungujú. Vodiace nuly sú povolené, napr. 079, 070, 229 sa interpretujú rovnako. Ak zadáte hodnotu mimo rozsahu 0–255, nástroj zobrazí chybu. To isté platí, ak vložíte text, ktorý nie je číslo, alebo akýkoľvek iný neplatný formát.
Dôležité: neexistuje tlačidlo „konvertovať“. Každá zmena v ktoromkoľvek poli (RGB, hex, HSL, atď.) okamžite aktualizuje všetky ostatné polia. Toto správanie je zámerné – šetrí čas a zabraňuje zbytočným klikom. Všetky výpočty prebiehajú priamo v prehliadači používateľa; na server sa neposiela nič.
Kto ocení tento nástroj
- Front-end vývojári – pri písaní CSS alebo inline štýlov, ktoré vyžadujú hex kódy.
- UI/UX dizajnéri – keď dostanú farebné špecifikácie ako RGB triple (napr. z Photoshopu) a potrebujú ich previesť pre odovzdávanie dizajnu alebo pre kód.
- Grafickí dizajnéri pracujúci s webovými aktívami – chcú zaistiť konzistenciu farieb medzi RGB prototypmi a finálnymi hex implementáciami.
- Študenti a nadšenci – učia sa, ako fungujú digitálne farby a ako prechádzať medzi desiatkovou a hexadecimálnou reprezentáciou.
- Každý, kto používa nástroje na výber farieb (Photoshop, GIMP, dev tools) – tieto nástroje často vracajú RGB hodnoty a potrebujete zodpovedajúci hex kód.
Často kladené otázky (FAQ)
Prečo hex kód nie je automaticky v trojmiestnom skrátenom tvare?
Trojmiestny tvar (#RGB) je len skratka pre páry s rovnakými číslicami (#RRGGBB), napr. #FF0033 sa dá skrátiť na #F03. Nástroj ho však nezobrazuje automaticky, pretože šesťmiestny zápis je jednoznačný a bežne očakávaný v CSS. Ak by ste chceli skratku, môžete ju zadať do hex poľa – nástroj ju rozšíri.
Môžem zadať desatinné čísla pre RGB kanály? Nie. RGB hodnoty musia byť celé čísla v rozsahu 0–255. Desatinné miesta nie sú podporované. Ak zadáte „79.5“, nástroj zobrazí chybu.
Je konverzia RGB ↔ hex vratná? Áno, je stratovo reverzibilná. Pretože oba formáty používajú rovnaký farebný priestor (sRGB) a rovnaké 8-bitové úrovne, môžete previesť RGB na hex a naspäť a získate presne tie isté hodnoty.
Čo sa stane, keď zadám hodnotu mimo 0–255? Zobrazí sa chybové hlásenie: „Zadajte RGB ako tri čísla 0–255, napríklad 79, 70, 229.“ Žiadna farba sa nezmení, kým nezadáte platné hodnoty.
Prečo hex kód neobsahuje alfa kanál?
Šesťmiestny hex je určený pre nepriehľadné farby. Alfa kanál (priehľadnosť) je v CSS riešený dodatočne – buď pomocou funkcie rgba(), alebo osemmiestnym hex kódom (napr. #FF660088). Tento nástroj pracuje primárne so šesťmiestnym hexom; ak chcete alfa, zadajte osemmiestny hex priamo do hex poľa.
Prečo farba na monitore vyzerá inak ako na tlači? Monitor používa aditívny farebný model (RGB), tlačiareň subtraktívny (CMYK). Hex kód je určený výhradne pre digitálne zobrazenie. Pre tlač je potrebné farbu previesť do CMYK profilu, čo je samostatný krok, ktorý tento nástroj nerobí.