RGB ti da tri decimalne kanale med 0 in 255. Pretvorba v HEX spremeni vsak kanal v dvomestno šestnajstiško število, tako da celotna barva spraviš v en kompaktni token, ki ga razume vsak brskalnik, oblikovalsko orodje in slogovni vodič.
Kako poteka pretvorba iz RGB v HEX
- Vzemi rdečo komponento in jo deli z 16: količnik je prva števka, ostanek pa druga.
- Zapiši števke 10 do 15 kot črke A do F — 255 postane FF.
- Ponovi za zeleno in modro, enomestne vrednosti dopolni z vodilno ničlo: 5 postane 05.
- Združi tri pare in prednje postavi #.
Delujoč primer
Natančno, dokler so komponente cela števila od 0 do 255. Ulomne vrednosti, npr. rgb(79.5, 70, 229), se najprej zaokrožijo na najbližje celo število, ker HEX ne more shranjevati vmesnih vrednosti.
RGB in HEX pojasnjeno
Kaj je RGB?
RGB opisuje barvo kot tri komponente svetlobe — rdeča, zelena in modra — vsaka od 0 do 255. Odraža, kako zasloni dejansko delujejo: vse tri pri 255 dajo belo, vse pri 0 dajo črno. RGB je prava izbira, kadar moraš računati z barvo, rgba() pa doda prosojnost.
- Sintaksa:
- rgb(R, G, B)
- Območje:
- 0–255 na kanal
- Najbolj primerno za:
- koda, canvas, prosojnost z rgba()
Kaj je HEX?
HEX koda je šestmestno šestnajstiško število, ki shrani rdečo, zeleno in modro komponento barve za vodilnim #. Vsako dvojico mest predstavlja ena komponenta, od 00 (brez) do FF (polno), kar daje enakih 16,7 milijona barv kot RGB v precej krajši notaciji. HEX je privzeta izbira v CSS, oblikovalskih orodjih in smernicah blagovnih znamk.
- Sintaksa:
- #RRGGBB
- Območje:
- 00–FF na komponento
- Najbolj primerno za:
- CSS, predaja oblikovanja, smernice blagovne znamke
Tabela za RGB v HEX
Najpogostejše CSS barve, pretvorjene iz RGB v HEX.
| Barva | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |