Color HEX

Un color HEX (hexadecimal) es la forma más extendida de especificar colores en CSS y diseño web. El formato #RRGGBB representa las intensidades de rojo, verde y azul en base 16: cada par de caracteres va de 00 (0 en decimal) a FF (255 en decimal), dando lugar a 256 × 256 × 256 = 16,7 millones de colores posibles.

¿Cómo se estructura un código HEX?

#  FF    88    00
   ↑↑    ↑↑    ↑↑
   Rojo  Verde  Azul

Cada canal utiliza dos dígitos hexadecimales. Los dígitos van de 0 a 9 y de A a F, donde A = 10, B = 11 … F = 15. El valor FF en hexadecimal es 15 × 16 + 15 = 255 en decimal.

Colores de referencia:

HEX	Color	RGB equivalente
`#000000`	Negro	rgb(0, 0, 0)
`#FFFFFF`	Blanco	rgb(255, 255, 255)
`#FF0000`	Rojo puro	rgb(255, 0, 0)
`#00FF00`	Verde puro	rgb(0, 255, 0)
`#0000FF`	Azul puro	rgb(0, 0, 255)
`#FF8800`	Naranja	rgb(255, 136, 0)

Notación corta (#RGB)

Cuando ambos dígitos de cada canal son idénticos, puedes usar la forma abreviada de tres dígitos:

#FF0000 → #F00
#AABBCC → #ABC
#112233 → #123

Sin embargo, #FF8800 no puede abreviarse porque los dígitos del canal verde (88) y del azul (00) no son uniformes en todos los casos posibles.

Transparencia: la notación #RRGGBBAA

CSS admite dos dígitos adicionales al final para controlar la opacidad:

#FF000080 → rojo al 50 % de opacidad (80 hex = 128 decimal ≈ 50 %)
#00000000 → color completamente transparente
#000000FF → negro completamente opaco

Esta notación de 8 dígitos es equivalente a rgba() y está soportada en todos los navegadores modernos.

HEX en la práctica

En CSS puedes usar HEX directamente en cualquier propiedad de color:

color: #333333;           /* texto gris oscuro */
background-color: #F5F5F5; /* fondo gris muy claro */
border: 1px solid #E0E0E0;

Las herramientas de diseño como Figma, Adobe XD o Canva muestran los colores en HEX por defecto. La ventaja frente a Color RGB es que es más compacto para copiar y pegar, aunque menos intuitivo para ajustar tonos: si quieres aclarar un color, resulta más práctico cambiar a Color HSL, donde la luminosidad es un valor directo.

¿Mayúsculas o minúsculas?

El estándar CSS no distingue entre mayúsculas y minúsculas: #FF8800, #ff8800 y #Ff8800 son equivalentes. Por convenio, muchos proyectos usan minúsculas en código fuente (#ff8800) y los diseñadores suelen preferir mayúsculas en las especificaciones de diseño.

Preguntas frecuentes

¿Qué significa cada par de dígitos en un código HEX?

Un color HEX tiene el formato #RRGGBB, donde los dos primeros dígitos representan el rojo, los dos del medio el verde y los dos últimos el azul. Cada par va de 00 (sin color) a FF (máxima intensidad), equivalente a los valores RGB 0-255.

¿Qué diferencia hay entre #RGB y #RRGGBB?

La notación corta #RGB es simplemente un atajo: cada dígito se duplica. Así, #F80 equivale a #FF8800 (naranja). Solo funciona cuando ambos dígitos de cada canal son iguales; en cualquier otro caso hay que usar los seis dígitos completos.

¿Cómo añado transparencia a un color HEX?

Con la notación de ocho dígitos #RRGGBBAA, donde los dos últimos controlan la opacidad: FF es totalmente opaco y 00 es invisible. Por ejemplo, #FF000080 es un rojo al 50 % de opacidad. Los navegadores modernos soportan esta notación desde 2017.