Pretvarač HEX u RGB

Šta je HEX u RGB i kako radi?

HEX kod je zapis boje u heksadecimalnom (baza‑16) brojnom sistemu. Standardni HEX kod za web sadrži tri para cifara: #RRGGBB. Svaki par predstavlja jedan od aditivnih kanala – crveni, zeleni i plavi – i može imati vrijednost od 00 do FF (heksadecimalno), što odgovara decimalnim brojevima od 0 do 255. Na primjer, #4f46e5 označava crveni kanal 4F (79), zeleni 46 (70), plavi E5 (229). Pretvorba se izvodi jednostavnom matematičkom operacijom: svaka cifra u paru množi se potencijom broja 16. Cifre od 0 do 9 vrijede svoju numeričku vrijednost, a slova A–F vrijede 10–15. Formula za prvi kanal: vrijednost = prva_cifra × 16 + druga_cifra. Tako 4F postaje 4×16 + 15 = 64 + 15 = 79.

Tri cifre u obliku #RGB (npr. #abc) su skraćenica: svaka cifra se udvostručuje, pa #abc postaje #aabbcc. Ovaj alat automatski proširuje trocifrene unose prije preračunavanja. Važno je napomenuti da ova stranica obrađuje samo šesto‑ ili trocifrene HEX kodove bez alfa kanala (osam cifara nisu podržane). Rezultat su tri cijela broja između 0 i 255, bez zaokruživanja – pretvorba je tačna jer je heksadecimalni u decimalni sistem deterministički.

Kako ova stranica pretvara HEX u RGB

