Generador de colores estilo Tailwind

Cómo Tailwind construye sus escalas

Cada color de Tailwind (red, blue, emerald, etc.) tiene 11 tonos: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. No son interpolación lineal de un color base: cada tono está ajustado a mano en lightness y saturation para verse perceptualmente uniforme. Por eso un blue-500 y un red-500 sienten que pesan lo mismo, aunque matemáticamente son muy distintos.

Qué tono usar para qué

• 50-100: fondos sutiles, hover states muy livianos.
• 200-300: bordes, separadores, fondos de tags y badges.
• 400-500: íconos secundarios, placeholders, ilustraciones.
• 600-700: botones primarios, links, CTAs (cumple AA con texto blanco).
• 800-900: texto sobre fondo claro, headings.
• 950: texto extremo, modo oscuro intenso, backgrounds en dark mode.

Por qué duplicar la paleta de Tailwind no siempre es buena idea

Si tu marca usa un verde particular, generar una escala desde cero es tentador. Pero las escalas oficiales de Tailwind están testeadas para accesibilidad: el 600 casi siempre pasa AA contra blanco, y el 100 contra el 800. Una escala mal balanceada puede romper esa garantía. Si dudás, mantené las escalas oficiales para grises y estados, y agregá solo tu color de marca.

Cómo integrarlo en tu proyecto

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: { 50: '#...', 100: '#...', /* ... */ 950: '#...' },
      },
    },
  },
}

Ahora tenés clases bg-brand-500, text-brand-700, border-brand-200 en todo tu proyecto. Si usás Tailwind 4 con la sintaxis CSS-first, el bloque va dentro de @theme.

OKLCH: el futuro de las paletas

Tailwind 4 migró sus colores de RGB a OKLCH, un espacio de color perceptualmente uniforme. La diferencia: en HSL, dos colores con la misma L pueden percibirse muy distintos en brillo (verde y azul al 50% L se ven diferentes). En OKLCH no. Eso permite escalas más naturales, especialmente en magentas y violetas que siempre fueron problemáticos en HSL.

Errores frecuentes al generar tu propia escala

1. Mantener la misma saturación en todos los tonos. Los extremos (50 y 950) deben tener menos saturación, sino se ven artificiales.
2. No verificar contraste. Tu nuevo color-600 puede no pasar AA. Verificalo siempre antes de mandarlo a producción.
3. Duplicar el color base como 500. A veces el color de marca es muy oscuro y mejor encaja como 600 o 700, generando 500 por interpolación hacia el blanco.
4. Olvidar el 950. Si hacés modo oscuro, lo vas a necesitar para fondos profundos.

Cuándo NO necesitás una paleta personalizada

Si tu producto está en fase MVP y todavía no decidiste el branding final, usá directamente las escalas oficiales (slate, blue, emerald). Migrar después es trivial; lanzar con una paleta a medio cocinar es lo que cuesta caro.