Saltar al contenido
nearnull

Generador de Paletas para Tailwind

Convertí un color en una escala completa de Tailwind CSS de 50 a 950, lista para pegar como @theme de v4, config de v3 o variables CSS. Funciona enteramente en tu navegador: no se envía nada a ningún servidor.

Opciones

Se usa como bg-brand-500, text-brand-700...

Salida
Escala
50
100
200
300
400
500
600
700
800
900
950

Tu color se mantiene exacto en 600, el paso cuya luminosidad mejor le corresponde.

@theme {
  --color-brand-50: #f1f5fe;
  --color-brand-100: #dfe8fc;
  --color-brand-200: #c3d4f9;
  --color-brand-300: #99b6f6;
  --color-brand-400: #6b95f1;
  --color-brand-500: #457aee;
  --color-brand-600: #2563eb;
  --color-brand-700: #1555e2;
  --color-brand-800: #1147bc;
  --color-brand-900: #0e3a9b;
  --color-brand-950: #092563;
}

¿Qué es una escala de colores de Tailwind?

Tailwind CSS define cada color como una escala de once pasos, de 50 (casi blanco) a 950 (casi negro), y utilidades como bg-blue-100 o text-blue-700 eligen un paso. Un color de marca propio necesita los mismos once pasos para encajar. Este generador ubica tu color en el paso cuya luminosidad le corresponde, así se mantiene exacto, y arma los pasos más claros y más oscuros siguiendo la misma curva de luminosidad que la paleta de Tailwind, conservando el tono y la saturación. Escribe el resultado para el @theme de Tailwind v4, un archivo de config de v3 o variables CSS.

Ejemplos

Registrar la escala generada y usarla:

Tailwind v4
@import "tailwindcss";

@theme {
  --color-brand-500: #457aee;
  --color-brand-600: #2563eb;
}
Tailwind v3
// tailwind.config.js
theme: { extend: { colors: { brand: { 500: "#457aee", 600: "#2563eb" } } } }
HTML
<button class="bg-brand-600 text-white hover:bg-brand-700">
  Save
</button>
CSS
.button {
  background: var(--brand-600);
  border-color: var(--brand-700);
}

Casos de uso

Agregar un color de marca a Tailwind

Convertí el único valor HEX de una guía de estilo en una escala completa, así bg-brand-50 a bg-brand-950 funcionan como cualquier color incluido.

Estados hover, focus y deshabilitado

Usá pasos vecinos para los estados de interacción, como 600 para un botón y 700 en hover, sin elegir cada tono a mano.

Modo oscuro

Intercambiá pasos claros y oscuros entre temas, por ejemplo fondos 50 con texto 900 en modo claro y al revés en modo oscuro.

Design tokens fuera de Tailwind

Exportá la escala como variables CSS para usar la misma convención de 50 a 950 en cualquier hoja de estilos o librería de componentes.

Preguntas frecuentes

¿En qué paso queda mi color?
En el que tiene la luminosidad de referencia más cercana a la de tu color. Un azul medio como #2563eb cae en 600, un tono pálido en 100 o 200, un azul marino profundo en 900. Ese paso es tu color exacto; los demás se generan alrededor.
¿Va a coincidir exactamente con los colores de Tailwind?
No exactamente. La paleta de Tailwind se ajustó a mano, paso por paso. Este generador sigue la curva de luminosidad del azul de Tailwind, que se acerca mucho para la mayoría de los tonos, pero esperá pequeñas diferencias de saturación.
¿Cuál es la diferencia entre la salida v4 y la v3?
Tailwind v4 se configura en CSS: los colores son variables --color-* dentro de @theme. Tailwind v3 lee los colores de tailwind.config.js. Las dos generan las mismas clases utilitarias, como bg-brand-500.
¿Los pasos generados son accesibles?
La escala no se verifica en contraste. Como regla general, el texto de 700 para arriba sobre fondos 50 o blancos suele cumplir WCAG AA, pero verificá los pares exactos con el Verificador de Contraste.
¿Mis datos se envían a algún servidor?
No. La escala y el código se generan en tu navegador con JavaScript plano. No se transmite ni se guarda nada.

Herramientas relacionadas

Conversor de Colores (HEX, RGB, HSL, CMYK)Verificador de Contraste de Color (WCAG AA / AAA)Generador de Tonalidades (Tints y Shades)Generador de Degradados CSSGenerador de Paletas de Colores (Armonías)Selector de Color de Imagen