Colores de Tailwind
La paleta completa de colores de Tailwind CSS v4 - todos los colores, todos los tonos, con patrones de uso y personalización.
//
Busca en todas las páginas de la documentación
La paleta completa de colores de Tailwind CSS v4 - todos los colores, todos los tonos, con patrones de uso y personalización.
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥
Referencia rápida - usa cualquier color con cualquier utilidad.
// Texto
<p className="text-blue-500">Texto azul</p>
<p className="text-red-600">Texto rojo</p>
// Fondo
<div className="bg-emerald-100">Fondo esmeralda claro</div>
<div className="bg-slate-900">Fondo pizarra oscuro</div>
// Borde
<div className="border border-gray-300">Borde gris</div>
// Ring
<button className="ring-2 ring-indigo-500">Ring índigo</button>
// Opacidad arbitraria
<div className="bg-blue-500/50">Azul al 50% de opacidad</div>
<div className="text-red-600/75">Texto rojo al 75% de opacidad</div>Cuándo usarlo: Siempre que necesites color - fondos, texto, bordes, sombras, rings, degradados, divisores, placeholders.
export function ColorShowcase() {
const colors = [
{ name: "red", class: "bg-red-500" },
{ name: "orange", class: "bg-orange-500" },
{ name: "amber", class: "bg-amber-500" },
{ name: "yellow", class: "bg-yellow-500" },
{ name: "lime", class: "bg-lime-500" },
{ name: "green", class: "bg-green-500" },
{ name: "emerald", class: "bg-emerald-500" },
{ name: "teal", class: "bg-teal-500" },
{ name: "cyan", class: "bg-cyan-500" },
{ name: "sky", class: "bg-sky-500" },
{ name: "blue", class: "bg-blue-500" },
{ name: "indigo", class: "bg-indigo-500" },
{ name: "violet", class: "bg-violet-500" },
{ name: "purple", class: "bg-purple-500" },
{ name: "fuchsia", class: "bg-fuchsia-500" },
{ name: "pink", class: "bg-pink-500" },
{ name: "rose", class: "bg-rose-500" },
];
return (
<div className="grid grid-cols-6 gap-2">
{colors.map(({ name, class: cls }) => (
<div key={name} className="text-center">
<div className={`h-12 w-full rounded ${cls}`} />
<span className="text-xs text-gray-600 mt-1">{name}</span>
</div>
))}
</div>
);
}Qué demuestra esto:
-500 como tono de referencia «base» para cada colorPasa el cursor para ver el hex. Haz clic en cualquier muestra para copiar.
Hover to see hex value. Click any swatch to copy.
oklch() para uniformidad perceptual@themetext-, bg-, border-, ring-, shadow-, divide-, outline-, accent-, caret-, fill-, stroke-/opacity para transparencia: bg-blue-500/50| Color | Descripción | Uso |
|---|---|---|
slate | Gris azulado frío | UI predeterminada, apps profesionales |
gray | Neutro con ligero calor | Uso general, el más común |
zinc | Gris neutro verdadero | Diseños minimalistas y modernos |
neutral | Neutro puro (sin matiz) | Diseños estrictamente monocromáticos |
stone | Gris beige cálido | Diseños cálidos y orgánicos |
Referencia de tonos para grises:
/* slate */
slate-50 /* más claro - fondos */
slate-100 /* fondos claros, estados hover */
slate-200 /* bordes, divisores */
slate-300 /* texto deshabilitado, placeholder */
slate-400 /* texto placeholder */
slate-500 /* texto secundario */
slate-600 /* texto del cuerpo (modo claro) */
slate-700 /* encabezados (modo claro) */
slate-800 /* fondos oscuros */
slate-900 /* fondos más oscuros */
slate-950 /* casi negro */Colores cálidos:
| Color | Tonos | Mejor para |
|---|---|---|
red | 50-950 | Errores, acciones destructivas, alertas |
orange | 50-950 | Advertencias, atención, energía |
amber | 50-950 | Precaución, calidez, notificaciones |
yellow | 50-950 | Destacados, estrellas, valoraciones |
Colores naturales:
| Color | Tonos | Mejor para |
|---|---|---|
lime | 50-950 | Acentos frescos y enérgicos |
green | 50-950 | Éxito, confirmación, positivo |
emerald | 50-950 | Crecimiento, prosperidad, finanzas |
teal | 50-950 | Calma, profesional, salud |
Colores fríos:
| Color | Tonos | Mejor para |
|---|---|---|
cyan | 50-950 | Info, tecnología, temas acuáticos |
sky | 50-950 | Interfaces ligeras, aireadas y abiertas |
blue | 50-950 | Acciones principales, enlaces, confianza |
indigo | 50-950 | Creativo, profundo, estados de foco |
Colores púrpura/rosa:
| Color | Tonos | Mejor para |
|---|---|---|
violet | 50-950 | Premium, creativo, funciones de IA |
purple | 50-950 | Realeza, lujo, branding |
fuchsia | 50-950 | Juguetón, audaz, degradados |
pink | 50-950 | Suave, amigable, social |
rose | 50-950 | Amor, favoritos, corazones |
// Negro y blanco
<div className="bg-black text-white">Negro/blanco puro</div>
// Transparente
<div className="bg-transparent">Sin fondo</div>
// Color actual (hereda)
<svg className="fill-current text-blue-500">...</svg>| Tono | Uso en modo claro | Uso en modo oscuro |
|---|---|---|
| 50 | Fondos sutiles, hover | - |
| 100 | Fondos de tarjetas, seleccionado | - |
| 200 | Bordes, divisores | Texto sutil |
| 300 | Bordes hover | Texto atenuado |
| 400 | Texto placeholder | Texto del cuerpo |
| 500 | Iconos, texto secundario | Iconos |
| 600 | Texto del cuerpo, etiquetas | Estados hover |
| 700 | Encabezados, énfasis | Bordes |
| 800 | - | Fondos de tarjetas |
| 900 | - | Fondos de página |
| 950 | - | Fondos profundos |
Colores personalizados con @theme:
/* app/globals.css */
@theme {
--color-brand-50: oklch(0.98 0.02 250);
--color-brand-100: oklch(0.95 0.04 250);
--color-brand-200: oklch(0.90 0.08 250);
--color-brand-300: oklch(0.82 0.12 250);
--color-brand-400: oklch(0.72 0.16 250);
--color-brand-500: oklch(0.60 0.20 250);
--color-brand-600: oklch(0.50 0.18 250);
--color-brand-700: oklch(0.42 0.15 250);
--color-brand-800: oklch(0.35 0.12 250);
--color-brand-900: oklch(0.28 0.10 250);
--color-brand-950: oklch(0.18 0.07 250);
}// Ahora disponibles como utilidades
<button className="bg-brand-500 hover:bg-brand-600 text-white">
Marca personalizada
</button>Sobrescribir colores predeterminados:
@theme {
/* Reemplaza el azul predeterminado con el azul de tu marca */
--color-blue-500: oklch(0.55 0.22 260);
--color-blue-600: oklch(0.48 0.20 260);
}Eliminar colores predeterminados:
@theme {
/* Elimina colores que no uses para reducir la carga cognitiva */
--color-lime-*: initial;
--color-fuchsia-*: initial;
--color-cyan-*: initial;
}Alias semánticos de color con variables CSS:
@theme {
--color-success: var(--color-green-500);
--color-warning: var(--color-amber-500);
--color-error: var(--color-red-500);
--color-info: var(--color-blue-500);
}<span className="text-success">¡Guardado!</span>
<span className="text-error">Error al guardar</span>Degradados con colores:
// Degradado lineal
<div className="bg-gradient-to-r from-blue-500 to-purple-500">
Degradado
</div>
// Degradado de tres paradas
<div className="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500">
Multiparada
</div>
// Texto con degradado
<h1 className="bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text text-transparent">
Encabezado con degradado
</h1>Color con modificadores de opacidad:
// Opacidad de fondo
<div className="bg-blue-500/10">Fondo azul muy sutil</div>
<div className="bg-blue-500/25">Fondo azul claro</div>
<div className="bg-blue-500/50">Azul a media opacidad</div>
<div className="bg-blue-500/75">Azul casi opaco</div>
// Opacidad de borde
<div className="border border-red-500/50">Borde rojo semitransparente</div>
// Sombra con color
<div className="shadow-lg shadow-blue-500/25">Sombra con resplandor azul</div>// Props de color type-safe con literales de cadena
type Color =
| "red" | "orange" | "amber" | "yellow"
| "lime" | "green" | "emerald" | "teal"
| "cyan" | "sky" | "blue" | "indigo"
| "violet" | "purple" | "fuchsia" | "pink" | "rose"
| "slate" | "gray" | "zinc" | "neutral" | "stone";
type Shade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
interface BadgeProps {
color: Color;
children: React.ReactNode;
}
// Nota: los nombres de clase dinámicos deben estar en safelist o usar la prop style
// Tailwind no puede detectar `bg-${color}-500` en tiempo de compilación
function Badge({ color, children }: BadgeProps) {
// Usa un mapa de búsqueda en lugar de literales de plantilla
const colorMap: Record<Color, string> = {
red: "bg-red-100 text-red-800",
blue: "bg-blue-100 text-blue-800",
green: "bg-green-100 text-green-800",
// ... etc
};
return (
<span className={`px-2 py-0.5 rounded text-sm ${colorMap[color]}`}>
{children}
</span>
);
}Los nombres de clase dinámicos no funcionan - bg-${color}-500 no será detectado por el escáner de Tailwind en tiempo de compilación. Solución: Usa un objeto mapa de búsqueda con cadenas de clase completas, o usa la prop style con variables CSS.
Compatibilidad de oklch en navegadores - oklch está bien soportado en navegadores modernos, pero no en IE ni en Safari muy antiguo. Solución: Tailwind v4 gestiona los fallbacks automáticamente, pero prueba en tus navegadores objetivo.
Contraste de color - No todas las combinaciones de tonos cumplen los requisitos de contraste WCAG. Solución: Usa combinaciones 50/900 o 100/800 para contraste garantizado. Usa texto oscuro (700+) sobre fondos claros (50-200) y texto claro (50-200) sobre fondos oscuros (700+).
Demasiados colores - La paleta completa tiene 22 familias de color × 11 tonos = 242 colores. Solución: Elige 1 primario, 1 neutro y 2-3 colores de acento para tu proyecto. Elimina colores no usados con --color-name-*: initial.
Desajuste de color en modo oscuro - Simplemente cambiar 500 por 400 en modo oscuro no siempre funciona porque la luminosidad oklch no es simétrica. Solución: Prueba los colores del modo oscuro visualmente; no inviertas solo el número del tono.
| Alternativa | Usar cuando | No usar cuando |
|---|---|---|
| Propiedades personalizadas de CSS | Necesitas cambios de color en tiempo de ejecución (temas, preferencias del usuario) | Diseños estáticos donde las clases de Tailwind bastan |
Prop style en línea | Colores dinámicos desde entrada del usuario o base de datos | Colores estáticos conocidos de antemano |
| Variables CSS de shadcn/ui | Usas componentes shadcn con theming | No usas shadcn/ui |
| Radix Colors | Necesitas soporte automático de gama P3 y contraste garantizado | Ya estás invertido en la paleta de Tailwind |
11 tonos: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. El tono 50 es el más claro, el 950 el más oscuro.
oklch() para uniformidad perceptual. Los colores del mismo valor de luminosidad parecen igual de brillantes al ojo humano, a diferencia de hex o HSL.
Añade /opacity: bg-blue-500/50 para 50% de opacidad, text-red-600/75 para 75%.
@theme {
--color-brand-50: oklch(0.98 0.02 250);
--color-brand-500: oklch(0.60 0.20 250);
--color-brand-900: oklch(0.28 0.10 250);
}Luego usa bg-brand-500, text-brand-900, etc.
@theme {
--color-success: var(--color-green-500);
--color-error: var(--color-red-500);
}Uso: <span className="text-success">¡Guardado!</span>
<h1 className="bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text text-transparent">
Encabezado con degradado
</h1>@theme {
--color-lime-*: initial;
--color-fuchsia-*: initial;
}bg-${color}-500 dinámicamente pero el color falta en producción. ¿Por qué?El escáner de Tailwind no puede detectar nombres de clase dinámicos construidos con literales de plantilla. Usa un mapa de búsqueda con cadenas de clase estáticas completas en su lugar.
La luminosidad oklch no es simétrica. Simplemente intercambiar números de tono no produce resultados visualmente equivalentes. Prueba siempre los colores del modo oscuro visualmente.
type Color = "red" | "blue" | "green" | "amber";
interface BadgeProps {
color: Color;
children: React.ReactNode;
}Luego usa un mapa de búsqueda Record<Color, string> para obtener la cadena de clase completa.
<div className="shadow-lg shadow-blue-500/25">Resplandor azul</div>El /25 establece el color de la sombra en azul al 25% de opacidad.
Revisado por Chris St. John·Última actualización: 16 jul 2026
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