Si alguna vez has echado un vistazo al CSS de un sitio web, has abierto un selector de color en Photoshop o has intentado igualar el tono exacto de una marca, ya has encontrado los códigos de color HEX. A primera vista parecen crípticos — #FF5733, #1A1A2E, #FFFFFF — pero la lógica que hay detrás es elegante y fácil de aprender. Esta guía explica exactamente qué son los códigos HEX, cómo funcionan y cómo leerlos con confianza.
¿Qué Significa “HEX”?
HEX es la abreviatura de hexadecimal — una combinación del griego hex (“seis”) y el latín decimalis (“de diez”). Se refiere a un sistema numérico de base 16, a diferencia del sistema de base 10 (decimal) que usamos en la vida cotidiana.
Para entender por qué importa la base 16, conviene dar un paso atrás.
Sistemas Numéricos: Una Introducción Rápida
Cada sistema numérico es esencialmente un lenguaje diferente para representar cantidades. El sistema que aprendiste en la escuela — el decimal — usa diez símbolos: del 0 al 9. Cuando superas el 9, añades otro dígito y empiezas de nuevo (10, 11, 12…).
Las computadoras, a nivel de hardware, trabajan en base 2 (binario): solo dos símbolos, 0 y 1, que representan los estados encendido/apagado de los transistores. El binario es preciso, pero verboso — el número 255 en binario es 11111111, con ocho dígitos.
Aquí es donde el hexadecimal entra como un término medio práctico. La base 16 usa dieciséis símbolos: 0–9 y A–F, donde A = 10, B = 11, C = 12, D = 13, E = 14, F = 15.
Como solo existen diez dígitos numéricos (0–9), el hexadecimal toma prestadas seis letras: de la A a la F, representando los valores del 10 al 15. Esto significa que un único dígito hex puede representar 16 valores diferentes, mientras que un único dígito decimal solo puede representar 10. Dos dígitos hex juntos pueden representar 256 valores diferentes (16 × 16), que es exactamente el rango necesario para los canales de color.
Ejemplos Rápidos de Conversión
- Decimal 0 = Hex 00
- Decimal 15 = Hex 0F
- Decimal 16 = Hex 10
- Decimal 255 = Hex FF
Lo clave: 255 en decimal es FF en hex — solo dos caracteres en lugar de tres. Esta compacidad es exactamente la razón por la que el hexadecimal fue elegido para los códigos de color.
El Modelo de Color RGB
Antes de poder decodificar un código de color HEX, necesitamos entender qué está codificando: los valores RGB.
El modelo RGB representa los colores como combinaciones de tres fuentes de luz — Rojo (Red), Verde (Green) y Azul (Blue) — en distintas intensidades. Mezcla luz roja y verde y obtienes amarillo. Mezcla las tres en máxima intensidad y obtienes blanco. Cero intensidad en las tres resulta en negro.
Cada canal tiene un valor de 0 a 255 (256 niveles posibles). Así, un color en RGB se expresa como tres números: rgb(255, 87, 51), por ejemplo.
El modelo RGB es nativo de las pantallas, que producen luz. Por eso es el estándar en diseño web y de interfaces. (El diseño para impresión usa CMYK, que es un modelo sustractivo basado en tinta.)
Cómo Funcionan los Códigos de Color HEX
Un código de color HEX es simplemente un valor RGB escrito en notación hexadecimal. El formato es:
#RRGGBBDonde:
- # es el prefijo que indica un valor de color hex
- RR es el canal rojo (00–FF)
- GG es el canal verde (00–FF)
- BB es el canal azul (00–FF)
Cada par de dígitos hex representa la intensidad de un canal de color, de 0 (00) a 255 (FF).
Leyendo un Código HEX
Tomemos #FF5733:
- FF = 255 rojo → intensidad máxima de rojo
- 57 = 87 verde → verde moderado
- 33 = 51 azul → poco azul
El resultado: un naranja-rojizo cálido y vibrante.
Colores de Referencia Comunes
#FF0000— rojo puro (rojo máximo, sin verde, sin azul)#00FF00— verde puro#0000FF— azul puro#FFFFFF— blanco (todos los canales al máximo)#000000— negro (todos los canales en cero)#808080— gris medio (todos los canales en 128)
Nota el patrón: cuando los tres canales son iguales, obtienes un tono de gris — de #000000 (negro) a #FFFFFF (blanco).
La Abreviatura: Códigos HEX de 3 Dígitos
Cuando cada par en un código HEX consiste en dos dígitos idénticos, se puede abreviar a un solo dígito por canal:
#FFFFFF→#FFF(blanco)#000000→#000(negro)#FF0000→#F00(rojo)#AABBCC→#ABC
Esta abreviatura solo funciona cuando cada par es un dígito duplicado. #FF5733 no puede abreviarse — los pares son FF, 57 y 33, y 57 y 33 no son dígitos duplicados. La abreviatura de 3 dígitos es CSS válido y reconocida por todos los navegadores principales.
HEX con Transparencia: Códigos de 8 Dígitos
Los códigos HEX estándar definen tres canales de color. Pero el CSS moderno también admite un canal alfa (transparencia) opcional, produciendo un formato de 8 dígitos:
#RRGGBBAALos dos últimos dígitos (AA) representan la opacidad de 00 (totalmente transparente) a FF (totalmente opaco):
#FF573300— completamente invisible#FF573380— 50% de transparencia (aproximadamente)#FF5733FF— totalmente opaco (igual que#FF5733)
Este formato es compatible con CSS4 y con las herramientas de diseño modernas. Es útil para especificar superposiciones traslúcidas, sombras y elementos de interfaz en capas directamente en el código.
Una Breve Historia: Por Qué HEX Se Convirtió en el Estándar para la Web
Antes de los años 90, la gestión del color en las computadoras era inconsistente — distintos sistemas operativos y monitores manejaban el color de formas diferentes. Con el surgimiento de la web, se necesitaba una manera consistente y compacta de especificar colores en distintos dispositivos.
La primera especificación HTML definió 16 colores con nombre — rojo, azul, verde, entre otros — un conjunto que suele llamarse la paleta “básica” o “web-safe”. Pero 16 colores resultaron insuficientes rápidamente para trabajos de diseño reales.
La notación de color HEX, ya establecida en contextos informáticos, fue adoptada como la forma estándar de especificar colores arbitrarios en HTML y CSS. Permitía que cualquiera de los 16.777.216 colores RGB posibles (256 × 256 × 256) se escribiera de forma compacta en seis caracteres.
Especificaciones posteriores agregaron las notaciones rgb() y hsl() como alternativas en CSS, pero HEX sigue siendo el formato más usado en la práctica — especialmente para compartir colores entre diseñadores y desarrolladores.
HEX vs. Otros Formatos de Color
HEX no es la única forma de especificar colores en CSS y herramientas de diseño. Así es como se compara:
- HEX (
#FF5733) — Compacto y ampliamente reconocido. Estándar en la mayoría de las herramientas de diseño y bases de código CSS. Un poco difícil de leer sin práctica. - RGB (
rgb(255, 87, 51)) — Más legible para los humanos. Más fácil de ajustar canales individuales. Requiere más caracteres. Admite canal alfa conrgba(). - HSL (
hsl(11, 100%, 60%)) — Significa Tono, Saturación, Luminosidad. Más intuitivo para diseñar relaciones de color — rotar el valor del tono desplaza el color alrededor de la rueda de colores de forma predecible. - Colores con Nombre — CSS reconoce más de 140 colores con nombre:
tomato,steelblue,rebeccapurple. Fácil de leer, pero limitado al conjunto predefinido.
En la práctica, HEX es la lengua franca — la mayoría de los diseñadores y desarrolladores piensan y se comunican en HEX, aunque usen HSL internamente para la manipulación programática de colores.
Trabajando con Colores HEX en la Práctica
No necesitas convertir manualmente entre decimal y hexadecimal — las herramientas de diseño y los entornos de desarrollo lo hacen automáticamente.
- En Figma: Haz clic en cualquier muestra de color para abrir el selector. El valor HEX se muestra y es editable directamente. También puedes cambiar entre HEX, RGB, HSL y otros formatos en el selector.
- En Adobe Photoshop / Illustrator: El selector de color muestra valores HEX junto con RGB y otros modelos. Copia un código HEX directamente desde el selector para usarlo en el código.
- En CSS: Usa el valor HEX directamente en tu hoja de estilos:
color: #FF5733;obackground-color: #1A1A2E; - DevTools del Navegador: El inspector de Chrome y Firefox muestra los colores calculados y permite editar valores HEX en tiempo real, con un selector de color integrado.
- Herramientas de conversión de colores: Herramientas como coolors.co, color.adobe.com o simplemente buscar “selector de color” en Google ofrecen conversión instantánea entre HEX, RGB y HSL.
Leyendo Códigos HEX Como un Diseñador
Con un poco de práctica, puedes desarrollar una percepción intuitiva de lo que representa un código HEX sin necesitar una herramienta para visualizarlo:
- Primer par más alto = más rojo.
#FFal inicio significa canal rojo máximo;#00significa sin rojo. - Pares iguales = neutro.
#808080es un gris medio porque todos los canales están equilibrados en 128. - FF significa máximo, 00 significa ninguno.
#00FF00es verde puro;#000080es azul marino oscuro (sin rojo, sin verde, azul a media intensidad). - Códigos con pares cercanos a FF = colores claros/brillantes.
#FFFACD(amarillo limón) es casi blanco — todos los canales son altos. - Códigos con pares cercanos a 00 = colores oscuros.
#1A1A2Ees un azul marino casi negro.
Resumen
Los códigos de color HEX son una forma compacta y hexadecimal de expresar valores de color RGB — cada par de caracteres representa un canal de color (rojo, verde, azul) en una escala del 00 al FF. Una vez que entiendes la estructura, leer y trabajar con códigos HEX se vuelve algo natural.
No necesitas hacer los cálculos tú mismo — Figma, Photoshop, VS Code y el DevTools de tu navegador se encargan de la conversión. Pero entender cómo funcionan los códigos HEX te convierte en un diseñador y desarrollador más fluido: puedes leer un color de un vistazo, depurar tonos inesperados y comunicarte con precisión con cualquier colaborador.
El color es el elemento visual más inmediato de cualquier diseño. Los códigos HEX son la forma en que ese elemento se especifica, comparte y reproduce de manera consistente — entre herramientas, equipos y pantallas.
