¿Qué es un código hex? El lenguaje del color digital

Cada color en cada sitio web, aplicación e interfaz digital tiene una dirección numérica precisa. Durante la mayor parte de la historia de la web, esa dirección ha tomado una forma específica: un símbolo de almohadilla seguido de seis caracteres, como #3B82F6 o #FF5733. Estos son los códigos hex — la lengua franca del color digital.

Si diseña para pantallas, crea aplicaciones web o trabaja con cualquier herramienta de diseño, se encontrará con códigos hex constantemente. Este artículo explica exactamente qué son, cómo el sistema de numeración hexadecimal los hace funcionar, y todo lo que necesita saber sobre la notación abreviada, la transparencia alfa y cómo encontrar códigos hex para cualquier color.

El sistema de numeración hexadecimal

La palabra "hex" proviene del griego hexas, que significa seis, y "decimal" del latín para diez. Hexadecimal es un sistema de numeración en base 16 — en comparación con el sistema decimal en base 10 que usamos en la vida cotidiana.

En base 10, se cuenta: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 — y luego se agrega un dígito: 10, 11, 12...

En base 16, se cuenta: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 — y luego se usan letras para continuar: A, B, C, D, E, F — antes de agregar un dígito: 10 (que equivale a 16 en decimal), 11 (17), ... FF (255).

¿Por qué base 16 para colores?

La razón es elegantemente práctica. Un byte de computadora contiene 8 bits binarios y puede contener valores del 0 al 255. En hexadecimal, ese rango completo cabe en exactamente dos dígitos: 00 (0) a FF (255). Esto hace que el hex sea una codificación compacta y legible para valores del tamaño de un byte — que es exactamente lo que es cada canal de color.

En el modelo de color RGB, cada uno de los tres canales — Rojo, Verde, Azul — es un valor del 0 al 255. En hexadecimal, eso es 00 a FF. Tres canales, dos dígitos hex cada uno, da un total de seis caracteres. Agregue el prefijo # para señalar "esto es un color", y tiene el código hex estándar.

