Pretvornik iz RGB v HEX

Kaj počne ta stran in zakaj je drugačna

To orodje sprejme tri decimalna števila, ki predstavljajo rdečo, zeleno in modro barvno komponento. Vsaka vrednost je med 0 in 255. Takoj prikaže enakovredno šestnajstiško barvno kodo, na primer #1E90FF. Poleg tega orodje vizualno prikaže barvo in samodejno posodobi vse druge podprte formate: HSL, HSV, CMYK, LAB in barvni izbirnik. Uporabnik lahko kodo preprosto prekopira in uporabi v CSS, programih za oblikovanje ali kjer koli drugje, kjer je potrebna hex vrednost.

Kar to orodje loči od drugih, je natančnost pretvorbe. RGB (decimalni, trije kanali 0–255) in šestnajstiški zapis (šestmestna ali trimestna okrajšava) predstavljata popolnoma enak barvni razpon – sRGB delovni prostor, ki ga uporablja večina zaslonov. Zato ni nobenega približevanja ali izgube barvnega razpona. Hex izhod se vedno začne z # in, razen če uporabnik uporablja osemmestno obliko, ne vsebuje alfa kanala. Vnos RGB v orodje pričakuje tri števila, ločena z vejicami ali presledki (npr. 79, 70, 229), in rezultat je vedno šestmestna koda (npr. #4F46E5), ker se vsaka vrednost 0–255 preslika v dve šestnajstiški števki.

Vse obdelave potekajo v uporabnikovem brskalniku. Noben vnos se ne pošilja na strežnik.

Kako deluje pretvorba iz decimalnega RGB v šestnajstiški zapis

Vsako od treh decimalnih števil (rdeča, zelena, modra) pretvorimo v dve šestnajstiški števki. Šestnajstiški številski sistem ima osnovo 16, zato števke segajo od 0 do 9 in od A do F, kjer A predstavlja 10, B 11, C 12, D 13, E 14 in F 15.

Vzemimo primer iz dejstev: vrednosti 79, 70, 229.

• Rdeča: 79. 79 delimo s 16. Količnik je 4, ostanek je 15. 4 v šestnajstiškem sistemu ostane 4, 15 pa je F. Torej 79 → 4F.
• Zelena: 70. 70 delimo s 16. Količnik je 4, ostanek 6. Torej 70 → 46.
• Modra: 229. 229 delimo s 16. Količnik je 14 (E), ostanek 5. Torej 229 → E5.

Združimo vse tri pare: 4F, 46, E5. Dodamo predpono # in dobimo #4F46E5.

Postopek je popolnoma reverzibilen. Če želite iz #4F46E5 dobiti nazaj decimalne vrednosti, pretvorite vsak par šestnajstiških števk: 4F = 4×16 + 15 = 64 + 15 = 79; 46 = 4×16 + 6 = 64 + 6 = 70; E5 = 14×16 + 5 = 224 + 5 = 229.

