Cómo funcionan los colores hexadecimales en CSS (sin tener que recordar la tabla)

Casi todo el mundo usa colores hexadecimales en CSS y casi nadie sabe leerlos. Lo cual está bien si tienes color picker a mano, pero es como ir al supermercado sin saber sumar: funciona, hasta que no funciona. Este artículo es un repaso completo — con apps interactivas para que practiques mientras lees, no solo para mirar bonitas capturas.

1. La fórmula en una línea

El formato #RRGGBB tiene tres pares hexadecimales: rojo, verde y azul. Cada par va de 00 (apagado) a FF (al máximo, 255 en decimal). Los dígitos hex válidos son 0–9 y A–F — 16 valores posibles por carácter.

La cuenta es 16 × 16 = 256 valores por canal, los mismos que ofrece la notación rgb(0–255, 0–255, 0–255). Por eso son intercambiables.

Descomponer un HEX al vuelo

Esta calculadora descompone cualquier color HEX en sus tres canales y los muestra como barras + decimal. Cambia el valor o pulsa el picker para ver cómo varía.

2. Los seis colores que conviene saber de memoria

Si recuerdas estos seis puedes leer cualquier color HEX «a ojo» con un margen razonable:

Patrón clave: cuanto más alta es la suma de los tres canales, más claro es el color. #FFFFFF (255+255+255 = 765) es blanco; #000000 (0) es negro; cualquier color con los tres canales iguales (#404040, #909090, etc.) es un gris.

3. Mezcla aditiva — por qué rojo + verde = amarillo

Los monitores no pintan colores: emiten luz. Cada píxel tiene tres pequeñas fuentes (roja, verde y azul) y el color que ves es la suma de las tres intensidades. Por eso al subir rojo + verde sale amarillo (no marrón como con pintura), y los tres juntos al máximo dan blanco.

Esto explica por qué los colores «primarios» en pantalla son RGB y no los pigmentos clásicos (rojo, amarillo, azul) que aprendimos en el cole: el modelo es distinto porque el medio es distinto.

4. Picker interactivo: HEX, RGB y HSL al mismo tiempo

El siguiente picker te permite elegir un color y ver al instante sus tres representaciones más usadas en CSS. Pulsa cualquiera de los tres formatos al pie para copiarlo al portapapeles.

Las tres notaciones son válidas en CSS — color: #EA580C;, color: rgb(234, 88, 12); y color: hsl(20, 90%, 48%); producen exactamente el mismo color. Cuándo usar cada una:

• HEX — la más compacta. Predilecta para design systems y código checked-in.
• RGB / RGBA — la única que acepta transparencia con la notación clásica (rgba(0,0,0,0.5)). Hoy en día puedes usar #000000aa en HEX moderno también.
• HSL — la única que es legible para humanos. Verás por qué en la siguiente sección.

5. HSL: la notación que tiene sentido

HSL significa Hue, Saturation, Lightness:

• Hue (0–360°) — el matiz, posicionado sobre una rueda de color. 0° rojo, 120° verde, 240° azul.
• Saturation (0–100%) — cuánta «cantidad» del color hay. 0% es siempre gris, 100% es el color puro.
• Lightness (0–100%) — luminosidad. 0% negro, 50% el tono puro, 100% blanco.

La ventaja: para hacer un tono más claro u oscuro de un mismo color, basta con tocar la L sin tocar las otras dos. En HEX y RGB tendrías que recalcular los tres canales.

6. Construir una paleta a partir de un color base

Una de las razones por las que Tailwind ganó tanta tracción es su sistema de tonos numerados (blue-50, blue-100, …, blue-900). Cualquier color base se descompone en 10 escalones del más claro al más oscuro manteniendo el matiz constante.

Este generador hace exactamente eso a partir del color que elijas. Click en cualquier swatch para copiar el HEX.

Trucos para crear paletas que no parezcan amateurs:

1. Elige UN color de marca y deriva todos los tonos a partir de él.
2. Para colores secundarios (info, success, warning, danger), mantén la misma saturación y luminosidad — solo cambia el matiz. La paleta resultante se siente coherente sin pensar.
3. Evita usar los extremos (50 y 900) como color de texto principal. Reserva el 900 para titulares en fondo claro, y el 50 para hover states sutiles.

7. Gradientes: dos colores y un ángulo

Un linear-gradient es solo dos colores con una dirección. Los tres elementos: color inicial, color final, ángulo en grados (0deg = abajo→arriba, 90deg = izquierda→derecha, 135deg = diagonal típica).

El click en el bloque de código copia el snippet listo para pegar en tu CSS. Para gradientes con más de dos colores, añade stops manualmente:

background: linear-gradient(135deg, #EA580C 0%, #FB923C 50%, #3B82F6 100%);

8. Contraste: ¿se lee tu texto?

La parte que casi nadie revisa pero es la que más impacto tiene en la usabilidad. El estándar de accesibilidad (WCAG 2.1) define cuatro umbrales:

• AA texto normal: ratio mínimo 4.5 : 1
• AA texto grande (≥18 pt, o ≥14 pt bold): ratio mínimo 3 : 1
• AAA texto normal: ratio mínimo 7 : 1
• AAA texto grande: ratio mínimo 4.5 : 1

Comprobar el ratio entre dos colores es trivial. El siguiente widget lo calcula y te dice si pasa cada nivel:

El caso clásico que falla: texto gris claro sobre fondo blanco. Queda «moderno» pero la mitad de tus visitantes con menos vista no podrán leerlo. Si tu diseñador insiste en gris #A0A0A0 sobre blanco, enséñale el ratio de 2.85 : 1 y obsérvale enfadarse.

9. La forma corta: HEX de 3 dígitos

CSS acepta #RGB como abreviación de #RRGGBB: cada dígito se duplica. #F00 equivale a #FF0000; #3AC equivale a #33AACC.

Limitación: solo puedes representar 4096 colores con la forma corta (frente a los 16.7 millones de la larga). Pero para colores planos y prototipos, es perfecto.

10. Cheat sheet final

Y si te aburres en una reunión, intenta leer el color HEX de la marca de tu empresa en voz alta. Te garantizo que vas a ser el único en la sala.