Leer códigos hex de 6 dígitos (#RRGGBB)

Un código hex estándar tiene la estructura #RRGGBB:

• # — prefijo que señala un valor de color hex
• RR — dos dígitos hex que codifican el canal Rojo (00–FF)
• GG — dos dígitos hex que codifican el canal Verde (00–FF)
• BB — dos dígitos hex que codifican el canal Azul (00–FF)

Decodificando un ejemplo

Tome #FF5733 — un coral-rojo cálido:

El canal rojo máximo con verde moderado y azul bajo produce un naranja-rojo vívido. El azul bajo evita que el color se desplace hacia el neutro.

Ahora tome #3B82F6 — un azul cielo:

El azul dominante con verde moderado produce un azul medio vívido con una ligera calidad cian. El rojo bajo lo mantiene frío.

Heurísticas rápidas de lectura

Una vez que comprende la estructura, puede leer los códigos hex aproximadamente de un vistazo:

• 00 en un canal = nada de ese primario (completamente oscuro en ese canal)
• FF en un canal = intensidad total de ese primario
• 80 ≈ media intensidad (128 de 255)

Esto le permite decodificar códigos comunes rápidamente:

Los valores iguales en los tres canales siempre producen un neutro — gris, negro o blanco según el nivel. Los valores desiguales siempre producen un color. Los valores más altos indican qué color primario domina.

Identificar códigos hex claros vs. oscuros

Si los seis caracteres son valores hex altos (C, D, E, F), el color será claro. Si todos son bajos (0, 1, 2, 3), será oscuro. Esto da una lectura instantánea de luminosidad:

• #F0E6D3 — todos los valores altos → beige cálido claro
• #1A1A2E — todos los valores bajos → azul marino muy oscuro
• #7C3AED — valores mixtos, azul alto → púrpura medio

Notación abreviada de 3 dígitos

CSS permite una abreviatura de tres caracteres hex cuando cada par de dígitos en el código completo de seis caracteres consiste en dos caracteres idénticos. #AABBCC se convierte en #ABC. Cada dígito abreviado simplemente se duplica para producir la versión completa.

Cuándo es válida la abreviatura

La abreviatura solo funciona cuando cada par es un dígito repetido. #3B82F6 no puede abreviarse porque 3B, 82 y F6 no son pares duplicados. Pero #336699 califica como #369 porque 33, 66 y 99 repiten cada uno un solo dígito.

En la práctica, la abreviatura es una característica válida de CSS, pero muchos equipos estandarizan el formato completo de seis caracteres para mayor claridad. La versión de seis caracteres hace que sea inmediatamente obvio cuál es el valor de cada canal. Muchos linters y guías de estilo imponen el hex completo para mantener la consistencia.

Hex de 8 dígitos con transparencia alfa

El código hex estándar de seis caracteres codifica solo RGB — no hay información de opacidad. Para agregar transparencia alfa (que controla cuán opaco o transparente es un color), CSS admite un formato hex de ocho caracteres:

#RRGGBBAA

El par final AA codifica el canal alfa, usando el mismo rango de 0–255 que los canales de color, mapeado a la opacidad:

Ejemplos prácticos de hex de 8 dígitos

Una superposición oscura para fondos de modal: #000000 al 70% de opacidad → #000000B3

Un azul de marca #3B82F6 al 50% de opacidad → #3B82F680

Un blanco puro #FFFFFF al 10% de opacidad (resaltado sutil) → #FFFFFF1A

/* Fondo de modal */
.modal-overlay {
  background-color: #000000B3;
}

/* Panel de vidrio esmerilado */
.glass-card {
  background-color: #FFFFFF1A;
  backdrop-filter: blur(12px);
}

Abreviatura alfa de 4 dígitos

Así como existe la abreviatura #RGB para #RRGGBB, existe una abreviatura #RGBA para #RRGGBBAA:

• #F00F = #FF0000FF (rojo puro, completamente opaco)
• #0008 = #00000088 (negro al ~53% de opacidad)
• #FFF0 = #FFFFFF00 (blanco completamente transparente)

Hex alfa vs. rgba()

Antes de que el hex de ocho caracteres tuviera amplio soporte, la forma estándar de agregar transparencia era CSS rgba():

/* Estas dos declaraciones son equivalentes */
background-color: #3B82F680;
background-color: rgba(59, 130, 246, 0.5);

Ambas tienen buen soporte en todos los navegadores modernos. La forma rgba() suele ser más legible en CSS porque la opacidad se expresa como un decimal del 0 al 1, que es inmediatamente comprensible. La forma hex de ocho caracteres es más compacta pero requiere conversión mental de hex a porcentaje de opacidad.

Encontrar y convertir códigos hex

En herramientas de diseño

Cada herramienta de diseño importante expone los valores hex:

• Figma — Haga clic en cualquier relleno o trazo de color; el código hex aparece en el panel Fill a la derecha. Haga clic en "HEX" para copiar.
• Adobe Illustrator / Photoshop — El selector de color y el panel de muestras muestran códigos hex. Ventana > Color si el panel no está visible.
• Sketch — El campo de relleno muestra códigos hex con un botón de copiar.
• Canva — Haga clic en cualquier elemento, luego en el chip de color de relleno para ver y copiar el código hex.

En navegadores web

Haga clic derecho en cualquier elemento de una página web y elija "Inspeccionar" o "Inspeccionar elemento". En las DevTools del navegador, busque el elemento en el panel CSS. Haga clic en cualquier valor de color — a menudo alterna entre opciones de formato (hex, rgb, hsl, oklch) con cada clic. Las Chrome DevTools también muestran una superposición de selector de color.

Para una captura rápida de color sin DevTools, las extensiones del navegador como ColorZilla (Chrome/Firefox) le permiten muestrear cualquier píxel en pantalla y copiar su código hex.

En ColorFYI

Cada página de detalle de color en ColorFYI — como /color/FF5733/ o /color/3B82F6/ — muestra el código hex completo junto con los valores RGB, HSL, CMYK y OKLCH. Si tiene un color en otro formato, use el Conversor de Color para convertirlo a hex al instante:

• RGB a hex: Ingrese rgb(255, 87, 51) → obtenga #FF5733
• HSL a hex: Ingrese hsl(11, 100%, 60%) → obtenga el equivalente hex
• CMYK a hex: Ingrese porcentajes CMYK → obtenga el hex sRGB aproximado

Tabla común de conversión hex

Hex en CSS: uso práctico

Los códigos hex funcionan en cualquier propiedad CSS que acepte un valor de color:

/* Texto */
color: #1E293B;

/* Fondo */
background-color: #F8FAFC;

/* Borde */
border: 1px solid #E2E8F0;

/* Sombra de caja con alfa */
box-shadow: 0 4px 16px #0000001A;

/* Propiedades personalizadas CSS */
:root {
  --color-primary: #3B82F6;
  --color-primary-dark: #1D4ED8;
  --color-surface: #F8FAFC;
}

Sensibilidad a mayúsculas y minúsculas

Los códigos hex no distinguen entre mayúsculas y minúsculas en CSS. #3B82F6, #3b82f6 y #3B82f6 son idénticos. La mayoría de los equipos estandarizan en mayúsculas completas o minúsculas completas para mantener la consistencia. Las mayúsculas son tradicionales en las herramientas de diseño; las minúsculas son populares en las bases de código modernas y son preferidas por muchos linters.

Conclusiones clave

• Un código hex es un número hexadecimal de seis caracteres que codifica valores de color RGB. La estructura es #RRGGBB — dos dígitos hex cada uno para rojo, verde y azul.
• El hexadecimal es base 16, usando dígitos 0–9 y letras A–F. Cada par de dos dígitos hex codifica un valor del 0 (00) al 255 (FF), que coincide con el rango completo de un canal RGB.
• Leer un código hex: los valores altos en un par significan alta intensidad del canal. Los valores iguales en los tres pares producen un neutro (gris, negro o blanco). Los valores desiguales producen un color sesgado hacia el canal más alto.
• La abreviatura de 3 dígitos (#RGB) es válida cuando cada par repite un solo dígito — #336699 se abrevia a #369.
• El hex de 8 dígitos (#RRGGBBAA) agrega un canal de transparencia alfa. Los últimos dos dígitos van de 00 (transparente) a FF (opaco).
• Encuentre códigos hex en el selector de color de cualquier herramienta de diseño, en las DevTools del navegador inspeccionando elementos, o en cualquier página de color de ColorFYI.
• Use el Conversor de Color para traducir entre hex, RGB, HSL, CMYK y OKLCH al instante.