Pretvarač iz HEX u RGB

Pretvorba HEX u RGB – kako alat radi i zašto je koristan

Unosom heksadecimalnog koda boje – primjerice #4f46e5, abc ili #1E90FF – alat trenutačno izračunava odgovarajuće RGB vrijednosti (tri broja između 0 i 255) koje su potrebne za prikaz na zaslonu. Rezultat je RGB trojka prikazana zajedno s ostalim formatima boje (HSL, HSV, CMYK, LAB), spremna za kopiranje u kôd ili dizajnerski softver. Za razliku od općih pretvarača boja, ova je stranica specijalizirana isključivo za HEX‑u‑RGB smjer: prevodi sažeti heksadecimalni zapis u numeričke kanale koje monitori izravno koriste. Heksadecimalni kodovi su u biti kratica za ista tri 8‑bitna kanala, a ovdje se ta veza raščlanjuje na deterministički način – bez zaokruživanja, bez proširivanja na alfa kanal, i samo za šestoznamenkaste ili troznamenkaste HEX kodove.

Kako se matematički odvija pretvorba

HEX kod boje temelji se na brojevnom sustavu s bazom 16. Svaki kanal (crveni, zeleni, plavi) predstavljen je parom heksadecimalnih znamenki (00–FF). Budući da 16² = 256, svaki par daje cijeli broj od 0 do 255. Pretvorba slijedi formulu:

R = (prva znamenka × 16) + druga znamenka

Na primjer, za #4f46e5:

• Crveni kanal: 4f → (4 × 16) + 15 = 64 + 15 = 79
• Zeleni kanal: 46 → (4 × 16) + 6 = 64 + 6 = 70
• Plavi kanal: e5 → (14 × 16) + 5 = 224 + 5 = 229

Rezultat je RGB(79, 70, 229). Postupak je potpuno reverzibilan – iz RGB vrijednosti možete dobiti isti HEX kod i obratno, bez gubitka informacija jer oba formata opisuju istu 256⁺ razina po kanalu.

Troznamenkasta kratica poput #abc automatski se proširuje udvostručavanjem svake znamenke: #abc postaje #aabbcc. To je standardni mehanizam u CSS‑u i alatu, a omogućuje brži unos kada su obje znamenke u paru jednake. Primjer: #f80 → #ff8800 → RGB(255, 136, 0).

Sljedeća tablica prikazuje nekoliko uobičajenih pretvorbi za ilustraciju:

Sve vrijednosti su egzaktne – nema zaokruživanja jer je pretvorba iz baze 16 u bazu 10 jednoznačna.

Pravila unosa i rubni slučajevi

