RGB gir deg tre desimalkanaler mellom 0 og 255. Å konvertere til HEX gjør om hver kanal til et tosifret heksadesimalt tall, slik at hele fargen får plass i en kompakt token som alle nettlesere, designverktøy og stilguider forstår.
Hvordan konvertering fra RGB til HEX fungerer
- Ta den røde kanalen og del den på 16: kvotienten er det første sifferet, resten er det andre.
- Skriv sifrene 10 til 15 som bokstavene A til F — 255 blir FF.
- Gjenta for grønt og blått, og fyll opp ensifrede verdier med en ledende null: 5 blir 05.
- Sett sammen de tre parene og legg et # foran.
Eksempel
Eksakt, så lenge kanalene er heltall fra 0 til 255. Brøktall som rgb(79.5, 70, 229) avrundes først til nærmeste heltall, fordi HEX ikke kan lagre mellomverdier.
RGB and HEX explained
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()
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
Referansetabell fra RGB til HEX
De vanligste CSS-fargene, konvertert fra RGB til HEX.
| Farge | 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 |