Colores de Tailwind CSS: guía completa del sistema de tonos

Tailwind CSS incluye uno de los sistemas de color más referenciados en el desarrollo web. Su convención de nomenclatura de tonos — números del 50 al 950 — se ha convertido en un estándar de la industria que influye en herramientas de diseño, otros frameworks CSS y sistemas de diseño personalizados mucho más allá de los proyectos que realmente usan Tailwind. Entender cómo está estructurado este sistema, cómo extenderlo y cómo evolucionó en Tailwind v4 te brinda tanto una habilidad práctica como un modelo mental para el diseño de escalas de color.

Descripción general de la paleta predeterminada

La paleta predeterminada de Tailwind contiene 22 familias de colores, cada una con 11 tonos (del 50 al 950). Algunos colores específicos — black, white, transparent e inherit — también están disponibles como utilidades de valor único.

Las familias de color principales en la paleta predeterminada son:

Las familias de gris (slate, gray, zinc, neutral, stone) difieren principalmente en su subtono. slate tiene una tonalidad gris azulada, stone es más cálido y neutral es el más puramente acromático. Elegir la familia de gris adecuada para un proyecto importa más de lo que muchos desarrolladores se dan cuenta — los grises de slate se sienten diferentes a los grises de stone en una UI completa.

Convención de nombres de tonos: 50–950

El sistema de numeración sigue una regla consistente: los números más altos son más oscuros. La escala no es perfectamente lineal — el equipo de Tailwind ajustó los pasos a mano para la uniformidad perceptual en lugar de matemática — pero la relación es confiable:

El blue-500 predeterminado de Tailwind es #3B82F6 — un azul medio y completamente saturado que es el azul "canónico" de Tailwind. blue-600 (#2563EB) es el estado hover estándar para un botón azul. blue-100 (#DBEAFE) es el fondo para una insignia azul. Estas relaciones son consistentes en todas las familias de color de la paleta.

La adición del tono 950

Tailwind v3.3 añadió el tono 950 a cada familia de color. Antes de esa adición, el 900 era la opción más oscura, que en algunas familias de color era demasiado claro para fondos de modo oscuro. Los tonos 950 llenan ese vacío — son muy oscuros pero conservan un tinte visible del matiz padre. Por ejemplo, blue-950 (#172554) se lee como azul marino oscuro, no como negro puro, lo que lo hace útil para superficies en modo oscuro que mantienen el carácter de la marca.

Añadir colores personalizados

Para proyectos con colores de marca no cubiertos por la paleta predeterminada, la configuración de Tailwind permite añadir familias de colores personalizadas. El enfoque difiere entre Tailwind v3 y v4.

Tailwind v3: tailwind.config.js

En v3, los colores personalizados van en el objeto extend.colors para añadirlos junto a los predeterminados, o en el objeto colors para reemplazarlos:

// tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
  theme: {
    extend: {
      colors: {
        // Añadir una familia de color de marca personalizada
        brand: {
          50:  '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',  // Color primario de la marca
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49',
        },
        // O referenciar una familia existente con un nuevo nombre
        primary: colors.indigo,
        danger: colors.red,
      },
    },
  },
};

Tras esta configuración, puedes usar clases como bg-brand-500, text-brand-700, border-brand-200, entre otras.

Generación de una escala personalizada

La parte difícil de añadir un color personalizado es generar una escala completa de 11 tonos desde un único valor hex de marca. Hacerlo manualmente — ajustando la luminosidad manualmente para cada paso — produce resultados inconsistentes.

El Generador de tonos lo automatiza: ingresa el hex primario de tu marca y calcula la escala completa del 50 al 950 con pasos perceptualmente uniformes, produciendo valores que puedes pegar directamente en la configuración de Tailwind. Por ejemplo, si tu marca primaria es #0EA5E9 (un azul cielo), el generador produce una escala completa de 11 tonos calibrada para coincidir con la curva de luminosidad de las paletas nativas de Tailwind.

Uso de withOpacityValue para alfa dinámico

En Tailwind v3, las utilidades de color admiten opacidad arbitraria mediante la sintaxis de barra (bg-blue-500/50 para 50% de opacidad). Al definir colores personalizados en v3, puedes hacer que esto funcione usando propiedades personalizadas CSS con el patrón withOpacityValue:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          500: 'rgb(var(--color-brand-500) / <alpha-value>)',
        },
      },
    },
  },
};

Luego define los valores del canal en bruto en CSS:

:root {
  --color-brand-500: 14 165 233; /* valores R G B de #0EA5E9 */
}

Esto permite que bg-brand-500/30 (30% de opacidad) funcione correctamente en el CSS generado.

Extensión de la paleta en la configuración

Más allá de las familias de color personalizadas, la configuración de Tailwind permite extender la paleta con alias semánticos y valores arbitrarios.

Alias semánticos

Un enfoque: define los colores de tu marca como alias semánticos que referencian la paleta:

// tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: colors.blue,
        secondary: colors.violet,
        success: colors.green,
        warning: colors.amber,
        danger: colors.red,
        neutral: colors.slate,
      },
    },
  },
};

Ahora bg-primary-500 genera el mismo CSS que bg-blue-500, pero los nombres de tus clases comunican propósito en lugar de color. Este patrón refleja el enfoque de nomenclatura semántica en los design tokens — la misma clase funciona incluso si más adelante decides que el color primario debería ser índigo en lugar de azul.

Colores semánticos de valor único

Para sistemas de diseño donde quieres colores con nombre sin la escala completa:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary':    '#0EA5E9',
        'brand-secondary':  '#7C3AED',
        'text-on-primary':  '#FFFFFF',
        'surface-dark':     '#0F172A',
      },
    },
  },
};

