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

[Canonical HTML page](https://gradiently.design/es/guide/tailwind-colors)

La paleta por defecto es un buen punto de partida y un mal punto de llegada, porque la comparten miles de webs. Así funcionan los colores de Tailwind en v4, y así se añaden los tuyos sin romper nada.

## The short version

- Los colores de Tailwind son familias con nombre, como blue, violet y slate, cada una con tonos que van del 50, el más claro, al 950, el más oscuro.
- En Tailwind v4 cada color es una variable CSS como `--color-blue-500`, definida en OKLCH, y los colores se añaden o se sustituyen dentro de un bloque `@theme` en tu CSS.
- Cualquier variable que llames `--color-algo` en `@theme` se convierte en un juego completo de utilidades, como `bg-algo`, `text-algo` y `border-algo`.
- El modificador de opacidad, como en `bg-sky-500/50`, también funciona con colores personalizados, porque v4 mezcla la transparencia con `color-mix()`.
- El contraste depende de la pareja, no del número de tono, así que comprueba las combinaciones de texto y fondo en lugar de dar por hecho que un 500 sobre blanco se lee bien.

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.

- blue-100: #dbeafe
- blue-200: #bfdbfe
- blue-300: #93c5fd
- blue-400: #60a5fa
- blue-500: #3b82f6
- blue-600: #2563eb
- blue-700: #1d4ed8
- blue-800: #1e40af
- blue-900: #1e3a8a
- blue-950: #172554

La familia blue en hex sRGB, de la paleta de v3. Los valores de v4 están escritos en OKLCH y son algo más vivos en pantallas de gama amplia, pero la escala es la misma.

| Grupo | Familias | Uso habitual |
| --- | --- | --- |
| Grises | slate, gray, zinc, neutral, stone | Texto, bordes, superficies |
| Cálidos | red, orange, amber, yellow | Alertas, avisos, energía |
| Verdes | lime, green, emerald, teal | Éxito, naturaleza, calma |
| Azules | cyan, sky, blue, indigo | Enlaces, acciones principales |
| Morados y rosas | violet, purple, fuchsia, pink, rose | Acentos, marcas creativas |

Las familias por defecto agrupadas por temperatura. Slate y zinc tiran a frío, stone tira a cálido y neutral no tiene ningún matiz.

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.

```html
<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>
```

Una tarjeta oscura con una sola familia de grises más un acento al 15% de opacidad. Los valores arbitrarios entre corchetes cubren la rara excepción.

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.

```css
@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);
}
```

Ahora existen `bg-ember-500`, `text-ink`, `border-ember-200/60` y `from-ember-400`.

- ember-50: #fff1ea
- ember-200: #ffcab2
- ember-300: #f9a782
- ember-400: #ec7f4b
- ember-500: #d95f19
- ember-600: #b94a00
- ember-700: #973900
- ember-900: #502007
- ember-950: #2d1205

La escala ember de arriba, convertida a hex. Mantener el tono en 45 y escalonar la luminosidad hace que cada tono siga siendo reconociblemente el mismo color.

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](https://gradiently.design/es/guide/oklch-explained) profundiza más, y [oklch.com](https://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.

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

La forma de v3. Cuando actualices, esto pasa a `@theme` como `--color-ember-500` y similares.

## 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](https://webaim.org/resources/contrastchecker/), y lee [contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility) para conocer las reglas.

| Texto sobre fondo | Contraste | Texto normal |
| --- | --- | --- |
| slate-900 sobre blanco | 17,85:1 | Aprueba |
| gray-500 sobre blanco | 4,83:1 | Aprueba, por poco |
| gray-400 sobre blanco | 2,54:1 | Suspende |
| blanco sobre blue-600 | 5,17:1 | Aprueba |
| blanco sobre blue-500 | 3,68:1 | Solo texto grande |
| slate-400 sobre slate-900 | 6,96:1 | Aprueba |

Ratios calculadas a partir de los valores hex de v3. Vuelve a calcularlas con tus colores exactos de v4, que varían ligeramente.

## 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](https://gradiently.design/es/guide/why-every-feed-looks-the-same).

### Parece cualquier otra web

- El indigo o el blue por defecto como color de marca
- Varias familias de grises mezcladas
- El color de acento usado en todo
- Los colores del tema claro reutilizados en modo oscuro

### Se parece a ti

- Una escala personalizada en tu propio tono
- Un solo gris, teñido hacia el tono de la marca
- El acento reservado para acciones y un único resaltado
- Un juego oscuro elegido aparte, consulta [degradados para modo oscuro](https://gradiently.design/es/guide/dark-mode-gradients)

1. **Elige un tono** Parte del color de tu marca y lee su tono en OKLCH. [Combinaciones de colores para webs](https://gradiently.design/es/guide/website-color-scheme) te ayuda si todavía no tienes uno.
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. **Nombra también las funciones** Añade `--color-ink`, `--color-paper` y similares, para que los componentes digan para qué sirve cada color.
4. **Mantén una sola fuente** Trata el bloque `@theme` como tus [design tokens](https://gradiently.design/es/guide/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.

## FAQ

### ¿Qué colores trae Tailwind por defecto?

Familias que van de red, orange, amber y yellow a rose pasando por verdes, azules, morados y rosas, más grises como slate, gray, zinc, neutral y stone. Cada una tiene los tonos 50, de 100 a 900 y 950, además de black y white.

### ¿Cómo añado colores personalizados en Tailwind v4?

Define variables como `--color-brand-500` dentro de un bloque `@theme` en tu CSS. Tailwind genera a partir de ella `bg-brand-500`, `text-brand-500` y todas las demás utilidades de color.

### ¿Tailwind usa OKLCH?

Sí. Desde v4 la paleta por defecto está definida en OKLCH, y puedes escribir tus propios colores en OKLCH, hex, RGB o cualquier otro formato de color CSS.

### ¿Cómo uso un color de Tailwind en CSS normal?

En v4 usa la variable directamente, por ejemplo `var(--color-slate-400)`. En v3 usa la función `theme()`, como `theme(colors.slate.400)`.

### ¿Qué tonos de Tailwind son accesibles para texto?

Depende de la pareja. Sobre blanco, gray-500 y los más oscuros aprueban para texto normal, y el texto blanco aprueba sobre blue-600 pero no sobre blue-500, así que comprueba siempre la combinación concreta.