Gerador de Cores Material

Gere uma paleta completa do Material Design a partir de qualquer cor base, com todos os tons primários (50–900), cores de destaque (A100–A700), amostras ao vivo e saída pronta para copiar em CSS, SCSS ou JSON.

Tons primários (50–900)

Cores de destaque (A100–A700)


  

  
  

    
  



    

    

      
Crie uma paleta completa do Material Design a partir de uma única cor com este gerador de cores Material gratuito. Escolha ou cole qualquer valor hex, dê um nome à sua paleta e obtenha instantaneamente os dez tons primários — 50, 100, 200, 300, 400, 500, 600, 700, 800 e 900 — além das quatro cores de destaque do Material A100, A200, A400 e A700, exibidas como amostras ao vivo com variáveis CSS, um mapa SCSS ou JSON prontos para copiar. Tudo é calculado de forma privada no seu navegador.

      

        
O que é um gerador de cores Material?

        
Um gerador de cores Material transforma uma cor base no conjunto completo de tons que o sistema Material Design do Google espera para uma paleta. Cada cor do Material (como Indigo ou Teal) traz dez tons primários numerados de 50 a 900, do mais claro ao mais escuro, além de um pequeno conjunto de cores de destaque vibrantes rotuladas como A100, A200, A400 e A700. Esta ferramenta cria toda essa variação a partir da cor escolhida, tratando-a como o tom 500, misturando-a com branco para os tons mais claros e com preto para os mais escuros, e derivando destaques vivos a partir do mesmo matiz.

        
      

      

        
Como gerar uma paleta Material Design

        
Comece com qualquer cor e obtenha uma paleta Material 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 #3f51b5.
  2. Digite um nome para a paleta, por exemplo primary ou brand.
  3. Revise os tons 50–900 e os destaques A100–A700 nas amostras ao vivo.
  4. Escolha variáveis CSS, um mapa SCSS ou JSON como formato de saída.
  5. Clique em Copiar paleta e cole diretamente no seu projeto.

      

      

        
Tons primários vs cores de destaque

        
As paletas Material têm duas partes. Os tons primários (50–900) são clareamentos e escurecimentos da cor base usados em superfícies, texto e grandes áreas, com o 500 atuando como cor principal. As cores de destaque (A100–A700) são variantes mais saturadas e chamativas, destinadas a realces como botões, controles deslizantes e botões de ação flutuantes. Este gerador produz os dois conjuntos para que seu tema Material fique completo e pronto para entrar nos seus tokens de design.

        
      

      

        
Por que usar este gerador de cores Material?

        
  • Gera os dez tons primários do Material (50–900) a partir de uma cor base.
  • Adiciona as quatro cores de destaque do Material A100, A200, A400 e A700.
  • Amostras ao vivo mostram cada tom com seu valor hex e texto de contraste legível.
  • Exporta como variáveis CSS, um mapa SCSS ou tokens de design em JSON.
  • Nomeia sua paleta para que as chaves se encaixem direto no seu código.
  • 100% grátis e privado — tudo roda no seu navegador.

      

      

        
Perguntas frequentes

        

          
Quais tons o Material Design usa?

          
Uma paleta do Material Design usa dez tons primários — 50, 100, 200, 300, 400, 500, 600, 700, 800 e 900 — onde 50 é o clareamento mais claro e 900 é o escurecimento mais escuro, com o 500 tratado como base. Ela também adiciona quatro tons de destaque rotulados como A100, A200, A400 e A700. Este gerador produz todos esses tons a partir da cor escolhida.

        

        

          
Como a paleta é calculada?

          
A ferramenta trata a cor informada como o tom 500. Ela mistura essa cor com branco em quantidades crescentes para criar os tons mais claros de 50 a 400, e com preto para criar os tons mais escuros de 600 a 900. As cores de destaque são derivadas do mesmo matiz usando variações HSV de alta saturação, por isso parecem mais brilhantes e vivas do que os tons primários.

        

        

          
Para que servem as cores de destaque?

          
As cores de destaque (A100–A700) são as cores vibrantes e de alto contraste de uma paleta Material. Elas são usadas em realces interativos como botões de ação flutuantes, interruptores, controles deslizantes e estados de seleção, quando você quer que o elemento se sobressaia em relação às cores primárias mais discretas das superfícies.

        

        

          
Como adiciono a paleta ao meu projeto?

          
Escolha o formato de saída que combina com seu stack. As variáveis CSS entram em um bloco :root, o mapa SCSS funciona com mixins de tema no estilo Material e o formato JSON serve para tokens de design ou objetos de tema em JavaScript. Copie o código gerado e cole onde suas cores são definidas.

        

        

          
Meus dados de cor são enviados para algum lugar?

          
Não. Toda a paleta é gerada no seu navegador com JavaScript. Nada sobre suas cores ou o nome da paleta é enviado, então a ferramenta funciona offline e é segura para usar em trabalhos de marca não lançados.