Pretvornik iz HEX v RGB

Pretvorba HEX v RGB: natančno dekodiranje barv v šestnajstiškem zapisu

Stran za pretvorbo HEX v RGB sprejme šestnajstiško barvno kodo (na primer #4f46e5 ali #abc) in v trenutku prikaže ustrezne vrednosti RGB (tri cela števila med 0 in 255). Rezultat je prikazan skupaj z drugimi barvnimi formati (HSL, HSV, CMYK, LAB), tako da ga lahko neposredno kopirate v kodo ali oblikovalsko programje. Vse pretvorbe se izvajajo v brskalniku – noben vnos se ne naloži niti shrani.

Zakaj je ta stran drugačna

Mnoga orodja pretvarjajo barve, vendar je ta stran osredotočena na matematično pretvorbo šestnajstiškega (osnova 16) zapisa v decimalna (osnova 10) RGB polja. HEX kode so v CSS izjemno pogoste, ker so kompaktne – a v resnici gre le za priročen način zapisa istih treh 8-bitnih kanalov, ki jih RGB podaja s številkami. Pretvorba je eksaktna in povratna: vsak par šestnajstiških števk se pomnoži s potencami števila 16, kar da celo število brez zaokroževanja. Na tej strani ni alfa kanala – pričakuje le šestmestne ali trimestne kode (brez osmih mest). Prav tako ni nobenega barvnega prostora ali gamut clippinga, saj gre za neposreden matematični prevod.

Kako poteka pretvorba iz šestnajstiškega v decimalni zapis

Barva na zaslonu je sestavljena iz treh kanalov: rdečega (R), zelenega (G) in modrega (B). Vsak kanal ima 256 možnih vrednosti (0–255), kar ustreza 8 bitom informacije. Šestnajstiški sistem uporablja števke 0–9 in črke A–F (a–f) za predstavitev vrednosti od 0 do 15. Dve šestnajstiški števki lahko torej predstavljata 16 × 16 = 256 vrednosti – ravno en kanal.

Primer: koda #4f46e5

• Prvi par 4f:
  • 4 pomeni 4 × 16¹ = 4 × 16 = 64
  • f pomeni 15 × 16⁰ = 15
  • Skupaj: 64 + 15 = 79 (R)
• Drugi par 46:
  • 4 pomeni 4 × 16 = 64
  • 6 pomeni 6 × 1 = 6
  • Skupaj: 64 + 6 = 70 (G)
• Tretji par e5:
  • e pomeni 14 × 16 = 224
  • 5 pomeni 5 × 1 = 5
  • Skupaj: 224 + 5 = 229 (B)

Rezultat: RGB(79, 70, 229) – modrikasta barva, znana kot indigo.

Trimesne kode (na primer #abc) se pred pretvorbo samodejno podvojijo: vsaka števka se podvoji, tako da #abc postane #aabbcc. To pomeni, da #aa = 170, #bb = 187, #cc = 204, kar da RGB(170, 187, 204) – svetlo sivo-modro. Postopek je enak kot pri polnih šestmestnih kodah, le da je vnos strnjenejši.

Vnos in oblike, ki jih orodje sprejema

Orodje sprejema:

• Šestmestne kode – npr. #1E90FF ali 1e90ff (znak # je opcijski)
• Trimesne kode – npr. #abc, def, #F0F (samodejno se razširijo na #aabbcc, #ddeeff, #ff00ff)
• Male in velike črke – #FF0000 in #ff0000 dasta enak rezultat

Vnos lahko vtipkate neposredno ali pa uporabite vgrajen barvni izbirnik (color picker). Ta vam omogoča, da kliknete katerokoli barvo in orodje samodejno izpolni HEX kodo ter prikaže vse ostale formate.

Tabela: Primeri vnosov in izhodov

Napake in mejni primeri

Če vnesete vrednost, ki ne ustreza pričakovani obliki, orodje prikaže sporočilo:

»Enter a hex color like #4f46e5 or #abc.«

To se zgodi v naslednjih primerih:

• Vsebuje črke izven obsega A–F (npr. #xyz ali #G00)
• Ima napačno število števk (npr. #1234 – štiri mesta, ali #1234567 – sedem mest)
• Vsebuje presledke ali posebne znake
• Je osemmestna koda z alfa kanalom (npr. #4f46e5ff) – ta stran ne pretvarja alfa vrednosti

Pravilo: orodje pričakuje natanko 3 ali 6 šestnajstiških števk (po odstranitvi morebitnega #). Če je prisoten znak #, se prezre; če ga ni, se doda v prikazu, vendar vnos ni nujen.

Ker je pretvorba deterministična, ni nobene negotovosti. Prav tako ni nobene zaokrožitve ali prilagoditve – če vnesete pravilno kodo, boste vedno dobili natančna cela števila.

Kako se HEX in RGB uporabljata v praksi

Front‑end razvijalci pogosto naletijo na HEX kode v CSS datotekah, vendar jih v JavaScriptu (npr. za Canvas API, Dinamične sloge ali WebGL) potrebujejo kot RGB polja. Primer:

// CSS: background-color: #4f46e5;
// JavaScript potrebuje:
ctx.fillStyle = `rgb(79, 70, 229)`;

Oblikovalci dobijo barvne specifikacije kot HEX iz smernic blagovne znamke, vendar jih morajo vnesti v orodja (Figma, Photoshop, Illustrator) kot RGB številke za natančno mešanje ali prilagajanje nasičenosti.

Študenti in raziskovalci se učijo aditivnega barvnega modela – vsak kanal predstavlja intenzivnost svetlobe. HEX koda je zgolj priročen način zapisa: #000000 je črna (nič svetlobe), #FFFFFF je bela (maksimalna intenzivnost vseh kanalov). Ko razumete pretvorbo, lahko hitro ocenite barvo: #FF0000 je čisto rdeča, #00FF00 zelena, #0000FF modra.

Primerjava: kdaj uporabiti HEX in kdaj RGB

Vendar brskalnik obravnava obe obliki enako – pretvorba poteka interno. Izbira je stvar priročnosti in berljivosti v danem kontekstu.

Pogoste napake in kako se jim izogniti

1. Zamenjava črk in številk – Črka B (11) ni enaka številki 8. Koda #B00B00 ni #800800. Vedno preverite, ali uporabljate pravilne znake.
2. Pozabljanje podvajanja pri trimestnih kodah – #abc ni enako kot #a0b0c0, ampak #aabbcc. Če želite natančno vrednost, uporabite šestmestno kodo.
3. Vključevanje alfa kanala – Orodje ne podpira #rrggbbaa. Če imate takšno kodo, najprej odstranite zadnji par ali uporabite drugo orodje.
4. 6-mestna koda z manjkajočimi števkami – #12345 je nedopustna. Število števk mora biti natančno 6 (ali 3 za krajšo obliko).
5. Uporaba presledkov ali vejic – Vnos #4f 46 e5 ne bo deloval. Vpišite brez presledkov.

Pogosta vprašanja (FAQ)

1. Zakaj moja osemmestna HEX koda (npr. #4f46e5ff) ne deluje? Stran je namenjena izključno pretvorbi HEX v RGB brez alfa kanala. Osemmestne kode vsebujejo podatke o prosojnosti (alfa), ki jih to orodje ne obdeluje. Za pretvorbo z alfa uporabite orodje za HEX v RGBA.

2. Ali lahko uporabim kodo brez znaka #? Da. # je opcijski. Kodi 4f46e5 in #4f46e5 se pretvorita enako.

3. Kakšna je razlika med #abc in #a0b0c0? #a0b0c0 je povsem drugačna barva. Pri trimestni kodi se vsaka števka podvoji: a postane aa, ne a0. Zato #abc = #aabbcc ≠ #a0b0c0. Če želite natančno vrednost s sredinskimi ničlami, vedno uporabite šestmestno obliko.

4. Ali se pretvorba izvede na strežniku ali v brskalniku? Vse pretvorbe potekajo neposredno v vašem brskalniku (client‑side). Noben podatek se ne pošlje na strežnik. To pomeni hitro delovanje in zasebnost.

5. Kako vem, ali je moja HEX koda veljavna? Veljavna koda vsebuje le znake 0–9, a–f ali A–F in je dolga natanko 3 ali 6 znakov (brez #). Če vnesete nekaj drugega, boste prejeli zgoraj omenjeno sporočilo o napaki.

6. Ali lahko pretvorim tudi v HSL ali druge formate? Da. Poleg RGB se samodejno posodobijo tudi vrednosti HSL, HSV, CMYK in LAB. Vsako polje lahko urejate – takoj se preračunajo vsa ostala. Vendar je vhodna točka za to stran vedno HEX.