Gerador de Cores Tailwind

Gere uma escala completa de cores do Tailwind CSS (50–950) a partir de qualquer cor base, com amostras ao vivo e saída pronta para copiar no formato @theme do Tailwind v4 ou na config do v3.


  

  
  

    
  



    

    

      
Gere uma paleta completa de cores do Tailwind CSS a partir de uma única cor com este gerador de cores Tailwind gratuito. Escolha ou cole qualquer valor hex, dê um nome à sua cor e obtenha instantaneamente todos os onze tons do Tailwind — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 e 950 — como amostras ao vivo e configuração pronta para copiar. Escolha entre as variáveis CSS @theme do Tailwind v4 ou um objeto de config clássico do v3, tudo calculado de forma privada no seu navegador.

      

        
O que é um gerador de cores Tailwind?

        
Um gerador de cores Tailwind transforma uma cor base no conjunto completo de tons que o Tailwind CSS espera para uma cor personalizada. As paletas embutidas do Tailwind (como blue ou rose) trazem onze tons claros e escuros identificados de 50 a 950, do muito claro ao muito escuro. Ao adicionar sua própria cor de marca, você precisa da mesma variação para que utilitários como bg-brand-100 ou text-brand-700 funcionem. Esta ferramenta cria essa variação para você mantendo o matiz da sua cor base e ajustando a luminosidade ao longo dos passos padrão do Tailwind, ancorando sua cor exata ao tom mais próximo para que ela continue reconhecível.

        
      

      

        
Como gerar uma escala de cores do Tailwind

        
Comece com qualquer cor e obtenha uma paleta pronta para colar em segundos. Tudo é atualizado ao vivo enquanto você digita.

        
  1. Escolha uma cor com a amostra ou cole um valor hex como #4f46e5.
  2. Digite um nome para a cor, por exemplo brand ou primary.
  3. Confira as amostras de 50 a 950 para verificar as pontas clara e escura.
  4. Escolha o formato de saída: @theme do Tailwind v4 ou config do v3.
  5. Clique em Copiar config e cole na sua configuração do Tailwind.

      

      

        
Saída Tailwind v4 vs v3

        
O Tailwind v4 configura cores com variáveis CSS dentro de um bloco @theme, então a ferramenta gera linhas como --color-brand-500. O Tailwind v3 usa uma config em JavaScript, então gera um objeto colors dentro de theme.extend que você cola em tailwind.config.js. Escolha o que combina com seu projeto e as chaves geradas vão coincidir com os nomes das classes utilitárias do Tailwind.

        
      

      

        
Por que usar este gerador de cores Tailwind?

        
  • Gera todos os onze tons do Tailwind (50–950) a partir de uma única cor base.
  • Produz tanto as variáveis @theme do Tailwind v4 quanto os objetos de config do v3.
  • Amostras ao vivo mostram cada tom com seu valor hex.
  • Nomeia sua cor para que as chaves combinem com as classes utilitárias do Tailwind.
  • Ancora sua cor exata ao tom mais próximo para que ela permaneça fiel.
  • 100% gratuito e privado — tudo roda no seu navegador.

      

      

        
Perguntas frequentes

        

          
Quais tons o Tailwind usa?

          
As escalas de cores do Tailwind usam onze passos: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 e 950. O passo 50 é o tom mais claro e o 950 é o mais escuro, com o 500 geralmente tratado como a base. Este gerador produz cada um desses passos para que sua cor personalizada se comporte como as paletas embutidas do Tailwind.

        

        

          
Como a paleta é calculada?

          
A ferramenta converte sua cor base para HSL, mantém o matiz e ajusta a luminosidade ao longo dos passos padrão do Tailwind para criar tons mais claros e mais escuros. Ela ajusta levemente a saturação para que as pontas clara e escura fiquem vivas e fixa sua cor exata no passo mais próximo em luminosidade, para que a paleta ainda represente a cor que você escolheu.

        

        

          
Como adiciono as cores geradas ao Tailwind?

          
Para o Tailwind v4, cole o bloco @theme no seu CSS para que as variáveis --color-name-* sejam registradas. Para o Tailwind v3, cole o objeto colors em theme.extend no tailwind.config.js. De qualquer forma, você poderá usar classes como bg-brand-500 ou text-brand-200 imediatamente.

        

        

          
Posso nomear a cor como eu quiser?

          
Sim. Digite qualquer nome como brand, primary ou accent. A ferramenta deixa tudo em minúsculas e substitui espaços e caracteres especiais por hifens, para que o resultado seja uma chave de cor válida no Tailwind, que vira o prefixo em classes como bg-accent-300.

        

        

          
Os dados da minha cor são enviados para algum lugar?

          
Não. A paleta inteira é gerada no seu navegador com JavaScript. Nada sobre suas cores ou config é enviado, então é seguro usar até para trabalhos de marca não lançados.