Sistema de color de Tailwind CSS: cómo se generan los tonos

Tailwind CSS incluye uno de los sistemas de color más utilizados en el desarrollo web. Su paleta de 22 familias de color — cada una dividida en 11 tonos del 50 al 950 — impulsa millones de sitios web y se ha convertido en un estándar de facto sobre cómo los desarrolladores piensan en las escalas de color. Pero ¿de dónde vienen estos tonos, cómo se generan y cómo puedes construir tus propias escalas que encajen perfectamente en el sistema? Este artículo responde todas esas preguntas.

La filosofía de diseño de color de Tailwind

Tailwind no utiliza un enfoque aritmético simple para la generación de tonos. En cambio, el equipo de Tailwind curó a mano cada tono de la paleta original usando una combinación de luminosidad perceptual y criterio estético, con el objetivo de crear tonos que sean:

1. Útiles en cada paso: Cada tono del 50 al 950 debe ser un tono que alguien plausiblemente querría usar — no un relleno que acabe sin usarse.
2. Consistentes entre matices: Un tono 500 de azul debe sentirse igualmente "intermedio" en brillo percibido que un tono 500 de verde, aunque los valores hex subyacentes sean completamente diferentes.
3. Conscientes de WCAG: Los tonos más oscuros (700–950) deben lograr contraste AA contra blanco; los tonos más claros (50–200) deben lograr contraste AA contra negro.

Esta filosofía explica por qué no se puede generar la paleta de Tailwind con una fórmula simple de luminosidad HSL. Los matices difieren en su brillo perceptual inherente — el amarillo es intrínsecamente más claro que el azul con el mismo valor de luminosidad HSL — por lo que cada familia de color requiere ajuste individual.

Las 22 familias de color

Tailwind v3 y v4 incluyen 22 familias de color con nombre:

Nótese las cinco familias neutras (de slate a stone): no son simplemente diferentes niveles de saturación del mismo gris. Cada una tiene una tonalidad de matiz distinta — slate se inclina hacia el gris azulado, stone hacia el gris marrón cálido, neutral es el más puramente acromático. Esto da a los diseñadores opciones para entornos que requieren tonos fríos, cálidos o neutros en su andamiaje gris.

Los 11 pasos de tono

Cada familia de color contiene once tonos:

El tono 950 se añadió más tarde porque los diseñadores encontraban que el 900 a veces no era lo suficientemente oscuro para efectos de sombra profunda, especialmente en modo oscuro donde los colores de superficie son muy oscuros y necesitan un tono aún más profundo para el apilamiento.

El paso 500 es intencionalmente el tono "canónico" de cada color — el que parece más a lo que esperarías si alguien dijera "quiero azul" o "quiero verde". Todos los demás pasos se entienden en relación con este ancla.

Cómo funciona el algoritmo de tonos

Aunque los colores de Tailwind fueron curados a mano, el equipo usó un proceso basado en el espacio de color OKLCH para mantener la consistencia perceptual. OKLCH (Luminosidad-Croma-Matiz de Oklab) está diseñado para que cambios numéricos iguales en la luminosidad produzcan cambios de brillo percibido iguales, a diferencia de HSL o RGB donde los cambios de matiz alteran dramáticamente la luminosidad percibida.

El proceso general para una familia de color es el siguiente:

1. Elegir el valor 500: Definir el color de marca primario para esta familia en OKLCH o un espacio perceptual equivalente.
2. Establecer objetivos de luminosidad para cada paso: Asignar los 11 pasos a valores específicos de luminosidad OKLCH — por ejemplo, el paso 50 puede apuntar a una luminosidad OKLCH de 0.97, mientras que el paso 950 apunta a 0.13.
3. Mantener croma y matiz: Donde sea posible, mantener constantes el croma (saturación) y el ángulo de matiz en todos los pasos, ajustando solo la luminosidad.
4. Ajustar a mano para la desviación de matiz: Muchos matices exhiben desviaciones de matiz no deseadas al aclararse u oscurecerse en OKLCH. El amarillo, por ejemplo, tiende a desviarse hacia el verde al oscurecerse. Se requiere ajuste humano en cada paso para corregir estas desviaciones.
5. Convertir a hex sRGB: Los valores OKLCH finales se convierten a códigos hex para su uso en CSS.

