Gerador de escala tonal

Escolha uma cor base e gere tons de 50 até 900 para montar seu design system.

Cor base

A escala preserva o matiz e distribui a luminosidade em dez níveis, do fundo mais claro ao tom mais profundo.

Variáveis CSS


          

            
            
          

        

      

    

      Misturar cores ->
      Gerar harmonia ->
      Criar gradiente ->
      Ver ferramentas ->
    

    

    
    
  

    

      

    
Como usar Escala tonal

    
Gere tons de 50 a 900 para tokens de design system. Use a ferramenta diretamente no navegador, ajuste os campos principais, confira o resultado visual e copie ou baixe o material final quando estiver pronto.


    

      

        Uso prático
        
Quando usar

        
Use este recurso quando precisar acelerar uma decisão de cores, design e acessibilidade sem abrir softwares pesados ou montar scripts manuais para tarefas repetitivas.

      

      

        Boas práticas
        
Antes de aplicar

        
Teste o resultado em mais de um tamanho de tela, mantenha contraste legível e salve os valores finais em seu projeto para preservar consistência entre páginas, componentes e materiais.

      

      

        Produtividade
        
Fluxo recomendado

        
Comece com uma configuração simples, refine visualmente, valide o resultado e depois combine esta ferramenta com recursos relacionados para fechar o acabamento do projeto.

      

    


          

        
Continue também com

        
        

                      
              
                Simulador de daltonismo
                Veja fundo e texto ou um mock de interface como em tipos comuns de visao com alteracao de cores.
              
              
            
                      
              
                Gerador de harmonia
                Gere esquemas complementar, analogo, triade e tetade a partir de um hexadecimal.
              
              
            
                      
              
                Teste de contraste WCAG
                Compare texto e fundo para validar legibilidade e criterios WCAG em interfaces.
              
              
            
                  

      

    
    

      
FAQ

      
Dúvidas frequentes

      

        

          
Essa ferramenta envia dados para o servidor?

          
As ferramentas interativas do site priorizam processamento local no navegador sempre que possível, especialmente em imagens, cores e códigos gerados pelo usuário.

        

        

          
Posso usar o resultado em projetos comerciais?

          
Sim. Os códigos, valores e arquivos gerados podem ser usados em sites, interfaces, materiais de estudo e projetos profissionais.

        

        

          
Qual é o melhor jeito de validar o resultado?

          
Confira contraste, legibilidade, tamanho final e compatibilidade com o contexto do projeto antes de publicar em produção.