Generador de Colores Tailwind

Genera una escala de colores completa de Tailwind CSS (50–950) a partir de cualquier color base, con muestras en vivo y salida lista para copiar en formato @theme de Tailwind v4 o config de v3.


  

  
  

    
  



    

    

      
Genera una paleta de colores completa de Tailwind CSS a partir de un solo color con este generador de colores Tailwind gratuito. Elige o pega cualquier valor hex, ponle nombre a tu color y obtén al instante los once tonos de Tailwind — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 y 950 — como muestras en vivo y configuración lista para copiar. Elige entre las variables CSS @theme de Tailwind v4 o un objeto de config clásico de v3, todo calculado de forma privada en tu navegador.

      

        
¿Qué es un generador de colores Tailwind?

        
Un generador de colores Tailwind convierte un color base en el conjunto completo de tonos que Tailwind CSS espera para un color personalizado. Las paletas integradas de Tailwind (como blue o rose) incluyen once tintes y sombras identificados de 50 a 950, del muy claro al muy oscuro. Cuando añades tu propio color de marca necesitas la misma variación para que utilidades como bg-brand-100 o text-brand-700 funcionen. Esta herramienta crea esa variación por ti manteniendo el matiz de tu color base y ajustando la luminosidad a lo largo de los pasos estándar de Tailwind, anclando tu color exacto a su tono más cercano para que siga siendo reconocible.

        
      

      

        
Cómo generar una escala de colores de Tailwind

        
Empieza con cualquier color y obtén una paleta lista para pegar en segundos. Todo se actualiza en vivo mientras escribes.

        
  1. Elige un color con la muestra o pega un valor hex como #4f46e5.
  2. Escribe un nombre para el color, por ejemplo brand o primary.
  3. Revisa las muestras de 50 a 950 para comprobar los extremos claro y oscuro.
  4. Elige el formato de salida: @theme de Tailwind v4 o config de v3.
  5. Haz clic en Copiar config y pégalo en tu configuración de Tailwind.

      

      

        
Salida de Tailwind v4 frente a v3

        
Tailwind v4 configura los colores con variables CSS dentro de un bloque @theme, por lo que la herramienta genera líneas como --color-brand-500. Tailwind v3 usa una config en JavaScript, así que genera un objeto colors dentro de theme.extend que pegas en tailwind.config.js. Elige el que se ajuste a tu proyecto y las claves generadas coincidirán con los nombres de las clases utilitarias de Tailwind.

        
      

      

        
¿Por qué usar este generador de colores Tailwind?

        
  • Genera los once tonos de Tailwind (50–950) a partir de un solo color base.
  • Produce tanto las variables @theme de Tailwind v4 como los objetos de config de v3.
  • Las muestras en vivo muestran cada tono con su valor hex.
  • Nombra tu color para que las claves coincidan con las clases utilitarias de Tailwind.
  • Ancla tu color exacto al tono más cercano para que se mantenga fiel.
  • 100% gratuito y privado: todo se ejecuta en tu navegador.

      

      

        
Preguntas frecuentes

        

          
¿Qué tonos usa Tailwind?

          
Las escalas de colores de Tailwind usan once pasos: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 y 950. El paso 50 es el tinte más claro y el 950 es la sombra más oscura, con el 500 tratado normalmente como la base. Este generador produce cada uno de esos pasos para que tu color personalizado se comporte como las paletas integradas de Tailwind.

        

        

          
¿Cómo se calcula la paleta?

          
La herramienta convierte tu color base a HSL, mantiene su matiz y ajusta la luminosidad a lo largo de los pasos estándar de Tailwind para crear tintes más claros y sombras más oscuras. Modifica ligeramente la saturación para que los extremos claro y oscuro se mantengan vivos, y fija tu color exacto en el paso más cercano en luminosidad para que la paleta siga representando el color que elegiste.

        

        

          
¿Cómo añado los colores generados a Tailwind?

          
Para Tailwind v4, pega el bloque @theme en tu CSS para que las variables --color-name-* queden registradas. Para Tailwind v3, pega el objeto colors en theme.extend dentro de tailwind.config.js. En cualquier caso, podrás usar enseguida clases como bg-brand-500 o text-brand-200.

        

        

          
¿Puedo ponerle al color el nombre que quiera?

          
Sí. Escribe cualquier nombre como brand, primary o accent. La herramienta lo pasa a minúsculas y reemplaza los espacios y caracteres especiales por guiones, de modo que el resultado sea una clave de color válida en Tailwind, que se convierte en el prefijo de clases como bg-accent-300.

        

        

          
¿Se envían los datos de mi color a algún sitio?

          
No. La paleta entera se genera en tu navegador con JavaScript. No se sube nada sobre tus colores ni tu config, así que es seguro usarla incluso para trabajos de marca sin publicar.