HEX koda stlači tri 8-bitne številke v šest šestnajstiških mest. Pretvorba HEX v RGB pomeni razdelitev teh mest v pare in branje vsakega para kot decimalno število med 0 in 255 — točno tiste vrednosti, ki jih pričakujejo CSS, Figma in urejevalniki slik.
Kako poteka pretvorba iz HEX v RGB
- Odstrani vodilni # in, če koda vsebuje le tri mest, podvoji vsako: #f53 postane #ff5533.
- Razdeli šest mest v tri pare — RR, GG in BB.
- Preberi vsak par kot število v osnovi 16 in ga pretvori v osnovo 10: FF postane 255, 57 postane 87, 33 postane 51.
- Zapiši tri rezultate kot rgb(R, G, B).
Delujoč primer
Ta pretvorba je natančna. HEX in RGB opisujeta iste sRGB vrednosti v različni notaciji, zato se v nobeni smeri nič ne zaokroži ali izgubi.
HEX in RGB pojasnjeno
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
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()
Tabela za HEX v RGB
Najpogostejše CSS barve, pretvorjene iz HEX v RGB.
| Barva | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |