Colores de Tailwind CSS: la paleta v4 en OKLCH, colores propios y tonos

Cómo está organizada la paleta de colores de Tailwind

La paleta por defecto de Tailwind v4.3 tiene 26 escalas con nombre. Diecisiete son cromáticas: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink y rose. Nueve son neutras: slate, gray, zinc, neutral y stone, que vienen de v3, y mauve, olive, mist y taupe, añadidas durante v4. A esto se suman black y white.

Todas las escalas tienen los mismos 11 tonos: 50, 100, 200 y así hasta 900, y 950. El 50 es casi blanco y el 950 casi negro. Una clase es la utilidad más el color y el tono: bg-blue-500, text-rose-700, border-zinc-200.

El número de tono es una posición en la escala, no un valor de luminosidad. El tono 500 va desde un 55.1 % de luminosidad OKLCH en gray hasta un 79.5 % en yellow, y por eso yellow-500 y blue-500 se comportan de forma muy distinta como colores de texto.

Azul de Tailwind: todos los tonos con OKLCH, HEX y contraste

Esta es la escala azul completa tal como la define Tailwind v4. La columna HEX es el color sRGB más cercano, obtenido bajando el croma y manteniendo la luminosidad y el matiz. Los ratios de contraste son valores WCAG 2 medidos sobre ese HEX.

Blue-600 es el primer tono que alcanza 4.5:1 para texto de cuerpo sobre blanco. Blue-500 pasa sobre negro con 5.58:1, pero falla sobre blanco con 3.76:1. Ningún tono azul alcanza 4.5:1 sobre ambos, así que los temas claro y oscuro necesitan tonos distintos.

Qué tonos de Tailwind pasan WCAG AA sobre blanco

El tono más claro que pasa depende del matiz. Orange, amber, yellow, lime y los verdes, teal, cyan y sky siguen siendo claros en el 500, así que necesitan el 700 para texto de cuerpo. Red, blue, violet, purple, fuchsia, pink y rose pasan en el 600, e indigo ya en el 500. Yellow es la excepción: incluso yellow-600 falla para texto grande con 2.93:1.

La luminosidad predice el resultado mejor que el número de tono. Entre los 286 colores, todos los tonos con luminosidad OKLCH por debajo del 58 % alcanzan 4.5:1 sobre blanco, y todos los que superan el 59.2 % fallan. Lee la L en el valor de la clase y sabrás la respuesta antes de probarlo.

Todos los neutros salvo olive pasan en el 500. Olive-500 tiene un 58 % de luminosidad con un matiz amarillento y solo llega a 4.25:1, así que el texto en gray-500 y en olive-500 no es intercambiable.

Colores de Tailwind v3 frente a v4

v3 definía los colores como valores HEX en tailwind.config.js, dentro de theme.extend.colors. v4 lleva la configuración al CSS: los colores son variables de tema dentro de @theme, escritas en OKLCH y expuestas como variables CSS, así que var(--color-blue-500) funciona en CSS normal y en estilos en línea.

