Notación CSS · sRGB · transparencia
Cómo funcionan los códigos de color HEX
Lee un valor de seis dígitos como pares de rojo, verde y azul, entiende la abreviación de tres dígitos y el alfa de ocho, y úsalo sin confundir notación, apariencia y accesibilidad.
códigos de color HEX
¿Qué significan los códigos de color HEX?
Los códigos de color HEX son instrucciones compactas de sRGB. En #RRGGBB, RR controla el rojo, GG el verde y BB el azul; cada par va de 00 a FF, es decir, de 0 a 255 en decimal. CSS también admite #RGB abreviado, #RGBA con transparencia y #RRGGBBAA con un par alfa completo. Estas formas describen canales numéricos, no un nombre universal de pintura, una apariencia calibrada ni un resultado automático de accesibilidad. La destreza útil consiste en descodificar los códigos de color HEX, conservarlos con precisión y probarlos en el contexto real.
Las cuatro reglas que conviene recordar
- códigos de color HEX: seis dígitos forman tres pares de rojo, verde y azul dentro del espacio sRGB
- códigos de color HEX: tres dígitos se duplican, por lo que #3A7 equivale exactamente a #33AA77
- códigos de color HEX: las formas de cuatro y ocho dígitos sitúan el alfa al final; 00 es transparente y FF opaco
- códigos de color HEX: el mismo valor puede verse distinto según la pantalla y el fondo, de modo que la notación es solo una parte de la decisión
Comparación de las cuatro formas HEX de CSS
CSS Color Module Level 4 define cuatro longitudes válidas. La tabla separa orden, precisión y transparencia para que códigos de color HEX parecidos no se traten como cadenas intercambiables.
| Forma | Orden de canales | Ejemplo | Equivalente | Estados disponibles |
|---|---|---|---|---|
| #RGB · códigos de color HEX | rojo, verde, azul | #3A7 | #33AA77 | 4096 colores |
| #RGBA · códigos de color HEX | rojo, verde, azul, alfa | #3A7C | #33AA77CC | 4096 colores × 16 niveles alfa |
| #RRGGBB · códigos de color HEX | rojo, verde, azul | #33AA77 | rgb(51 170 119) | 16 777 216 colores |
| #RRGGBBAA · códigos de color HEX | rojo, verde, azul, alfa | #33AA77CC | rgb(51 170 119 / 80%) | 16 777 216 colores × 256 niveles alfa |
códigos de color HEX: Lee cada canal como un número de base 16
El sistema hexadecimal usa dieciséis símbolos: del 0 al 9 y después de A a F para los valores decimales del 10 al 15. Dos símbolos codifican 16 × 16, o 256, estados. En los códigos de color HEX de seis dígitos, el primer par es rojo, el segundo verde y el tercero azul. 00 es el mínimo y FF es el máximo de 255. En #2468AC, el rojo es 0x24 o 36, el verde 0x68 o 104 y el azul 0xAC o 172. rgb(36 104 172) expresa las mismas coordenadas sRGB.
códigos de color HEX: Comprende la abreviación antes de acortar
Los códigos de color HEX de tres dígitos no omiten detalle de forma libre: cada dígito se duplica. #F09 se expande a #FF0099, #ABC a #AABBCC y #123 a #112233. Solo se puede abreviar un valor de seis dígitos cuando ambos caracteres de los tres pares coinciden. #33AA77 puede convertirse en #3A7, pero #32AA77 no. De ahí sale la diferencia de precisión: tres dígitos ofrecen 16 opciones por canal y 16³, o 4096 colores; seis dígitos ofrecen 256 por canal y 256³, o 16 777 216 colores.
códigos de color HEX: Coloca el alfa después del azul
Los códigos de color HEX de ocho dígitos siguen #RRGGBBAA. El último par es alfa: 00 significa transparencia total, FF opacidad total y los valores intermedios describen opacidad parcial. Por ejemplo, #0000FFCC es azul con alfa CC; el ejemplo del W3C lo equipara con un 80% de opacidad. #RGBA funciona como la forma corta, así que #05AC se expande a #0055AACC. El orden importa porque algunos sistemas gráficos usan otro orden de bytes. En CSS moderno, conserva siempre el alfa al final.
códigos de color HEX: Distingue lo que HEX conserva y lo que no
Los códigos de color HEX de CSS especifican sRGB directamente. Son compactos y conocidos, pero no nombran un color Display P3 de gama amplia, un valor Lab independiente del dispositivo, una receta CMYK de impresión ni una muestra material medida. Convertir una fuente de gama amplia en códigos de color HEX de seis dígitos puede mapear o recortar colores dentro de sRGB. Una captura, el selector del navegador y un archivo de diseño también pueden diferir por perfiles y exportación. Conserva el espacio de origen cuando sea relevante y entrega HEX solo cuando sRGB sea el destino.
Lista de control para una entrega HEX fiable
Antes de colocar un valor en CSS, una paleta o un token, comprueba tanto la notación como la decisión que la rodea.
- códigos de color HEX: confirma que hay exactamente 3, 4, 6 u 8 dígitos hexadecimales después de la almohadilla
- códigos de color HEX: expande la forma corta durante una revisión precisa para hacer visibles todos los canales
- códigos de color HEX: registra si el par alfa es intencional e identifica el fondo usado para evaluarlo
- códigos de color HEX: mantén sRGB como espacio asumido sin presentar el valor como una medida universal
- códigos de color HEX: prueba contraste, denominación y apariencia con la herramienta separada para cada tarea
Usa un valor HEX en tres pasos prácticos
Un flujo corto mantiene el código trazable y separa descodificación, descripción y validación.
códigos de color HEX: 1. Descodifica y normaliza
códigos de color HEX: pega el valor completo, verifica la longitud, expande la abreviación si hace falta y conserva el alfa. Confirma los números RGB antes de editar un canal.
códigos de color HEX: 2. Describe o toma una muestra
códigos de color HEX: usa el buscador de nombres cuando una etiqueta legible ayude a comunicar, o el selector de imagen cuando la fuente sea un píxel local. Trata el nombre como vecino descriptivo, no como identidad oficial.
códigos de color HEX: 3. Prueba la pareja real
códigos de color HEX: coloca el primer plano sobre su fondo previsto, considera la transparencia y ejecuta la comprobación. Guarda ambos valores y el estado de uso en el token o la nota de implementación.
Qué establecen las fuentes oficiales
La explicación usa especificaciones públicas comprobadas el 31 de julio de 2026. Los números describen sintaxis y reglas de prueba, no prometen posicionamiento.
- códigos de color HEX: CSS Color Module Level 4 define 3, 4, 6 y 8 dígitos, documenta el orden y señala 4096 colores para tres dígitos frente a unos 17 millones para seis. Leer la sección HEX del W3C
- códigos de color HEX: MDN documenta las cuatro sintaxis, el intervalo de 0 a FF, la duplicación, la indiferencia entre mayúsculas y minúsculas y los extremos alfa. Leer la referencia <hex-color> de MDN
- códigos de color HEX: WCAG 2.2 explica requisitos como 4,5:1 para texto normal y 3:1 para texto grande; un valor aislado no puede producir ninguno de esos ratios. Leer la guía de contraste de WCAG
“The number of hex digits given determines how to decode the hex notation into an RGB color.”
Preguntas sobre códigos de color HEX
¿HEX y RGB producen colores distintos?
códigos de color HEX: No cuando coinciden las coordenadas y el espacio. Los códigos de color HEX de seis dígitos y rgb() pueden expresar los mismos canales sRGB: #33AA77 equivale a rgb(51 170 119). Cambia la notación, no el color previsto. Otras funciones CSS representan espacios diferentes, por lo que conviene confirmar el espacio antes de exigir un equivalente de seis dígitos.
¿#RGBA coloca la transparencia al principio o al final?
códigos de color HEX: Al final. Los códigos de color HEX de cuatro y ocho dígitos usan #RGBA y #RRGGBBAA, de modo que A sigue al azul. #3A7C se expande a #33AA77CC. Otro software puede mostrar enteros con un orden de bytes diferente; comprueba cualquier valor de una API no CSS antes de pegarlo en una hoja de estilos.
¿Por qué dos valores HEX iguales pueden verse diferentes?
códigos de color HEX: Códigos de color HEX idénticos pueden estar rodeados por otros colores, componerse sobre fondos distintos o renderizarse en pantallas con diferentes perfiles. El código fija coordenadas sRGB y un alfa opcional, no todo el sistema de visualización. Compara dentro de la interfaz prevista y conserva el contexto.
¿Un valor HEX demuestra el contraste WCAG?
códigos de color HEX: No. El ratio requiere al menos un primer plano y un fondo, además de tratar correctamente la transparencia y los estados. Los códigos de color HEX aportan entradas, pero el resultado procede de comparar luminancias relativas. Prueba la pareja real en estados normal, hover, desactivado y foco cuando corresponda.