Úsalos como bg-brand-primary, text-text-on-primary, y así sucesivamente.

Tailwind v4: el enfoque de variables CSS

Tailwind v4 introduce un modelo de configuración fundamentalmente diferente. En lugar de un archivo de configuración JavaScript, todo el sistema de diseño se define en CSS usando propiedades personalizadas y configuración basada en CSS.

La directiva @theme

Los colores en Tailwind v4 se definen usando la directiva @theme en tu archivo CSS:

@import "tailwindcss";

@theme {
  /* Redefinir o extender la paleta predeterminada */
  --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;
}

Tailwind v4 lee las propiedades personalizadas --color-* y genera automáticamente las clases de utilidad correspondientes: bg-brand-500, text-brand-700, border-brand-200, etc.

Colores semánticos en v4

El enfoque de v4 hace que los alias de color semánticos sean extremadamente limpios porque usa propiedades personalizadas CSS estándar:

@import "tailwindcss";

@theme {
  --color-primary:           var(--color-blue-600);
  --color-primary-hover:     var(--color-blue-700);
  --color-primary-subtle:    var(--color-blue-50);

  --color-success:           var(--color-green-600);
  --color-danger:            var(--color-red-600);
  --color-warning:           var(--color-amber-500);
}

Ahora bg-primary es una clase válida de Tailwind — y como referencia una propiedad personalizada CSS, puedes sobrescribirla en un bloque de modo oscuro o selector de tema sin tocar la configuración de Tailwind:

[data-theme="dark"] {
  --color-primary: var(--color-blue-400);
}

Esta es la mejora más significativa en el sistema de color de v4: los temas son CSS puro, sin necesidad de paso de compilación para cambiar de tema.

Colores P3 y OKLCH en v4

La paleta predeterminada de Tailwind v4 usa valores OKLCH internamente para uniformidad perceptual. La paleta en v4 produce pasos visualmente más consistentes entre matices — especialmente notable en colores cálidos como naranja y amarillo, donde las paletas anteriores tenían pasos de luminosidad desiguales.

Al usar el Conversor de color para generar valores OKLCH de los colores de tu marca, puedes incorporarlos directamente al bloque @theme:

@theme {
  /* Color de marca definido en OKLCH para soporte de display P3 de gama amplia */
  --color-brand-500: oklch(60% 0.18 220);
}

Los navegadores modernos en displays de gama amplia (la mayoría de MacBooks e iPhones) renderizarán esto en el espacio de color P3 — produciendo un azul notablemente más vívido que el equivalente limitado a sRGB.

Consejos prácticos para la selección de colores

Combinación efectiva de familias

Las familias de gris de Tailwind fueron diseñadas para complementar colores de acento específicos. Algunas combinaciones habituales:

• slate + blue/indigo — frío, corporativo, ligeramente tecnológico
• stone + amber/orange — cálido, artesanal, humano
• zinc + violet/purple — neutro, moderno, ligeramente oscuro
• neutral + cualquier color — el gris más versátil, funciona con todo

Mezclar grises de diferentes familias en la misma UI (por ejemplo, slate-100 para un fondo y zinc-200 para otro) produce una inconsistencia visual sutil. Comprométete con una familia de gris por proyecto.

La regla de texto 100/700 sobre fondo

Una combinación confiable con contraste seguro en Tailwind: usa texto de tono 700 sobre un fondo de tono 100 dentro de la misma familia. Por ejemplo, text-blue-700 sobre bg-blue-100 produce una insignia azul legible que cumple WCAG AA. Usa el Verificador de contraste para verificar cualquier combinación no estándar.

Mapeo de tonos para el modo oscuro

Un patrón habitual para el modo oscuro en Tailwind es invertir la escala de tonos — lo que era 700 en modo claro se convierte en 300 en modo oscuro:

<p class="text-gray-700 dark:text-gray-300">
  Texto de cuerpo — gris oscuro en modo claro, gris claro en modo oscuro
</p>

<div class="bg-gray-100 dark:bg-gray-800">
  Fondo sutil — apenas gris en modo claro, superficie oscura en modo oscuro
</div>

Esta simetría funciona porque la escala de Tailwind está diseñada de modo que 100+900=1000 y 200+800=1000 — los pares de tonos son imágenes especulares en términos de luminosidad percibida.

Conclusiones clave

• Las 22 familias de color de Tailwind abarcan cada una 11 tonos del 50 (casi blanco) al 950 (casi negro), con el 500 como tono "identidad" canónico y el 600 como estado interactivo predeterminado.
• Elige una familia de gris (slate, gray, zinc, neutral o stone) por proyecto y úsala de manera consistente — mezclar familias de gris crea inconsistencia visual sutil.
• Las familias de color personalizadas se añaden mediante extend.colors en Tailwind v3 o @theme en v4. El Generador de tonos genera una escala completa del 50 al 950 desde cualquier valor hex de marca.
• En Tailwind v4, los colores son propiedades personalizadas CSS bajo @theme, lo que permite temas en CSS puro sin recompilación — anula las variables de color semánticas en un bloque [data-theme="dark"].
• Los alias semánticos (primary: colors.blue) hacen que los nombres de clase comuniquen propósito en lugar de apariencia, sin necesidad de refactorización de nombres de clase ante futuros cambios de color de marca.
• El Conversor de color proporciona equivalentes OKLCH para cualquier color hex — útil para definiciones de color de gama amplia en v4 que aprovechan los displays P3.