Alat prihvaća isključivo šestoznamenkaste (#RRGGBB) ili troznamenkaste (#RGB) heksadecimalne kodove. Znak # je opcionalan – možete unijeti 4f46e5 ili #4f46e5. Ako kod ne odgovara očekivanom formatu (primjerice sadrži osam znamenki, slova izvan 0–9 i A–F, ili neparan broj znamenki), alat prikazuje poruku:
"Unesite heksadecimalnu boju poput #4f46e5 ili #abc."

Osamznamenkasti HEX kodovi koji uključuju alfa kanal (npr. #4f46e580) nisu podržani na ovoj stranici – namjena je isključivo pretvorba bez prozirnosti. Ako vam treba RGBA, trebate koristiti drugi alat.

Uređivanje bilo kojeg polja (HEX, RGB, HSL, HSV, CMYK, LAB) trenutačno ažurira sva ostala polja. To znači da možete upisati HEX vrijednost i odmah vidjeti pripadajuće HSL ili CMYK vrijednosti, ili obratno – promijenite RGB klizač i HEX se automatski preračunava. Sve pretvorbe izvode se izravno u pregledniku; nikakvi podaci ne napuštaju vaše računalo.

Tko najviše koristi HEX‑u‑RGB pretvorbu

• Front‑end developerima koji CSS HEX kodove trebaju pretvoriti u RGB vrijednosti za JavaScript, canvas API ili inline stilove koji zahtijevaju numeričke kanale. Na primjer, funkcija rgba(r, g, b, a) u JavaScriptu očekuje brojeve, a ne heksadecimalne nizove.
• Dizajnerima koji iz brand smjernica dobivaju boje kao HEX (npr. #336699) i moraju ih unijeti u alate poput Adobe XD, Figma ili Photoshop koji nude RGB klizače. Izravnim kopiranjem RGB trojke izbjegava se ručno preračunavanje i moguća pogreška.
• Game developerima i digitalnim umjetnicima koji matematički manipuliraju bojama – miješanje kanala, interpolacija ili izračun prosječne boje zahtijeva brojeve u rasponu 0–255, a ne heksadecimalni zapis.
• Studentima i svima koji uče kako boje funkcioniraju na zaslonu – odnos između HEX koda i aditivnog RGB modela postaje očit kada vide kako svaki par znamenki odgovara jednoj komponenti boje.

HEX i RGB u CSS‑u – kada što koristiti

CSS nudi više načina za zadavanje boja: color: #ff6600, color: rgb(255, 102, 0), color: hsl(24, 100%, 50%). Preglednik interno sve pretvara u iste vrijednosti kanala, ali postoje praktične razlike:

• HEX je sažetiji – šest znakova (ili tri za kratice) opisuje boju bez dodatnih zagrada.
• RGB je čitljiviji kada trebate vidjeti relativne udjele crvene, zelene i plave. Na primjer, rgb(128, 128, 128) odmah sugerira sivu boju (jednaki kanali), dok #808080 to ne otkriva tako lako.
• U programskom kodu (JavaScript, canvas) često trebate RGB vrijednosti kao niz brojeva za daljnju obradu.

Starije inačice CSS‑a (CSS2) nisu podržavale heksadecimalne kratice od tri znaka, no danas ih svi moderni preglednici ispravno tumače. Alat na ovoj stranici automatski proširuje troznamenkaste kodove na šestoznamenkaste prije pretvorbe, čime se osigurava dosljednost.

Teorija boja i pristupačnost kroz HEX i RGB

Aditivni model boje (RGB) koji koriste monitori temelji se na zbrajanju svjetlosti. Kada su sva tri kanala na 0, rezultat je crna; kada su na 255, dobiva se bijela. HEKSadecimalni zapis to sažima: #000000 = crna, #ffffff = bijela.

Razumijevanje veze između HEX i RGB pomaže kod izračuna kontrasta. Web Content Accessibility Guidelines (WCAG) 2.1 zahtijevaju minimalne omjere kontrasta između teksta i pozadine. Ti se omjeri izračunavaju iz relativne luminacije, koja se dobiva iz RGB kanala pomoću formula s težinskim faktorima. Ako imate HEX vrijednost, prvi korak je pretvorba u RGB, što ovaj alat izvodi automatski.

Na primjer, za provjeru kontrasta između #4f46e5 (RGB 79, 70, 229) i bijele pozadine možete odmah uzeti RGB trojku i uključiti je u kalkulator kontrasta. Bez pretvorbe morali biste ručno računati heksadecimalne parove.

Česta pitanja

1. Je li razlika između HEX koda s # i bez #?
Ne postoji nikakva razlika u značenju. Simbol # je samo oznaka da slijedi heksadecimalni kod. Alat prihvaća obje varijante. Isto vrijedi i za velika i mala slova: #FF0000 i #ff0000 su identične boje.

2. Zašto su RGB vrijednosti uvijek u rasponu 0–255?
Zato što svaki kanal crvene, zelene i plave boje koristi 8 bitova (1 bajt) za pohranu razine svjetline. Osam bitova može predstaviti 2⁸ = 256 različitih vrijednosti, od 0 do 255. Heksadecimalni par (00 do FF) upravo te razine opisuje.

3. Što znači troznamenkasta kratica poput #abc?
Troznamenkasti HEX kod kratki je zapis kada su obje znamenke u svakom kanalu jednake. #abc se automatski proširuje u #aabbcc. Na primjer, #f80 je #ff8800. Ovaj oblik koristi se u CSS‑u već godinama i omogućuje brži unos.

4. Mogu li koristiti osamznamenkasti HEX (s alfa kanalom) na ovoj stranici?
Ne. Stranica je namijenjena isključivo šestoznamenkastim i troznamenkastim HEX kodovima bez prozirnosti. Ako unesete #4f46e580, alat će prikazati poruku o pogrešci. Za pretvorbu s alfa kanalom potreban je drugi alat.

5. Zašto su RGB vrijednosti uvijek cijeli brojevi?
Zato što se pretvorba iz baze 16 u bazu 10 temelji na cjelobrojnim potencijama (16^1, 16^0). Svaki par heksadecimalnih znamenki prevodi se u jedinstveni cijeli broj između 0 i 255. Nema decimalnih mjesta, zaokruživanja ili skaliranja.

6. Što se događa ako upišem neispravan HEX kod, primjerice #xyz?
Alat će prikazati poruku: "Unesite heksadecimalnu boju poput #4f46e5 ili #abc." Nijedna vrijednost neće biti prikazana niti izmijenjena. Na taj način izbjegavate nenamjerne promjene boje.

Radni tijek za brzu pretvorbu

1. Primite HEX kod iz dizajnerskog mockupa, npr. #3CB371.
2. Unesite ga u polje na ovoj stranici (s # ili bez).
3. Odmah očitajte RGB: (60, 179, 113).
4. Kopirajte RGB trojku i upotrijebite je u kodu: na primjer, u CSS‑u rgb(60, 179, 113) ili u JavaScriptu ctx.fillStyle = 'rgb(60,179,113)';.
5. Po potrebi provjerite i ostale formate (HSL, HSV, CMYK, LAB) za usklađivanje s drugim alatima.

Budući da se sva polja ažuriraju istovremeno, možete i kliknuti na ugrađeni birač boje (color picker) – odabrana boja automatski se pretvara u sve formate. Ništa od unesenog ne sprema se na poslužitelj; cijela pretvorba izvodi se lokalno u pregledniku.