Gerador de Paleta de Cores

Belas paletas de 5 cores — barra de espaço para gerar, trave para manter, extraia de imagens

Harmonia:

Extrair Cores da Imagem

📁 Clique para fazer upload ou arraste e solte uma imagem

JPG, PNG, WebP — até 10 MB

Sua imagem nunca sai do seu dispositivo — todo o processamento acontece no seu navegador.

Exportar Paleta


      

    


    
    

      

        
Verificação de Contraste WCAG

        

      

    


    
    

      

        
Paletas Salvas 

        

          Limpar todas as paletas salvas?
          
          
        

        

      

    


    
    

    
    

      
Como a Geração de Paletas Funciona

      
Cada paleta é gerada usando o espaço de cores HSL — Matiz (0–360°), Saturação (0–100%) e Luminosidade (0–100%). O HSL é intuitivo para regras de harmonia porque as relações de matiz se baseiam na distância angular ao redor do círculo cromático.


      

        

          

            

            

            

          

          
Análoga

          
Matizes dentro de 30° entre si. Harmoniosa e tranquila. Ótima para temas de natureza e oceano.

        

        

          

            

            

            

          

          
Complementar

          
Dois matizes a 180° de distância. Alto contraste e vibrante. Comum em marcas esportivas.

        

        

          

            

            

            

          

          
Triádica

          
Três matizes igualmente espaçados a 120° entre si. Equilibrada, porém colorida. Boa para marcas lúdicas.

        

        

          

            

            

            

          

          
Monocromática

          
Mesmo matiz, saturação e luminosidade variadas. Elegante e coesa. Perfeita para design minimalista.

        

        

          

            

            

            

          

          
Complementar Dividida

          
Um matiz base mais dois matizes a 150° de cada lado. Contraste sem tensão.

        

        

          

            

            

            

            

          

          
Tetrádica

          
Quatro matizes em intervalos de 90°. Rica e complexa. Funciona melhor quando uma cor domina.

        

      


      
Exemplo Prático — Paleta Análoga

      
Matiz inicial: H = 210° (um azul). Regra análoga: espaçar 5 matizes com 15° de diferença.
Matizes: 195°, 205°, 215°, 225°, 235°.
Saturação: variando de 55% a 70% para profundidade. Luminosidade: variando de 45% a 70% para amplitude.
Resultado: uma paleta coesa de gradiente azul-oceano com contraste natural.

    


    
    

    
    

      
Dicas de Paleta de Cores para Designers

      
    
        
  • Siga a regra 60-30-10. Use sua cor dominante em 60% do design (fundos, grandes áreas), uma secundária em 30% (seções, painéis de UI) e um destaque em 10% (CTAs, realces). Uma paleta de 5 cores se encaixa naturalmente nessa regra.
    • 
        
  • Sempre verifique o contraste para textos. Uma paleta bonita ainda pode reprovar no WCAG AA se a cor do texto e o fundo não tiverem pelo menos 4,5:1 de taxa de contraste. Use o Verificador de Contraste integrado acima.
    • 
        
  • Limite sua paleta em produção. Ter 5 cores disponíveis não significa usar todas as 5 em cada tela. A maioria dos designs polidos usa 2–3 cores de forma dominante e reserva as outras para momentos específicos.
    • 
        
  • Trave sua cor de marca primeiro. Se você tiver uma cor primária de marca, clique no ícone de cadeado naquele swatch antes de gerar novamente — a ferramenta construirá uma paleta harmoniosa em torno da sua cor travada.
    • 
        
  • Extração de imagem para harmonizar com o mood. Faça upload de uma foto que capture o clima que você está projetando (uma paisagem, um produto, uma imagem de estilo de vida) — a paleta extraída já estará emocionalmente alinhada com a direção da sua marca.
    • 
      

    


    
    

      
Perguntas Frequentes

      

        
As paletas usam regras de harmonia HSL (Matiz, Saturação, Luminosidade). Por exemplo, a Análoga escolhe matizes dentro de 30° entre si, a Complementar usa matizes a 180° de distância e a Triádica escolhe três matizes a 120°. Saturação e luminosidade são variadas para criar contraste visualmente agradável dentro de cada paleta.

        
Não — sua imagem nunca sai do seu dispositivo. A ferramenta usa a Canvas API do navegador para ler dados de pixels localmente e extrair cores dominantes usando um algoritmo de agrupamento por frequência. Sem servidor, sem upload, sem rastreamento.

        
Clique diretamente em qualquer swatch de cor ou no rótulo do seu código hex para copiar o código hex para a área de transferência. Uma breve mensagem de confirmação aparece.

        
Você pode exportar como propriedades CSS personalizadas (--color-1 a --color-5), um trecho de configuração CSS para Tailwind, variáveis SCSS, um objeto JSON ou uma lista de hex separada por vírgulas. Clique em qualquer botão de exportação para copiar para a área de transferência instantaneamente.

        
O verificador de contraste exibe selos de aprovação/reprovação WCAG AA para cada cor da paleta renderizada como texto sobre fundos branco (#fff) e preto (#000). Cores que atendem à proporção de 4,5:1 para texto normal exibem um selo verde "AA ✓".

        
Até 50 paletas podem ser salvas no localStorage do seu navegador. Elas persistem entre sessões. Você pode visualizar, recarregar ou excluir paletas salvas no painel Histórico.