RGB ger dig tre decimalkanaler mellan 0 och 255. Att konvertera till HEX gör varje kanal till ett tvåsiffrigt hexadecimalt tal, så hela färgen får plats i en kompakt token som alla webbläsare, designverktyg och stilguider förstår.
Hur RGB till HEX-konvertering fungerar
- Ta den röda kanalen och dividera med 16: kvoten är den första siffran, resten är den andra.
- Skriv siffrorna 10–15 som bokstäverna A–F — 255 blir FF.
- Upprepa för grönt och blått, fyll på enkelciffriga värden med en ledande nolla: 5 blir 05.
- Sätt ihop de tre paren och sätt ett # framför.
Exempel som fungerar
Exakt, så länge kanalerna är hela tal mellan 0 och 255. Bråkdelar som rgb(79.5, 70, 229) avrundas först till närmaste heltal, eftersom HEX inte kan lagra mellanvärden.
RGB och HEX förklarat
Vad är RGB?
RGB beskriver en färg som tre ljuskanaler — röd, grön och blå — vardera från 0 till 255. Det speglar hur skärmar faktiskt fungerar: alla tre på 255 ger vitt, alla på 0 ger svart. RGB är rätt val när du behöver räkna med en färg, och rgba() lägger till transparens ovanpå.
- Syntax:
- rgb(R, G, B)
- Intervall:
- 0–255 per kanal
- Bäst för:
- kod, canvas, transparens med rgba()
Vad är HEX?
En HEX-kod är ett sexsiffrigt hexadecimalt tal som lagrar röd, grön och blå kanal för en färg bakom en ledande #. Varje par siffror täcker en kanal, från 00 (ingen) till FF (full), vilket ger samma 16,7 miljoner färger som RGB i en mycket kortare notation. HEX är standard i CSS, designverktyg och varumärkesriktlinjer.
- Syntax:
- #RRGGBB
- Intervall:
- 00–FF per kanal
- Bäst för:
- CSS, designöverlämning, varumärkesriktlinjer
RGB till HEX referenstabell
De vanligaste CSS-färgerna, konverterade från RGB till HEX.
| Färg | 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 |