Colores de Tailwind: cómo usar y ampliar la paleta

Los colores de Tailwind son un conjunto de familias con nombre, de red a rose más una serie de grises como slate, gray, zinc, neutral y stone, cada una con once tonos numerados 50, de 100 a 900 de cien en cien, y 950. Se aplican con utilidades como bg-blue-600, text-slate-900 y border-rose-300. En Tailwind v4 toda la paleta está definida en OKLCH como variables CSS, que amplías o sustituyes en un bloque @theme en lugar de en un archivo de configuración JavaScript.

Cómo está organizada la paleta por defecto

Todas las familias siguen la misma escala. Del 50 al 200 son tintes para fondos y rellenos de hover, el 300 y el 400 son acentos suaves, el 500 y el 600 son el centro saturado, y del 700 al 950 sirven para texto, bordes y superficies oscuras. Como cada familia usa los mismos pasos, cambiar blue por violet en un componente suele funcionar sin más.

Elige un gris y no te muevas de él. Mezclar texto gray-500 con bordes slate-200 da un aspecto ligeramente sucio que cuesta nombrar y es fácil de evitar.

Cómo usar los colores de Tailwind en tu marcado

Hay utilidades de color para casi todas las propiedades que admiten un color: bg-*, text-*, border-*, ring-*, fill-*, stroke-*, decoration-*, shadow-*, accent-*, caret-* y las paradas de degradado from-*, via-* y to-*. Añade una barra y un número para fijar la opacidad.

<div class="rounded-xl bg-slate-900 p-6 text-slate-100">
  <p class="text-sm text-slate-400">Status</p>
  <p class="text-2xl font-semibold">All systems normal</p>
  <span class="mt-4 inline-flex rounded-full bg-emerald-500/15 px-3 py-1 text-emerald-300">
    Live
  </span>
</div>

<!-- One off values when nothing in the palette fits -->
<button class="bg-[#0b5c4a] text-[oklch(97%_0.02_160)]">Book a table</button>

En v4 cada tono es además una variable que puedes usar en CSS normal: color: var(--color-slate-400). Así es fácil dar estilo a widgets de terceros, SVG o un canvas con los mismos colores que tus utilidades.

Cómo añadir colores personalizados en Tailwind v4

En v4 el tema se configura en CSS. Cualquier variable que empiece por --color- dentro de @theme se convierte en un color, con todas sus utilidades generadas. Nombra los colores por función o por marca, y dales una escala completa si vas a necesitar tintes.

@import "tailwindcss";

@theme {
  /* A brand ramp on one hue, written in OKLCH */
  --color-ember-50: oklch(97% 0.02 45);
  --color-ember-100: oklch(94% 0.04 45);
  --color-ember-200: oklch(88% 0.07 45);
  --color-ember-300: oklch(80% 0.11 45);
  --color-ember-400: oklch(71% 0.15 45);
  --color-ember-500: oklch(63% 0.17 45);
  --color-ember-600: oklch(55% 0.16 45);
  --color-ember-700: oklch(47% 0.14 45);
  --color-ember-800: oklch(39% 0.11 45);
  --color-ember-900: oklch(31% 0.08 45);
  --color-ember-950: oklch(22% 0.05 45);

  /* Single role colours */
  --color-ink: oklch(18% 0.02 270);
  --color-paper: oklch(98% 0.01 85);
}

Construir la escala en OKLCH es la razón de que funcione. La luminosidad en OKLCH coincide con lo claro que parece un color, así que los pasos iguales se ven iguales, algo que HSL no puede prometer. OKLCH explicado profundiza más, y oklch.com es un buen sitio para probar valores.

Cómo sustituir la paleta por completo

Para quitar los colores por defecto y quedarte solo con los tuyos, reinicia primero el espacio de nombres con --color-*: initial; al principio de @theme. Utilidades como bg-blue-500 dejarán de existir, lo que es una buena protección en un proyecto con una marca estricta.

Colores personalizados en Tailwind v3

Los proyectos más antiguos aún configuran los colores en JavaScript. Usa extend para añadir colores junto a los de por defecto, o define colors directamente para sustituirlos.

// tailwind.config.js (v3)
module.exports = {
  theme: {
    extend: {
      colors: {
        ember: {
          50: '#fff1ea',
          500: '#d95f19',
          900: '#502007',
        },
        ink: '#14121f',
      },
    },
  },
}

Contraste: qué tonos son seguros para el texto

Los números de tono no son una escala de contraste. El texto blanco sobre blue-600 supera el 4,5:1 que las WCAG piden para el texto normal, mientras que el blanco sobre blue-500 no. Comprueba la pareja concreta, con las ratios de abajo o con una herramienta de WebAIM, y lee contraste de color y accesibilidad para conocer las reglas.

Haz tuya la paleta

La paleta por defecto se usa en una cantidad enorme de webs, y por eso tantos productos comparten el mismo botón indigo-600 y el mismo fondo slate-50. Esa uniformidad es la versión web de por qué todos los feeds se parecen.

1. 1

   Elige un tono

   Parte del color de tu marca y lee su tono en OKLCH. Combinaciones de colores para webs te ayuda si todavía no tienes uno.

2. 2

   Construye la escala

   Mantén el tono, escalona la luminosidad de un 97% a un 22% aproximadamente y baja el croma en los dos extremos.

3. 3

   Nombra también las funciones

   Añade --color-ink, --color-paper y similares, para que los componentes digan para qué sirve cada color.

4. 4

   Mantén una sola fuente

   Trata el bloque @theme como tus design tokens, y reutiliza los mismos valores en tus gráficos.

El último paso es donde las marcas suelen desviarse: la web recibe la nueva escala mientras las publicaciones en redes y las diapositivas mantienen los colores del año pasado. Un kit de marca de Gradiently guarda tus paletas junto a tus tipografías y logotipos, así que el Designer maqueta las publicaciones con los mismos colores que usa tu tema de Tailwind, y un Mark da a la marca un estilo degradado que ninguna otra web comparte.