Puedes ver el resultado de este proceso comparando cómo la paleta de Tailwind maneja el amarillo frente al azul. Los pasos del azul cambian ligeramente de temperatura (los azules más oscuros tienen más carácter índigo), mientras que los pasos del amarillo se desplazan hacia el oliva al oscurecerse para evitar volverse turbios. Estas son correcciones perceptuales deliberadas que ningún algoritmo puro produciría automáticamente.

Usa el Conversor de color para examinar cualquier valor hex de Tailwind en el espacio OKLCH y observar cómo cambian la luminosidad, el croma y el matiz a lo largo de la escala.

Personalización de la paleta de color de Tailwind

Tailwind v3 (tailwind.config.js)

En Tailwind v3, extiende o reemplaza la paleta en tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49',
        },
      },
    },
  },
}

Usar extend preserva todos los colores integrados; reemplazar theme.colors directamente los elimina.

Tailwind v4 (configuración CSS-first)

Tailwind v4 elimina el archivo de configuración JavaScript. Los colores ahora se definen como propiedades personalizadas CSS en tu archivo CSS principal:

@import "tailwindcss";

@theme {
  --color-brand-50: #f0f9ff;
  --color-brand-100: #e0f2fe;
  --color-brand-200: #bae6fd;
  --color-brand-300: #7dd3fc;
  --color-brand-400: #38bdf8;
  --color-brand-500: #0ea5e9;
  --color-brand-600: #0284c7;
  --color-brand-700: #0369a1;
  --color-brand-800: #075985;
  --color-brand-900: #0c4a6e;
  --color-brand-950: #082f49;
}

Esto genera las clases de utilidad bg-brand-50 hasta bg-brand-950, text-brand-*, border-brand-*, entre otras — exactamente como funcionan los colores integrados, pero con tu matiz personalizado.

Qué cambió en Tailwind v4

Tailwind v4 introdujo varios cambios significativos en el sistema de color:

Variables CSS como fuente de verdad

En v4, cada color integrado se expone como una propiedad personalizada CSS. Esto significa que puedes acceder a cualquier color de Tailwind en CSS plano sin clases de utilidad de Tailwind:

.custom-element {
  background-color: var(--color-blue-500);
  border-color: var(--color-blue-200);
}

Esto no era fácilmente posible en v3 sin herramientas adicionales o duplicando manualmente los valores hex.

Valores de color OKLCH

Tailwind v4 expresa sus colores en OKLCH en lugar de hex sRGB. Esto tiene varias ventajas:

• Soporte de gama amplia: En displays que admiten gamas P3 o Rec. 2020, los colores pueden ser más vívidos que lo que los códigos hex pueden expresar.
• Mejor interpolación: Los degradados entre dos colores de Tailwind producen resultados perceptualmente más uniformes.
• Manipulación predecible: Ajustar la luminosidad en OKLCH es más confiable que ajustarla en HSL.

El cambio es mayormente transparente para los desarrolladores que usan clases de utilidad — bg-blue-500 sigue produciendo un fondo azul — pero importa si estás construyendo degradados personalizados o animaciones que interpolan entre colores.

Tokens de color semánticos

v4 también introdujo mejor soporte para tokens de color semánticos — variables que describen lo que hace un color en lugar de su apariencia:

@theme {
  --color-primary: var(--color-blue-600);
  --color-primary-hover: var(--color-blue-700);
  --color-surface: var(--color-slate-50);
  --color-on-surface: var(--color-slate-900);
}

Este patrón asigna la capa semántica de tu sistema de diseño a la capa de escala de Tailwind, dándote la capacidad de cambiar temas sin cambiar el marcado de los componentes.

Construcción de una escala personalizada que encaje en Tailwind

