RGB te da tres canales decimales entre 0 y 255. Convertir a HEX transforma cada canal en un número hexadecimal de dos dígitos, de modo que todo el color encaja en un token compacto que entiende cualquier navegador, herramienta de diseño y guía de estilos.
Cómo funciona la conversión de RGB a HEX
- Toma el canal rojo y divídelo entre 16: el cociente es el primer dígito y el resto es el segundo.
- Escribe los valores 10 a 15 como las letras A a F — 255 se convierte en FF.
- Repite para verde y azul, rellenando dígitos únicos con un cero delante: 5 se convierte en 05.
- Une los tres pares y coloca un # delante.
Ejemplo práctico
Exacto, siempre que los canales sean números enteros de 0 a 255. Valores fraccionarios como rgb(79.5, 70, 229) se redondean primero al entero más cercano, porque HEX no puede almacenar valores intermedios.
RGB y HEX explicados
¿Qué es RGB?
RGB describe un color como tres canales de luz — rojo, verde y azul — cada uno de 0 a 255. Refleja cómo funcionan las pantallas: los tres a 255 dan blanco, los tres a 0 dan negro. RGB es la opción correcta cuando necesitas calcular con un color, y rgba() añade transparencia encima.
- Sintaxis:
- rgb(R, G, B)
- Rango:
- 0–255 por canal
- Mejor para:
- código, canvas, transparencia con rgba()
¿Qué es HEX?
Un código HEX es un número hexadecimal de seis dígitos que almacena los canales rojo, verde y azul de un color tras un # inicial. Cada par de dígitos representa un canal, de 00 (ninguno) a FF (completo), lo que da los mismos 16,7 millones de colores que RGB en una notación mucho más corta. HEX es el valor por defecto en CSS, herramientas de diseño y guías de marca.
- Sintaxis:
- #RRGGBB
- Rango:
- 00–FF por canal
- Mejor para:
- CSS, entrega de diseño, guías de marca
Tabla de referencia de RGB a HEX
Los colores CSS más comunes, convertidos 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 |