Vsaka vrednost med 0 in 255 zavzema natanko 8 bitov. Za zapis teh 8 bitov v šestnajstiškem sistemu potrebujemo dve števki, ker je 16² = 256. Zato je izhod vedno šestmesten – po dve števki za vsak kanal. Orodje ne skrajšuje samodejno v trimestno obliko (npr. #AABBCC ne postane #ABC), čeprav trimestni vnos v hex polju sprejme in ga razširi.

Barvni prostor sRGB in zakaj je pretvorba brez izgub

RGB in hex opisujeta barve v istem barvnem prostoru: sRGB (standard RGB). To je standardni barvni prostor za večino računalniških zaslonov, spletnih brskalnikov in digitalnih slik. sRGB določa, kako natančno so rdeča, zelena in modra komponenta upodobljene – vključno z gama korekcijo in barvnimi temperaturami.

Ker oba formata uporabljata isti barvni prostor, pretvorba med decimalnim RGB in šestnajstiškim zapisom ne povzroči nobene spremembe v barvi. Odtenek, nasičenost in svetlost ostanejo enaki. To je pomembno za oblikovalce, ki potrebujejo natančno ujemanje barv med različnimi orodji. Če na primer v programu Photoshop dobite RGB vrednost (npr. 79, 70, 229), jo lahko brez skrbi pretvorite v #4F46E5 za uporabo v CSS ali spletnem vmesniku.

Drugi barvni prostori, kot je CMYK (cijan, magenta, rumena, črna), so subtraktivni in se uporabljajo za tiskanje. Pretvorba iz RGB v CMYK ni nikoli popolnoma natančna, ker imata prostora različen razpon barv (gamut). Pri pretvorbi RGB v hex do tega ne pride – ostajamo v istem aditivnem prostoru.

Pravilen vnos in pogoste napake

Orodje pričakuje tri decimalna števila, vsako v obsegu 0–255. Ločila so lahko vejice ali presledki. Primeri veljavnih vnosov:

• 79, 70, 229
• 79 70 229
• 0, 128, 255

Če uporabnik vnese vrednost zunaj obsega (npr. 300, 70, 229), nepravilno ločilo (npr. 79.70.229) ali manjkajoče število (npr. 79, 70), orodje prikaže sporočilo: “Vnesite RGB kot tri številke 0–255, npr. 79, 70, 229.” To sporočilo je jasno in uporabnika usmeri k pravilni obliki.

V polje za hex vnos orodje sprejema tudi trimestne okrajšave, na primer #abc. To interno razširi v #aabbcc. Vendar izhod vedno ostane šestmesten – orodje ne skrajšuje samodejno. To je v skladu s pričakovanji: spletni brskalniki in CSS podpirajo trimestno obliko le, če se vsak par števk ponovi (npr. #11aacc → #1ac), vendar večina razvijalcev uporablja šestmestno obliko za natančnost.

Vse spremembe v katerem koli polju (RGB, HSL, CMYK itd.) takoj posodobijo vsa ostala polja. Ni gumba za pretvorbo. To omogoča hitro preizkušanje barvnih različic.

Uporaba šestnajstiških kod v spletnem oblikovanju

V CSS se hex kode uporabljajo za določanje barv v lastnostih, kot so color, background-color, border-color in druge. Sintaksa je preprosta:

.element {
  color: #4F46E5;
  background-color: #FFFFFF;
}

Šestnajstiški zapis je neobčutljiv na velikost črk: #4f46e5 deluje enako kot #4F46E5. Priporočljivo je uporabljati velike črke za boljšo berljivost, vendar to ni obvezno.

Trištevilčna okrajšava (npr. #ABC) je enakovredna #AABBCC. Orodje jo sprejme kot vnos, vendar izhod vedno izpiše v šestmestni obliki. Če na primer v hex polje vnesete #abc, orodje prikaže #aabbcc in posodobi RGB vrednosti na 170, 187, 204.

Osemmestna hex koda (npr. #4F46E5FF) dodaja alfa kanal za prosojnost. Orodje samo ne ustvarja osemmestnih kod, vendar če uporabnik vnese takšno kodo v hex polje, jo orodje obravnava in razčleni prvih šest števk kot barvo, zadnji dve pa kot alfa vrednost. To je uporabno pri delu z barvami, ki vključujejo prosojnost, vendar orodje ne omogoča vnosa alfa kanala prek RGB polj.

Pogosta vprašanja (FAQ)

1. Ali lahko vnesem trištevilčno okrajšavo v hex polje? Da. Orodje jo razširi v šestmestno kodo. Na primer #abc postane #aabbcc. RGB vrednosti se posodobijo na 170, 187, 204.

2. Kaj se zgodi, če vnesem število zunaj obsega 0–255 v RGB polja? Orodje prikaže napako: “Vnesite RGB kot tri številke 0–255, npr. 79, 70, 229.” Druga polja se ne posodobijo, dokler napaka ni odpravljena.

3. Ali orodje podpira vnos z alfa kanalom (prosojnostjo)? RGB vnos ne vključuje alfa kanala. Hex izhod je vedno šestmesten. Če vnesete osemmestno hex kodo v hex polje, orodje razčleni prvih šest števk kot barvo in zadnji dve kot alfa vrednost, vendar tega ne prikaže ločeno.

**4. Kje se obdelujejo moji podatki? Vse se obdeluje v vašem brskalniku. Noben podatek se ne pošilja na zunanji strežnik. To pomeni, da lahko orodje uporabljate tudi brez internetne povezave, ko je stran enkrat naložena.

5. Zakaj je hex izhod vedno šestmesten in ne trimesten? Vsak barvni kanal (R, G, B) zavzema 8 bitov, kar je 256 možnih vrednosti. Za natančen zapis vsake vrednosti potrebujemo dve šestnajstiški števki na kanal, skupaj šest. Trimestna okrajšava je mogoča le, če so vsi trije pari števk enaki (npr. #AABBCC → #ABC), vendar orodje tega ne naredi samodejno, ker želi ohraniti natančnost.

6. Ali lahko v RGB vnosu uporabim pike ali podpičja kot ločila? Ne. Orodje sprejema le vejice ali presledke. Uporaba pik (npr. 79.70.229) ali podpičij (npr. 79;70;229) sproži napako. Uporabite 79, 70, 229 ali 79 70 229.