RGB et dóna tres canals decimals entre 0 i 255. Convertir-los a HEX transforma cada canal en un nombre hexadecimal de dos dígits, així el color s'ajusta en un sol token compacte que qualsevol navegador, eina de disseny i guia d'estil entenen.
Com funciona la conversió de RGB a HEX
- Pren el canal vermell i divideix-lo per 16: el quocient és el primer dígit i la resta el segon.
- Escriu els dígits 10 a 15 com les lletres A a F — 255 esdevé FF.
- Repeteix per al verd i el blau, omplint amb un zero al davant si un dígit està sol: 5 esdevé 05.
- Uneix els tres parells i posa un # al davant.
Exemple resolt
Exacte, sempre que els canals siguin nombres sencers de 0 a 255. Valors fraccionaris com rgb(79.5, 70, 229) es redondegen al nombre enter més proper primer, perquè HEX no pot emmagatzemar valors intermedis.
RGB i HEX explicats
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()
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
Taula de referència de RGB a HEX
Els colors CSS més comuns convertits de RGB a HEX.
| Color | 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 |