Un código HEX empaqueta tres números de 8 bits en seis dígitos hexadecimales. Convertir HEX a RGB significa dividir esos dígitos en pares y leer cada par como un número decimal entre 0 y 255 — exactamente los valores que esperan CSS, Figma y los editores de imágenes.
Cómo funciona la conversión de HEX a RGB
- Quita el # inicial y, si el código tiene solo tres dígitos, duplica cada uno: #f53 se convierte en #ff5533.
- Divide los seis dígitos en tres pares — RR, GG y BB.
- Lee cada par como un número en base 16 y conviértelo a base 10: FF se vuelve 255, 57 se vuelve 87, 33 se vuelve 51.
- Escribe los tres resultados como rgb(R, G, B).
Ejemplo práctico
Esta conversión es exacta. HEX y RGB describen los mismos valores sRGB en diferente notación, así que no se redondea ni se pierde nada en ninguna de las direcciones.
HEX y RGB explicados
¿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
¿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()
Tabla de referencia de HEX a RGB
Los colores CSS más comunes, convertidos 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) |