Un codi HEX empaqueta tres nombres de 8 bits en sis dígits hexadecimals. Convertir HEX a RGB significa dividir aquests dígits en parelles i llegir cada parella com un nombre decimal entre 0 i 255 — exactament els valors que esperen CSS, Figma i els editors d'imatges.
Com funciona la conversió de HEX a RGB
- Elimina la # inicial i, si el codi té només tres dígits, duplica cada un: #f53 es converteix en #ff5533.
- Divideix els sis dígits en tres parelles — RR, GG i BB.
- Llegeix cada parella com un nombre en base 16 i converteix-lo a base 10: FF esdevé 255, 57 esdevé 87, 33 esdevé 51.
- Escriu els tres resultats com rgb(R, G, B).
Exemple resolt
Aquesta conversió és exacta. HEX i RGB descriuen els mateixos valors sRGB en una notació diferent, així que no hi ha arrodoniments ni pèrdues en cap direcció.
HEX i RGB explicats
Què és HEX?
Un codi HEX és un nombre hexadecimal de sis dígits que emmagatzema els canals vermell, verd i blau d'un color darrere d'una # inicial. Cada parella de dígits cobreix un canal, de 00 (cap) a FF (complet), cosa que proporciona els mateixos 16,7 milions de colors que RGB amb una notació molt més curta. HEX és la predeterminada en CSS, eines de disseny i guies de marca.
- Sintaxi:
- #RRGGBB
- Rang:
- 00–FF per canal
- Millor per:
- CSS, lliurament de disseny, guies de marca
Què és RGB?
RGB descriu un color com tres canals de llum — vermell, verd i blau — cadascun de 0 a 255. Reflecteix com funcionen realment les pantalles: tots tres a 255 donen blanc, tots tres a 0 donen negre. RGB és la opció correcta quan necessites calcular amb un color, i rgba() afegeix transparència a sobre.
- Sintaxi:
- rgb(R, G, B)
- Rang:
- 0–255 per canal
- Millor per:
- codi, canvas, transparència amb rgba()
Taula de referència de HEX a RGB
Els colors CSS més comuns convertits de HEX a RGB.
| Color | 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) |