La paleta se reajustó, no se rediseñó. Convertido a OKLCH, el blue-500 de v3 (#3b82f6) tiene exactamente la misma luminosidad y el mismo matiz que el blue-500 de v4. Solo subió el croma, de 0.188 a 0.214. El resto de la escala azul sigue el mismo patrón, salvo blue-400, que además se oscureció 0.7 puntos. El contraste apenas cambia, mientras que los colores se ven más vivos.

Ese croma extra va más allá de sRGB. 94 de los 286 colores de v4 están fuera de sRGB y dentro de Display P3, y todos son cromáticos. Orange tiene fuera 9 de sus 11 tonos, blue tiene 4 (del 200 al 500). En una pantalla P3 ves el color completo; en una sRGB, el navegador muestra uno cercano. v4 apunta a Safari 16.4, Chrome 111 y Firefox 128 o posteriores, que entienden oklch().

@theme {
    --color-blue-500: oklch(62.3% 0.214 259.815);
}

.card {
    border-color: var(--color-blue-500);
}

Cómo añadir colores propios en Tailwind v4

Declara una variable en el espacio de nombres --color- dentro de @theme. Lo que va después de --color- se convierte en el nombre de la clase, así que --color-brand te da bg-brand, text-brand, border-brand, ring-brand y todas las demás utilidades de color, además de var(--color-brand) en CSS. Se aceptan HEX, rgb(), hsl() y oklch().

Para sustituir la paleta por defecto en lugar de ampliarla, primero reinicia el espacio de nombres con --color-*: initial y luego define solo los colores que quieras. Las utilidades solo se generan para las clases que usas de verdad, así que la mayoría de los proyectos conserva los colores por defecto.

@import 'tailwindcss';

@theme {
    --color-brand: #e4572e;
    --color-ink: oklch(21% 0.02 260);
}

Un solo --color-brand basta para un color de acento. En cuanto necesites estados hover, fondos tintados o modo oscuro, define una escala completa con tonos numerados.

Cómo crear una escala propia completa de 50 a 950

La escala de abajo se generó a partir de #e4572e. Su luminosidad del 63.7 % corresponde al tono 500, así que el color de marca queda exactamente en el 500. Los demás tonos siguen la curva de luminosidad de Tailwind y mantienen el mismo matiz; el croma alcanza su máximo en el 500 y el 600 y se reduce hacia los extremos, y todos caben en sRGB, así que los valores HEX son exactos.

Como los matices cálidos del propio Tailwind, esta escala necesita el 600 para texto de cuerpo sobre blanco. Brand-500 da 3.68:1, suficiente solo para texto grande e iconos.

@theme {
    --color-brand-50: oklch(97% 0.01103 36.478);
    --color-brand-100: oklch(93.477% 0.02574 36.478);
    --color-brand-200: oklch(88.485% 0.04964 36.478);
    --color-brand-300: oklch(81.145% 0.08641 36.478);
    --color-brand-400: oklch(71.064% 0.14524 36.478);
    --color-brand-500: oklch(63.723% 0.18385 36.478);
    --color-brand-600: oklch(56.583% 0.19167 36.478);
    --color-brand-700: oklch(49.952% 0.16921 36.478);
    --color-brand-800: oklch(43.729% 0.14814 36.478);
    --color-brand-900: oklch(38.935% 0.11766 36.478);
    --color-brand-950: oklch(27% 0.07538 36.478);
}

Conserva toda la precisión al pegar. Redondear la luminosidad a 0.1 % y el croma a tres decimales saca a brand-600 justo fuera de sRGB, lo que no causa problemas, pero ya no coincide exactamente con el HEX.

Cómo funcionan los modificadores de opacidad como bg-blue-500/50

Una barra después del color fija su canal alfa: bg-blue-500/50 es blue-500 al 50 %. v3 lo compilaba a rgb(59 130 246 / 0.5), lo que solo funcionaba con colores que Tailwind podía separar en canales. Los colores propios definidos como variables CSS necesitaban un formato especial, rgb(var(--brand) / <alpha-value>).

v4 compila el modificador a color-mix() en Oklab, mezclando el color con transparent. Eso funciona con cualquier color: variables de tema, valores arbitrarios como bg-[#e4572e]/50 y tus propias variables CSS.

La opacidad cambia el contraste. Sobre blanco, blue-500/50 se ve como #95bfff y blue-500/10 como #eaf2ff. El texto en blue-600 se lee con 5.25:1, pero text-blue-600/60 baja a 2.62:1 y falla incluso para texto grande.

• blue-500#2b7fff
• blue-500/50 sobre blanco#95bfff
• blue-500/20 sobre blanco#d5e5ff
• blue-500/10 sobre blanco#eaf2ff

.bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
}

Cómo encontrar la clase de Tailwind más cercana a cualquier HEX

Compara el HEX con los 286 tonos por distancia perceptual en Oklab (ΔEOK). Por debajo de unos 0.02 la diferencia cuesta verla lado a lado, así que la clase de Tailwind puede sustituir a tu color. Por encima de unos 0.04, mejor añade un color propio.

La tabla muestra coincidencias reales. Los antiguos valores HEX de v3 vuelven a la misma clase de v4, mientras que un naranja de marca típico como #ff5733 cae entre orange-600 y red-400. La página de Tailwind de PickShade hace esta búsqueda para cualquier color y muestra las tres clases más cercanas.

Preguntas y respuestas