Generador de Paleta de Colores Tailwind

Genera una paleta completa de colores Tailwind CSS (50-950) a partir de un solo color de marca. Obtén tonos perceptualmente uniformes listos para pegar en tu configuración.

Tailwind CSS utiliza una escala numérica de 11 pasos (50, 100-900, 950) para cada familia de colores, siendo 500 típicamente el tono base.

Generar escalas en el espacio de color OKLCH produce pasos perceptualmente uniformes, lo que significa que cada tono aparece igualmente espaciado para el ojo humano.

Color de Marca

Paleta Generada

100

200

300

400

500

600

700

800

900

950

colors: {
  brand: {
    '50': '#eaf0fa',
    '100': '#d2e1f9',
    '200': '#9ec1fa',
    '300': '#6da2f8',
    '400': '#3c83f6',
    '500': '#0b64f4',
    '600': '#0950c3',
    '700': '#073c92',
    '800': '#052861',
    '900': '#071936',
    '950': '#060d19',
  },
}

--color-brand-50: #eaf0fa;
--color-brand-100: #d2e1f9;
--color-brand-200: #9ec1fa;
--color-brand-300: #6da2f8;
--color-brand-400: #3c83f6;
--color-brand-500: #0b64f4;
--color-brand-600: #0950c3;
--color-brand-700: #073c92;
--color-brand-800: #052861;
--color-brand-900: #071936;
--color-brand-950: #060d19;

Color de Marca

Paleta Generada

100

200

300

400

500

600

700

800

900

950

colors: {
  brand: {
    '50': '#eaf0fa',
    '100': '#d2e1f9',
    '200': '#9ec1fa',
    '300': '#6da2f8',
    '400': '#3c83f6',
    '500': '#0b64f4',
    '600': '#0950c3',
    '700': '#073c92',
    '800': '#052861',
    '900': '#071936',
    '950': '#060d19',
  },
}

--color-brand-50: #eaf0fa;
--color-brand-100: #d2e1f9;
--color-brand-200: #9ec1fa;
--color-brand-300: #6da2f8;
--color-brand-400: #3c83f6;
--color-brand-500: #0b64f4;
--color-brand-600: #0950c3;
--color-brand-700: #073c92;
--color-brand-800: #052861;
--color-brand-900: #071936;
--color-brand-950: #060d19;