Paleta de colores de Tailwind

La paleta de colores predeterminada de Tailwind contiene 22 familias de colores con nombre, cada una con 11 tonos numerados del 50 al 950. Las familias incluyen neutros (slate, gray, zinc, stone, neutral), tonos cálidos (red, orange, amber, yellow), tonos fríos (lime, green, emerald, teal, cyan, sky, blue, indigo, violet) y acentos vibrantes (purple, fuchsia, pink, rose). Cada tono está preaprobado para usarse en su sistema de diseño.

Los números de los tonos comunican la luminosidad: 50 es casi blanco (un tinte muy tenue), 100–300 son pasteles claros, 400–600 son tonos medios vivos, 700–800 son oscuros y saturados, y 900–950 son casi negros. Como regla general, use 50–200 para fondos, 400–600 para iconos y acentos, y 700–900 para texto a fin de garantizar un contraste legible sobre blanco.

Aplique colores de fondo con la utilidad bg-{color}-{shade}. Esto establece background-color de CSS en el elemento. Use un tono claro como bg-indigo-50 para fondos sutiles de secciones, un tono medio como bg-indigo-600 para botones principales y un tono oscuro como bg-indigo-950 para fondos de pies de página y barras laterales. Combínelo siempre con un color de texto que proporcione suficiente contraste.

Además de la paleta numerada, Tailwind proporciona varias palabras clave de color especiales. bg-white y bg-black establecen blanco y negro puros. bg-transparent hace que el fondo sea transparente (hereda el del elemento padre). bg-current usa el color de texto actual del elemento como fondo. bg-inherit hereda explícitamente el fondo del elemento padre.

Elegir entre colores cálidos y fríos afecta al tono emocional del diseño. Los colores cálidos (red, orange, amber, yellow) transmiten energía, urgencia y calidez; son ideales para alertas, insignias de ofertas y estados de advertencia. Los colores fríos (blue, indigo, teal, cyan) transmiten confianza, calma y profesionalidad; son ideales para acciones principales, paneles de datos y aplicaciones corporativas.

Tailwind tiene cinco familias de grises neutros: slate (matiz azul grisáceo), gray (neutro), zinc (ligeramente cálido), neutral (neutro puro) y stone (beige cálido). La elección entre ellas es sutil, pero importante para la identidad de marca. Slate encaja con productos tecnológicos y para desarrolladores. Gray funciona de forma universal. Stone es adecuado para marcas naturales y terrosas. Elija una y úsela de forma coherente en todo el proyecto.

Un uso práctico de las familias de colores de Tailwind es crear un sistema de indicadores de estado. Asigne los estados semánticos a familias de colores: verde para éxito, amarillo para advertencias, rojo para errores, azul para información y gris para estados neutros. Use el tono 100 para el fondo y el tono 700 para el texto, con el fin de garantizar tanto el contraste como la coherencia visual.

El modificador de opacidad con barra también funciona con los colores de fondo. bg-blue-600/20 aplica el color blue-600 con un 20 % de opacidad, creando un efecto de tinte translúcido. Se usa habitualmente para fondos superpuestos, efectos de cristal esmerilado y fondos de resaltado coloreados detrás del contenido, sin ocultar por completo lo que hay detrás.

Un patrón habitual consiste en elegir un color primario para los elementos interactivos principales y un color de acento para resaltar información importante. Por ejemplo, indigo como primario y amber como acento. Ambos colores ya están presentes en la paleta de Tailwind, por lo que dispondrá inmediatamente de un espectro completo de tonos sin configurar nada.

En el modo oscuro, los fondos cambian de tonos claros a tonos oscuros. Use el prefijo dark: para establecer los colores de fondo del tema oscuro. Un patrón habitual es: fondo principal bg-white dark:bg-gray-900, superficie de tarjeta bg-gray-50 dark:bg-gray-800 y elementos elevados bg-white dark:bg-gray-700. Este sistema de elevación de tres niveles crea profundidad en las interfaces oscuras.

Si la paleta predeterminada no coincide con su marca, amplíela en tailwind.config.js, dentro de theme.extend.colors. Puede añadir familias de colores completamente nuevas con tonos personalizados o agregar un único color de marca. Una vez definido, el nuevo color estará disponible con todas las utilidades de Tailwind: bg-brand-500, text-brand-700, border-brand-300, etc.

En esta lección ha aprendido que cada una de las 22 familias de colores de Tailwind tiene 11 tonos, del 50 (claro) al 950 (oscuro), que bg-{color}-{shade} aplica un color de fondo y el modificador /opacity añade transparencia y que los colores cálidos transmiten urgencia, mientras que los colores fríos transmiten confianza. A continuación, crearemos degradados con las utilidades de fondo de degradado de Tailwind.