Colores de Tailwind CSS: la paleta completa por defecto

Colores de Tailwind CSS

Colores de Tailwind CSS: paleta v4 completa, clic para copiar | We.Inc

Todos los colores por defecto de Tailwind CSS v4, de 50 a 950, como muestras en las que haces clic para copiarlos como clase, variable CSS, valor OKLCH o hex, y cómo añadir y quitar colores con @theme.

Tailwind CSS v4 incluye una paleta por defecto de familias de colores con nombre, desde red y blue hasta neutros como slate, zinc y stone, cada una en 11 tonos de 50 (el más claro) a 950 (el más oscuro), además de black y white. La versión 4 define cada tono en OKLCH como una variable CSS, por ejemplo --color-blue-500, que usas como bg-blue-500.

Dónde aparece un color de la paleta en Tailwind v4

Haz clic en cualquier muestra para copiarla en el formato que necesites: la clase de utilidad, la variable CSS, el valor OKLCH que Tailwind usa realmente o un hex aproximado para herramientas que solo aceptan hex. Filtra por nombre para saltar a una familia. La tabla completa de valores bajo las muestras recoge cada tono tal como lo define theme.css.

Preguntas frecuentes

¿Por qué los colores de Tailwind v4 están en OKLCH y no en hex?

La versión 4 define su paleta en OKLCH, cuyo canal L es la luminosidad percibida, así que los tonos se pueden espaciar según lo claros que parecen. También alcanza colores más vivos en pantallas de gama amplia. La función oklch() funciona en los principales navegadores desde mayo de 2023, así que los navegadores leen los valores directamente.

¿Cómo añado un color personalizado en Tailwind v4?

Declara una variable en el namespace --color- dentro de @theme en tu CSS, por ejemplo --color-midnight: #121063. Tailwind genera entonces bg-midnight, text-midnight y el resto. No hace falta ninguna entrada en tailwind.config.js.

¿Cómo quito los colores por defecto que no uso?

Pon la familia en initial dentro de @theme, por ejemplo --color-lime-*: initial. Eso elimina todos los tonos lime de las utilidades y variables generadas.

¿Cómo hago un color semitransparente?

Añade una barra y una opacidad a la clase: bg-sky-500/50 para el 50%, o un valor arbitrario como bg-pink-500/[71.37%]. En tu propio CSS, la función --alpha() hace lo mismo con una variable.

¿Puedo usar un color de Tailwind en CSS normal?

Sí. Cada color de la paleta se expone como variable CSS, así que color: var(--color-blue-500) funciona en cualquier hoja de estilos que cargue Tailwind.

Cómo leer los números de tono

Cómo sobrescribir un solo tono

El valor OKLCH de cada tono

Estos son los valores del theme.css de Tailwind. Black es #000 y white es #fff.

Paleta por defecto de Tailwind CSS v4 en OKLCH

Personalizar colores con @theme

Añadir colores de marca

Las variables del namespace --color- se convierten en utilidades. Aquí bg-brand-500 y text-ink empiezan a funcionar junto a los valores por defecto.

Quitar las familias que nunca usas

Poner un namespace en initial lo elimina. La primera línea quita una familia; la segunda quitaría todos los colores por defecto.

Panel tintado con texto a juego

Un fondo pálido y un tono de texto oscuro de la misma familia, más un borde dos pasos más oscuro que el fondo.

Usar las variables de la paleta en tu propio CSS

Útil para widgets de terceros a los que no puedes añadir clases.

Haz clic en una muestra para copiarla

Qué copia un clic

Clase

Variable CSS

OKLCH

Hex (aproximado)

Prefijo de utilidad

Filtrar colores

Copiado {v}

Todavía no se ha copiado nada.

Ninguna familia de colores coincide con ese nombre.

Empieza gratis · Sin tarjeta de crédito

Relacionado: Guías

Producto

Para quién es

Funciones

Recursos

Empresa

Mapa del sitio