En HEX-kode pakker tre 8-biters tall inn i seks heksadesimale sifre. Å konvertere HEX til RGB betyr å splitte de sifrene i par og lese hvert par som et desimaltall mellom 0 og 255 — akkurat de verdiene CSS, Figma og bildeeditorer forventer.
Hvordan konvertering fra HEX til RGB fungerer
- Fjern ledende # og, hvis koden bare har tre sifre, dobbel hvert siffer: #f53 blir #ff5533.
- Del de seks sifrene i tre par — RR, GG og BB.
- Les hvert par som et base-16-tall og konverter det til base 10: FF blir 255, 57 blir 87, 33 blir 51.
- Skriv de tre resultatene som rgb(R, G, B).
Eksempel
Denne konverteringen er nøyaktig. HEX og RGB beskriver de samme sRGB-verdiene i forskjellig notasjon, så ingenting rundes av eller går tapt i noen retning.
HEX and RGB explained
Hva er HEX?
En HEX-kode er et seks-sifret heksadesimalt tall som lagrer fargens røde, grønne og blå kanal etter et innledende #. Hver paresiffer dekker én kanal, fra 00 (ingen) til FF (full), noe som gir de samme 16,7 millionene farger som RGB i en mye kortere notasjon. HEX er standard i CSS, designverktøy og merkevareretningslinjer.
- Syntaks:
- #RRGGBB
- Område:
- 00–FF per kanal
- Best egnet for:
- CSS, design-handoff, merkevareretningslinjer
Hva er RGB?
RGB beskriver en farge som tre lyskilder — rød, grønn og blå — hver fra 0 til 255. Det speiler hvordan skjermer faktisk fungerer: alle tre på 255 gir hvitt, alle på 0 gir svart. RGB er riktig valg når du trenger å regne med en farge, og rgba() legger til gjennomsiktighet i tillegg.
- Syntaks:
- rgb(R, G, B)
- Område:
- 0–255 per kanal
- Best egnet for:
- kode, canvas, gjennomsiktighet med rgba()
Referansetabell fra HEX til RGB
De vanligste CSS-fargene, konvertert fra HEX til RGB.
| Farge | 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) |