Za razliku od generičkih konvertera, ova stranica radi direktno u korisnikovom pregledniku, bez slanja podataka na server. To znači da unos ostaje privatan, a pretvorba je trenutna. Korisnik može unijeti HEX kod ručno (sa ili bez znaka #) ili odabrati boju pomoću ugrađenog birača boja. Nakon unosa, odmah se prikazuju RGB vrijednosti, a istovremeno se ažuriraju sva ostala polja: HSL, HSV, CMYK i LAB. Ako korisnik naknadno promijeni bilo koje od tih polja, sva ostala se ponovo preračunavaju – alat radi u oba smjera.

Pravila i granični slučajevi:

• Ako uneseni tekst ne odgovara formatu #RRGGBB, #RGB, RRGGBB ili RGB, alat prikazuje poruku: “Enter a hex color like #4f46e5 or #abc.” (Poruka je na engleskom, ali je doslovno preuzeta sa stranice.)
• Trocifrene skraćenice (npr. #f00) automatski se proširuju u #ff0000 prije preračunavanja.
• HEX kodovi sa osam cifara (RGBA) nisu podržani – alat ih neće prepoznati i prikazat će grešku.
• Nije dozvoljen unos bilo kojih drugih znakova osim 0–9, A–F, a–f i opcionalnog #.
• Pretvorba je matematički tačna; ne koristi se aproksimacija niti gamut clipping jer su vrijednosti već unutar 0–255.

Ova specifičnost čini stranicu korisnom za front‑end programere koji trebaju precizne numeričke kanale za JavaScript, Canvas API ili inline stilove koji zahtijevaju rgb() notaciju.

Zašto je važna razlika između HEX i RGB

HEX i RGB su dva načina zapisa istih 16,78 miliona boja (256³). Razlika je isključivo u brojnom sistemu. U CSS‑u oba oblika ravnopravno funkcionišu: color: #ff6600 i color: rgb(255,102,0) daju istu boju. Međutim, postoje situacije kada je RGB praktičniji:

• U JavaScript‑u se boje često čuvaju kao nizovi `` radi manipulacije (npr. miješanje, animacije).
• Canvas API‑ji i WebGL zahtijevaju numeričke vrijednosti kanala (0–255 ili 0.0–1.0).
• Dizajnerski alati poput Adobe Photoshopa ili Figme prikazuju RGB klizače, pa je brže unijeti tri broja nego dekodirati HEX.
• Kada se računa relativna luminancija za WCAG kontrast, koriste se decimalne vrijednosti kanala (npr. 79, 70, 229), a ne heksadecimalne.

Matematička pozadina: Svaki heksadecimalni kanal predstavlja broj od 0 do 255. Na primjer, FF = 255 (najveći intenzitet), 00 = 0 (odsustvo). Stoga #000000 postaje rgb(0,0,0) – crna, a #ffffff postaje rgb(255,255,255) – bijela.

Primjeri konverzije i tabela uobičajenih boja

Slijede konkretni primjeri koji pokazuju kako alat preračunava:

Radni primjer za #4f46e5:

• Crveni par 4F: 4×16 + 15 = 64 + 15 = 79.
• Zeleni par 46: 4×16 + 6 = 64 + 6 = 70.
• Plavi par E5: 14×16 + 5 = 224 + 5 = 229. Rezultat: rgb(79, 70, 229).

Trocifrena skraćenica #abc: Proširuje se u #aabbcc. Tada:

• AA: 10×16 + 10 = 170.
• BB: 11×16 + 11 = 187.
• CC: 12×16 + 12 = 204. Rezultat: rgb(170, 187, 204).

Česte greške i rubni slučajevi

Korisnici često prave sljedeće greške:

1. Unos osam cifara (RGBA). Npr. #4f46e580. Stranica ne podržava alfa kanal, pa će prikazati grešku. Ispravan unos je samo šest ili tri cifre.
2. Korištenje velikih i malih slova miješano. To je dozvoljeno, jer alat prihvata A–F i a–f. Npr. #4F46E5 je isto što i #4f46e5.
3. Zaboravljanje znaka #. Alat prihvata i HEX bez hash‑a, npr. 4f46e5. Ipak, preporučuje se unos sa # radi jasnoće.
4. Unos nevalidnih heksadecimalnih znakova (npr. #GGGGGG). Znak G nije u opsegu 0–9 i A–F, pa alat javlja grešku.
5. Unos HEX koda sa razmacima ili interpunkcijom. Alat očekuje čistu heksadecimalnu vrijednost; razmaci, zarezi ili zagrade uzrokuju grešku.

Kako alat reaguje: Kada korisnik unese neispravan tekst, prikazuje se tačna poruka upozorenja na engleskom jeziku (kako je navedeno na samoj stranici). Polje ostaje prazno ili zadržava prethodnu validnu vrijednost. Ako je unos djelimično validan, ali nedovršen (npr. samo #4f4), alat neće automatski proširiti jer su tri cifre minimalne; međutim, #4f4 se smatra trocifrenim kodom (crvena 4, zelena f, plava 4) i proširuje se u #44ff44. To je ispravno ponašanje, ali korisnik treba da bude svjestan da #4f4 ne znači isto što i #4f46e5.

Najčešća pitanja (FAQ)

1. Mogu li pretvoriti HEX kod sa alfa kanalom (RGBA) koristeći ovu stranicu?
Ne. Stranica podržava samo šesto‑ i trocifrene HEX kodove. Za RGBA (osam cifara) potrebno je koristiti poseban alat ili ručno izračunati alfa vrijednost (posljednji par, npr. 80 = 128 u decimali, ali ova stranica ga ne prepoznaje).

2. Zašto su RGB vrijednosti uvijek cijeli brojevi između 0 i 255?
Zato što svaki heksadecimalni par može imati vrijednost od 00 do FF, što odgovara rasponu 0–255. Ne postoje razlomci – svaka boja u standardnom 8‑bitnom kanalu je cijeli broj.

3. Kako funkcioniše trocifrena skraćenica?
Svaka cifra se udvostručuje: #f00 postaje #ff0000, #abc postaje #aabbcc. Ovo je definisano CSS specifikacijom i ovaj alat to automatski primjenjuje.

4. Da li alat koristi zaokruživanje?
Ne, jer je pretvorba iz baze 16 u bazu 10 tačna. Npr. #4f je tačno 79, a ne 79.3. Nema potrebe za zaokruživanjem.

5. Mogu li unijeti HEX kod bez znaka #?
Da, alat prihvata i 4f46e5 (bez hash‑a) i #4f46e5 (sa hash‑om). Preporučuje se korištenje hash‑a radi dosljednosti s CSS praksom.

6. Kada bih trebao koristiti RGB umjesto HEX?
Kada radite s Canvas API‑jem (koji zahtijeva fillStyle = rgb(79,70,229)), s JavaScript nizovima boja, ili kada želite da programski mijenjate pojedinačne kanale. U običnom CSS‑u oba su ekvivalentna.