Konverzija iz RGB u hex: kako funkcioniše i zašto je precizna
Ova stranica pretvara tri decimalne vrijednosti (crvena, zelena, plava, svaka u rasponu 0–255) u heksadecimalni kod boje (npr. #1E90FF) i prikazuje tu boju vizuelno. Razlika u odnosu na slične alate je u tome što RGB i hex predstavljaju potpuno isti gamut boja – sRGB radni prostor koji koristi većina monitora. Nema odsjecanja niti aproksimacija: konverzija je egzaktna i reverzibilna. Svaki unos 0–255 direktno se preslikava u dvoznamenkasti heksadecimalni par, pa hex kod uvijek ima šest cifara (npr. #4F46E5).
Alat ne pretvara samo u jednu vrijednost – istovremeno ažurira polja za HSL, HSV, CMYK, LAB i ugrađeni birač boja. Nema dugmeta za konverziju; uređivanje bilo kojeg formata odmah mijenja sve ostale. Sve obrađuje vaš pretraživač – ništa ne odlazi na server.
Unos vrijednosti i formatiranje – koja pravila treba znati
RGB vrijednosti unosite kao tri broja odvojena zarezom ili razmakom. Primjer: 79, 70, 229 ili 79 70 229. Alat očekuje tačno tri broja, svaki u rasponu 0–255. Ako unesete bilo šta izvan tog raspona, ili format koji ne može parsirati, pojavljuje se poruka greške:
“Unesite RGB kao tri broja 0–255, poput 79, 70, 229.”
Obratite pažnju: hex polje za unos prihvata i trocifrenu stenografiju (npr. #abc), koju alat interno proširuje na šest cifara (#aabbcc). Međutim, izlazni hex kod uvijek ostaje u šestocifrenom obliku – ne dolazi do automatskog skraćivanja. To znači da ako unesete #abc, vidjećete #aabbcc, a ne #abc.
Hex kod se uvijek prikazuje sa početnom #. Velika i mala slova u heksadecimalnim znamenkama su tehnički dozvoljena (CSS ne razlikuje #ABC i #abc), ali alat ih ispisuje standardno – najčešće velikim slovima radi čitljivosti.
Matematička osnova: od decimalnih brojeva do heksadecimalnog para
Heksadecimalni sistem koristi bazu 16, a ne bazu 10. Svaki kanal boje (crveni, zeleni, plavi) u RGB-u ima 256 mogućih vrijednosti (0–255). Da bismo dekadsku vrijednost pretvorili u dvije heksadecimalne cifre, koristimo jednostavan postupak:
- Broj podijelimo sa 16.
- Cjelobrojni količnik daje prvu heksadecimalnu cifru (značajniju).
- Ostatak daje drugu cifru (manje značajnu).
Primjer: Crveni kanal iznosi 79.
79 ÷ 16 = 4 (cjelobrojni količnik)
79 – (4 × 16) = 79 – 64 = 15 (ostatak)
U heksadecimalnom sistemu, 4 se zapisuje kao 4, a 15 kao F. Zato je crveni par 4F.
Isti postupak za zeleni kanal 70:
70 ÷ 16 = 4 (ostatak 6) → 46
Za plavi kanal 229:
229 ÷ 16 = 14 (ostatak 5)
14 u hexu je E, 5 ostaje 5 → E5
Povezujemo sva tri para: 4F 46 E5, dodajemo # i dobijamo #4F46E5. To je ekvivalent unosu 79, 70, 229.
Donja tabela prikazuje preslikavanje prvih 16 brojeva (0–15) u heksadecimalne cifre:
| Decimalni | Heksadecimalni |
|---|---|
| 0 | 0 |
| 1 | 1 |
| 2 | 2 |
| 3 | 3 |
| 4 | 4 |
| 5 | 5 |
| 6 | 6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
| 10 | A |
| 11 | B |
| 12 | C |
| 13 | D |
| 14 | E |
| 15 | F |
Kada je vrijednost 255, količnik je 15 (F), a ostatak 15 (F) – dobijamo FF. Kada je 0, obje cifre su nula – 00. Odatle potiču #000000 (crna) i #FFFFFF (bijela).
RGB i hex dijele isti prostor boja (sRGB) – nema gubitka
Oba formata rade unutar sRGB prostora – standardnog aditivnog modela koji koriste ekrani, kamere i većina web pregledača. Zato je konverzija između RGB i hex savršeno očuvana: svaka kombinacija tri broja 0–255 ima tačno jednu šestocifrenu heksadecimalnu reprezentaciju i obrnuto.
Ovo nije slučaj kod konverzije u CMYK (subtraktivni model za štampu) ili izvan gamuta sRGB, gdje dolazi do klipinga. Alat ne vrši nikakva prilagođavanja ni aproksimacije za hex izlaz – on je samo drugačiji zapis iste boje.
Iz praktične perspektive, ovo znači:
- Ako imate RGB vrijednost iz Photoshopa, GIMP-a ili DevTools-a, možete je bezbrižno konvertovati u hex i koristiti u CSS-u.
- Ako kasnije isti hex kod vratite u RGB, dobićete identična tri broja.
- Nema rizika od smanjenja kvaliteta ili promjene nijanse.
Kratke napomene o korištenju hex kodova u CSS-u
U CSS-u, heksadecimalne boje se koriste u svojstvima kao što su color i background-color. Sintaksa je jednostavna:
.element {
color: #4F46E5;
background-color: #1E90FF;
}
Šestocifreni oblik je najčešći, ali postoji i osmocifreni (npr. #1E90FF80) koji dodaje alfa kanal (prozirnost). Ovaj alat trenutno ne generiše osmocifreni hex – izostavlja alfa kanal, zbog čega je izlaz uvijek šest cifara.
Što se tiče veličine slova, CSS ne pravi razliku – #4F46E5, #4f46e5 i #4F46e5 su validni. Ipak, praksa je da se koristi velika slova radi čitljivosti, posebno kada se piše pored ostalog koda.
Trocifrena stenografija (#abc) je ekvivalentna #aabbcc, ali samo kada svaku od tri cifre možemo duplirati. Alat prihvata takav unos, ali ga uvijek proširi na šest cifara. Ako unesete #F00, dobićete #FF0000 – čista crvena.
Često postavljana pitanja (FAQ)
Zašto hex kod uvijek ima šest cifara, a ne tri?
Alat uvijek prikazuje punih šest cifara jer svaki kanal (0–255) zahtijeva dvije heksadecimalne cifre. Trocifrena stenografija je moguća samo kada svaki par ima jednake cifre (npr. #aabbcc → #abc), ali alat ne skraćuje automatski. Unos tri broja poput 17, 34, 51 daje #112233, a ne #123.
Mogu li unijeti RGB vrijednosti iznad 255 ili ispod 0?
Ne – alat će prikazati poruku greške: “Unesite RGB kao tri broja 0–255, poput 79, 70, 229.” Radni opseg je fiksan jer sRGB ne definiše vrijednosti van tih granica.
Šta se dešava ako unesem samo jedan ili dva broja?
Alat ne može parsirati nepotpun unos i prikazuje istu poruku greške. Potrebna su tačno tri broja, odvojena zarezom ili razmakom.
Da li alat podržava osmocifrene hex kodove sa alfa kanalom?
Ne, u ovom trenutku. RGB ulaz ne sadrži alfa kanal, pa hex izlaz uvijek ima šest cifara. Ako trebate prozirnost, koristite CSS rgba() funkciju ili osmocifreni hex od drugog izvora.
Kako da budem siguran da je boja koju vidim na ekranu tačna?
Alat prikazuje tačnu boju unutar mogućnosti vašeg monitora i profila boje (sRGB). Ako vaš ekran nije kalibriran, boje mogu izgledati drugačije, ali sama numerička konverzija je matematički egzaktna. Za štampu, uvijek provjerite izlaz u CMYK prostoru.
Mogu li kopirati hex kod direktno iz alata?
Da – izlazno polje je tekstualno, možete ga selektovati i kopirati (Ctrl+C). Nema dodatnih koraka.