Saltar al contenido

Colores de Tailwind CSS: paleta completa v4 y v3

Todos los colores de Tailwind CSS, del 50 al 950, con sus valores oficiales en OKLCH (v4) y HEX (v3). Haz clic en un tono para copiar su clase, variable CSS o código.

Ver colores UI
Versión
Copiar como

Nuevos en Tailwind v4: Mauve, Olive, Mist y Taupe, cuatro grises con matiz.

Valores de cada color

Elige un color para ver sus once tonos con la clase, OKLCH, HEX, RGB y el color de texto que mejor contrasta.

Blue · Tailwind v4

TonoClaseOKLCHHEXRGBTexto
50Aa19.3:1
100Aa17.2:1
200Aa14.8:1
300Aa11.6:1
400Aa8.0:1
500Aa5.6:1
600Aa5.2:1
700Aa6.8:1
800Aa8.8:1
900Aa10.4:1
950Aa14.8:1

Tailwind v4 define sus colores en OKLCH y algunos quedan fuera del rango sRGB. El HEX es el color sRGB más cercano.

Qué es la paleta de colores de Tailwind CSS

Tailwind CSS incluye una paleta de colores predefinida, organizada en familias con nombre (Slate, Red, Blue…) y once tonos por familia, del 50 (el más claro) al 950 (el más oscuro). Esa numeración se ha convertido en un estándar que usan muchas otras librerías.

Cada color se usa con clases como bg-blue-500 o text-red-700. En la tabla de arriba puedes copiar el nombre de la clase, la variable CSS o el código en HEX, RGB, HSL u OKLCH.

Qué tono usar para cada cosa

No hay reglas fijas, pero la mayoría de interfaces hechas con Tailwind siguen un patrón parecido dentro de cada familia:

50–100
Fondos. Superficies suaves, tarjetas y zonas destacadas.
200–300
Bordes. Separadores, bordes de campos y estados desactivados.
500–600
Acción. Botones, enlaces y elementos activos. El 600 suele contrastar mejor con texto blanco.
700–900
Texto. Títulos y texto sobre fondos claros de la misma familia.
950
Modo oscuro. Fondos oscuros con un matiz de color en lugar de negro puro.

Tailwind v3 y v4: qué cambia en los colores

La numeración y los nombres son los mismos, pero los valores no: la v4 recalibró toda la paleta. Por eso esta página muestra los valores oficiales de cada versión por separado.

blue-500 = oklch(62.3% 0.214 259.815)

Tailwind v4

  • Colores definidos en OKLCH, con pasos de claridad más uniformes.
  • Tonos más vivos, pensados para pantallas de gama amplia (Display P3).
  • Cada color existe como variable CSS: var(--color-blue-500).
  • Cuatro grises nuevos con matiz: Mauve, Olive, Mist y Taupe.

blue-500 = #3b82f6

Tailwind v3

  • Colores definidos en HEX (sRGB).
  • 22 familias: 5 grises y 17 colores.
  • Se usan con clases o con la función theme('colors.blue.500').
  • Sigue siendo la versión de muchos proyectos existentes.

Cómo usar los colores de Tailwind en tu CSS

Además de las clases, puedes usar cualquier color de la paleta en tu propio CSS. En la v4 son variables CSS normales; en la v3 se accede con la función theme().

Tailwind v4

@import "tailwindcss";

.card {
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-200);
  color: var(--color-blue-900);
}

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

Tailwind v3

.card {
  background: theme('colors.blue.50');
  border: 1px solid theme('colors.blue.200');
  color: theme('colors.blue.900');
}

Para añadir un color propio en la v4, decláralo en @theme con el prefijo --color- y tendrás sus clases automáticamente (bg-brand-500, text-brand-500…).

Preguntas frecuentes

Los nombres y la numeración son iguales, pero la v4 recalibró la paleta en OKLCH: los tonos son algo más vivos y los pasos de claridad, más uniformes. Por eso el HEX de blue-500 no es el mismo en ambas versiones. La v4 añade además cuatro grises nuevos: Mauve, Olive, Mist y Taupe.

Es la escala estándar de Tailwind: el 50 es el tono más claro (casi blanco) y el 950 el más oscuro (casi negro), con pasos intermedios pensados para cubrir fondos, textos, bordes y estados de forma consistente en toda una interfaz.

En Tailwind v4 cada color está disponible como variable CSS, por ejemplo var(--color-blue-500). En la v3 se usa la función theme('colors.blue.500') dentro de tus archivos CSS.

Tailwind v4 define los colores en OKLCH, y algunos quedan fuera del rango sRGB que puede representar un código HEX. En esos casos mostramos el HEX más cercano; si tu proyecto admite OKLCH, usa ese valor para obtener el color exacto.

La columna «Texto» de cada color indica si contrasta mejor el blanco o el negro, con su ratio. Como referencia, el texto normal necesita al menos 4,5:1; puedes comprobar cualquier combinación en el verificador de contraste.

OKLCH es un espacio de color donde la luminosidad se calcula de forma perceptual, así que dos colores con el mismo valor de claridad se ven igual de claros para el ojo humano. Esto da como resultado escalas de color más uniformes que las basadas en RGB tradicional.