Generador de paletas de colores de Tailwind.

Introduce un color y obtén una escala al estilo Tailwind de 11 tonalidades, del 50 al 950, calculada en OKLCH igual que la paleta propia de Tailwind v4. Tu color se mantiene exactamente como lo introdujiste, en el paso más cercano a su luminosidad. Funciona en tu navegador, así que nada de lo que introduces se sube.

ColorNombre del color

Tu color es el paso 500.

50#F1F6FD
100#E0EBFB
200#C6DAFA
300#9EC2FB
400#659FFD
500#3B82F6
600#2873EA
700#215FC3
800#1E50A0
900#1F4482
950#0C2246

@theme {
  --color-brand-50: oklch(0.971 0.011 256.695);
  --color-brand-100: oklch(0.937 0.025 257.646);
  --color-brand-200: oklch(0.884 0.049 259.79);
  --color-brand-300: oklch(0.809 0.09 259.44);
  --color-brand-400: oklch(0.705 0.151 259.626);
  --color-brand-500: oklch(0.623 0.188 259.815);
  --color-brand-600: oklch(0.578 0.195 259.687);
  --color-brand-700: oklch(0.505 0.169 259.846);
  --color-brand-800: oklch(0.445 0.141 259.626);
  --color-brand-900: oklch(0.395 0.113 260.11);
  --color-brand-950: oklch(0.257 0.073 259.785);
}

Funciona en tu navegador. Nada de lo que añadas aquí se sube ni se guarda.

Cómo crear una escala de colores de Tailwind

Introduce tu color. Elígelo en la muestra o escríbelo como HEX, rgb(), hsl() u oklch(). Empieza en #3B82F6.
Ponle nombre a la escala. El nombre pasa a formar parte de cada variable, como en --color-brand-500, y empieza siendo brand. Se pasa a minúsculas, y todo lo que no sea una letra, un número o un guion se convierte en un guion.
Lee la escala. Once muestras van del 50, la más clara, al 950, la más oscura, cada una con su código HEX y un botón para copiarlo. Tu color aparece con un contorno, y la página te dice qué paso es, por ejemplo “Tu color es el paso 500.”
Copia el código. La pestaña Tailwind v4 @theme y la pestaña Variables CSS enumeran --color-<name>-<step> para los 11 pasos como valores oklch(), la primera dentro de @theme y la segunda dentro de :root.

Cómo se construye la escala

La luminosidad sigue la curva de la propia paleta de Tailwind v4, tomada de su escala roja: unos 0.97 en el paso 50, 0.64 en el 500 y 0.26 en el 950.
El croma, lo vivo que es el color, sigue la curva de esa misma escala, que alcanza su máximo en el 600, y se ajusta al croma de tu color.
El tono se mantiene igual al de tu color en todos los pasos.
Tu color queda sin cambios en el paso más cercano a su propia luminosidad. Para el #3B82F6 por defecto, ese es el paso 500.
Los pasos que sRGB no puede mostrar se devuelven al rango reduciendo su croma, así que cada código HEX de las muestras es un color que una pantalla puede mostrar.

Úsala en Tailwind y en Codex

En un proyecto con Tailwind v4, pega el bloque @theme en el archivo CSS que contiene @import "tailwindcss". Cada variable --color-brand-* se convierte en clases: bg-brand-500, text-brand-700, border-brand-200 y así sucesivamente.

Un reparto habitual de los pasos: del 50 al 200 para tintes y fondos, del 500 al 600 para botones y enlaces, del 700 al 900 para texto sobre fondos claros y el 950 para el texto más oscuro. Qué paso es lo bastante oscuro para llevar texto blanco depende del tono, así que comprueba cada pareja en el comprobador de contraste.

Para que Codex use la escala en todas partes y no se desvíe, dale el bloque y las normas:

Añadir la escala

Añade esta escala al archivo CSS global de nuestro proyecto con Tailwind v4, dentro del bloque @theme existente si lo hay: [pega el bloque @theme]. Usa brand-600 para los botones principales y los enlaces, brand-700 al pasar el cursor, brand-50 para los fondos con tinte y brand-950 para el texto más oscuro. No añadas ningún otro color de marca y comprueba que el texto en cada una de estas parejas alcance al menos 4.5:1 de contraste. Después anota en DESIGN.md qué paso se usa para qué.

Preguntas frecuentes

¿Es gratis?

Sí. Es gratis, no requiere registro y no hay límite de escalas que puedas crear.

¿Se suben mis colores?

No. La escala se crea en tu navegador y no se envía ni se guarda en ningún sitio. El sitio solo cuenta que se usó la herramienta, nunca los colores.

¿Coincidirá con los colores integrados de Tailwind?

No exactamente. Aplica la curva de luminosidad de la escala roja de Tailwind v4 a todos los tonos, así que los pasos están repartidos de forma uniforme y resultan familiares, pero Tailwind ajusta por separado cada uno de sus colores. Un azul generado se parecerá en espíritu al azul de Tailwind, pero no será idéntico.

¿Funciona con Tailwind v3?

La pestaña @theme es para Tailwind v4. Para v3, copia los códigos HEX de las muestras en la sección colors de tailwind.config, con un nombre como brand y los números de paso como claves.