En HEX-kod packar tre 8-bitars tal i sex hexadecimala siffror. Att konvertera HEX till RGB innebär att dela upp de siffrorna i par och läsa varje par som ett decimaltal mellan 0 och 255 — exakt de värden CSS, Figma och bildredigerare förväntar sig.
Hur HEX till RGB-konvertering fungerar
- Ta bort den ledande # och, om koden bara har tre siffror, dubbla varje siffra: #f53 blir #ff5533.
- Dela de sex siffrorna i tre par — RR, GG och BB.
- Läs varje par som ett bas-16-tal och konvertera till bas 10: FF blir 255, 57 blir 87, 33 blir 51.
- Skriv de tre resultaten som rgb(R, G, B).
Exempel som fungerar
Denna konvertering är exakt. HEX och RGB beskriver samma sRGB-värden i olika notationer, så inget avrundas eller går förlorat i någon riktning.
HEX och RGB förklarat
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
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()
HEX till RGB referenstabell
De vanligaste CSS-färgerna, konverterade från HEX till RGB.
| Färg | 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) |