Si necesitas un color personalizado que no está en la paleta predeterminada — el naranja específico de tu marca o un verde a medida — tienes dos opciones: encontrar la familia integrada más cercana y ajustar, o generar una escala completamente nueva.

Uso del Generador de tonos

El Generador de tonos produce una escala completa del 50 al 950 desde un único código hex de entrada. Ingresa el color primario de tu marca y la herramienta:

1. Convierte el hex a OKLCH
2. Calcula objetivos de luminosidad para cada uno de los 11 pasos
3. Ajusta el croma adecuadamente para que los tonos más claros sean menos saturados y los más oscuros mantengan profundidad
4. Genera valores hex sRGB listos para pegar en la configuración de Tailwind

Por ejemplo, si el color de tu marca es #0F766E (un verde-teal), el generador podría producir:

Esto coincide con la escala Teal integrada de Tailwind, lo que demuestra que la salida del generador se alinea con el carácter visual de la paleta oficial.

Uso de los colores de Tailwind para el modo oscuro

El sistema de tonos de Tailwind es adecuado para el modo oscuro porque la escala proporciona valores especulares. Una convención típica:

La idea clave es que se invierte el número de tono, no el color. Donde usas slate-100 en modo claro, usas slate-900 en modo oscuro. Para colores interactivos como vínculos y botones, cambias de un tono más oscuro (600) en modo claro a un tono más claro (400) en modo oscuro, manteniendo el contraste ante el fondo diferente.

La variante dark: de Tailwind hace esto sistemático:

<div class="bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100">
  <button class="bg-blue-600 dark:bg-blue-400 text-white dark:text-slate-900">
    Acción
  </button>
</div>

Errores comunes en el sistema de color

Usar el mismo tono para ambos modos

Aplicar bg-blue-600 sin un modificador dark: es un error habitual. En modo oscuro, los fondos oscuros con un elemento azul brillante se ven bien, pero una tarjeta blanca sobre un fondo oscuro resulta discordante. Siempre define variantes claro y oscuro para los colores de fondo.

Elegir tonos no adyacentes para el contraste

Usar texto gray-400 sobre un fondo gray-300 crea un contraste insuficiente. Una regla general: mantén al menos una diferencia de 4 pasos entre los tonos de primer plano y fondo (por ejemplo, el texto sobre slate-100 debe ser al menos slate-700). Usa el Verificador de contraste para verificar que las combinaciones específicas cumplan WCAG AA (4.5:1) o AAA (7:1).

Usar demasiadas familias de color

La paleta de Tailwind tiene 22 familias, pero la mayoría de las interfaces necesitan tres como máximo: una para los neutros (gray/slate), una para el color primario de la marca y una para los estados semánticos (rojo para errores, verde para éxito, amarillo para advertencias). Elegir cuatro o más familias de colores distintas crea complejidad visual sin propósito.

Conclusiones clave

• Tailwind CSS incluye 22 familias de color, cada una con 11 tonos del 50 al 950, producidos mediante análisis de luminosidad perceptual y curación humana, no mediante una fórmula aritmética simple.
• Las cinco familias neutras (slate, gray, zinc, neutral, stone) tienen cada una tonalidades de matiz distintas, ofreciendo a los diseñadores opciones de gris cálido, frío o neutro.
• El paso 500 es el tono "puro" canónico para cada familia de color; todos los demás pasos se entienden en relación con él, y el paso 950 se añadió en v3.3 para mayor profundidad en sombras y capas de superficie oscura.
• Tailwind v4 pasa a la configuración CSS-first con @theme, expone todos los colores como propiedades personalizadas CSS y usa OKLCH internamente para mejor uniformidad perceptual y soporte de gama amplia.
• El Generador de tonos produce una escala completa del 50 al 950 compatible con Tailwind desde cualquier código hex de entrada, usando objetivos de luminosidad basados en OKLCH.
• Para el modo oscuro, invierte el número de tono (50 ↔ 900) en lugar de invertir el matiz, y desplaza los colores interactivos de tonos más oscuros (600) a tonos más claros (400) para mantener el contraste sobre fondos oscuros.