Códigos de color hex explicados: cómo funciona #RRGGBB

Cómo funciona un código de color hex

Todo color en una pantalla se mezcla a partir de luz roja, verde y azul. Un código hex escribe la intensidad de cada luz con dos caracteres después del signo #: primero el rojo, luego el verde y luego el azul. Ese es el patrón #RRGGBB.

Los caracteres son hexadecimales, una forma de contar con 16 dígitos: del 0 al 9 y después a (10), b (11), c (12), d (13), e (14) y f (15). Un par cubre 256 valores, de 00 (0) a ff (255), justo el rango de rgb().

Para pasar un par a un número normal, multiplica el primer dígito por 16 y súmale el segundo. Abajo tienes #1e90ff, el color CSS dodgerblue, en cuatro formatos y después calculado par a par.

Así que #1e90ff es rgb(30, 144, 255): un poco de rojo, bastante verde y el azul al máximo, que juntos dan un azul cielo brillante. Tres pares de 256 valores dan 16 777 216 colores posibles.

Forma corta de hex con 3 y 4 dígitos

Cuando los dos dígitos de cada par son iguales, puedes escribir cada par una sola vez. #ffcc00 se convierte en #fc0, y el navegador vuelve a duplicar cada dígito. #1e90ff no tiene forma corta, porque 1e y 90 no son pares de dígitos repetidos.

La forma corta solo cubre 4096 de los 16,7 millones de colores. Una versión de cuatro dígitos añade la opacidad del mismo modo, así que #f008 significa #ff000088.

Opacidad en hex: hex de 8 dígitos con alfa

Un código de ocho dígitos añade un cuarto par para el alfa, la opacidad: #RRGGBBAA. 00 es totalmente transparente y ff, totalmente opaco. Todos los navegadores actuales lo admiten en CSS, igual que la forma corta de cuatro dígitos #RGBA.

Para obtener el par, multiplica la opacidad por 255, redondea a un número entero y pásalo a hex. El 50 % da 127,5, que se redondea a 128 y se escribe 80. Aquí tienes la tabla completa aplicada a #1e90ff.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

Dos detalles. Primero, 80 es 128 de 255, es decir, el 50,2 %, no exactamente el 50 %: el alfa en hex solo tiene 256 pasos, así que la mayoría de los porcentajes redondos son aproximaciones cercanas. Segundo, Android pone el alfa al principio. En un recurso de color de Android, #801e90ff significa lo mismo que #1e90ff80 en CSS.

Cómo leer un código hex a ojo

Puedes adivinar un color sin convertir nada. Fíjate en el primer dígito de cada par, porque lleva casi toda la información.

• El primer dígito más alto indica la luz dominante. #d2691e tiene d en el rojo, 6 en el verde y 1 en el azul, así que es un marrón anaranjado.
• Dos canales altos se mezclan: rojo y verde dan amarillo, verde y azul dan cian, rojo y azul dan magenta o morado.
• Tres pares iguales dan un gris. #333333 es gris oscuro, #999999 es gris claro. Los pares casi iguales, como #708090, dan un color apagado y grisáceo.
• Dígitos altos en general significan un color claro, y dígitos bajos, uno oscuro. Cuando los tres pares son c0 o más, el color es pálido. Cuando los tres son 30 o menos, es muy oscuro.
• El verde se ve mucho más brillante que el azul con el mismo número. #00ff00 tiene una luminosidad OKLCH de 0,866, y #0000ff, solo de 0,452.

Por qué #808080 no es el gris medio

#808080 está justo a mitad de camino en los números: 128 de 255 en cada canal. Pero no se ve a medio camino entre el negro y el blanco. Su luminosidad OKLCH es 0,600, así que se percibe al 60 % del camino hacia el blanco.

Los valores hex ya están codificados con la curva sRGB, que sigue al ojo de forma aproximada, pero no exacta. #808080 emite alrededor del 21,6 % de la luz del blanco, y los modelos perceptuales sitúan el punto medio visual más abajo: OKLCH en #636363, CIELAB en #777777.

Esto importa para el texto. El gris #808080 sobre blanco da 3,95:1 y no cumple WCAG AA para texto de cuerpo. #767676 es el gris más claro que llega a 4,5:1, y #777777, un paso más claro, ya falla con 4,48:1.

Mayúsculas o minúsculas, con # o sin él

Los códigos hex no distinguen entre mayúsculas y minúsculas. #1E90FF, #1e90ff y #1E90ff son el mismo color en CSS, SVG y las herramientas de diseño. Elige un estilo y úsalo en todas partes, para que una búsqueda en tu código encuentre todos los usos. En CSS lo habitual son las minúsculas.

El signo # forma parte de la sintaxis de CSS, no del color. Figma y muchas herramientas de diseño muestran el código sin él, y los lenguajes de programación a menudo lo escriben como número con el prefijo 0x, como en Flutter, donde Color(0xFF1E90FF) empieza por el par del alfa.

Cómo encontrar el código hex de un color en pantalla

Usa un cuentagotas: una herramienta que lee el color que hay bajo el cursor y muestra su código. Son gratis y casi siempre ya los tienes instalados.

• Chrome y Edge: abre DevTools con F12, haz clic en cualquier cuadrado de color del panel Styles y usa el icono del cuentagotas para tomar un color de la página.
• PickShade: el selector de color de la página principal tiene un botón de cuentagotas en Chrome y Edge que toma colores de cualquier parte de la pantalla.
• Windows: instala Microsoft PowerToys y pulsa Win + Shift + C para abrir Color Picker.
• macOS: abre Medidor de Color Digital desde Aplicaciones, Utilidades. Cámbialo a sRGB y elige Visualización, Mostrar valores, En hexadecimal.
• Figma, Photoshop y la mayoría de las apps de diseño: pulsa I para el cuentagotas.
• En una foto o captura de pantalla: ábrela en el selector de color de imágenes y haz clic en cualquier píxel. La imagen no sale de tu dispositivo.

Un valor tomado con el cuentagotas puede desviarse unas pocas unidades del original, porque las pantallas aplican perfiles de color y las imágenes se comprimen. Cuando necesites el valor exacto, cópialo del archivo de diseño o del CSS, no de una captura.

Preguntas y respuestas