Gerador de paleta de cores
A partir de uma cor base, gere paletas complementar, análoga, tríade, tétrade e monocromática.
Experimente outra ferramenta
Escolhidas para acompanhar estaGerador gratuito de paletas de cores: informe uma cor base em HEX e a ferramenta monta seis harmonias diferentes a partir dela — complementar, análoga, tríade, tétrade, complementar dividida e monocromática. Cada harmonia é uma regra clássica do círculo cromático, e ver todas lado a lado ajuda a escolher a combinação que funciona para o seu projeto. Tudo é calculado no navegador.
Como usar esta ferramenta
- 01Informe a cor baseDigite ou cole um código HEX como #3B82F6. É a partir dela que todas as harmonias são calculadas.
- 02Compare as harmoniasCada bloco mostra uma regra diferente de combinação, com as cores resultantes.
- 03Copie os códigosOs valores HEX ficam prontos para colar no CSS, no Figma ou na ferramenta de design que você usa.
Quando isso é útil?
- Montar a identidade visual de um projetoPartindo da cor principal da marca, as harmonias sugerem acentos que combinam de verdade.
- Escolher cores para um gráficoTríade e tétrade dão cores distinguíveis entre si, que é o que um gráfico precisa.
- Criar variações de um único tomA harmonia monocromática resolve quando o projeto pede sobriedade e uma cor só.
Exemplos
- ComplementarA cor do lado oposto do círculo. Contraste máximo, ótima para um acento usado com parcimônia.
- AnálogaCores vizinhas no círculo. Combinação suave e harmoniosa, sem tensão visual.
- TríadeTrês cores igualmente espaçadas. Vibrante e equilibrada, comum em material infantil e em marcas jovens.
Dicas para um resultado melhor
- Uma cor domina, as outras acentuamPaleta com cores em proporções iguais costuma parecer confusa. Escolha uma principal e use o resto em pequena quantidade.
- Confira o contraste antes de usar em textoUma combinação bonita pode ser ilegível. O verificador de contraste responde isso em um passo.
O que cada harmonia significa
Complementar usa a cor oposta no círculo cromático e entrega o maior contraste possível — funciona bem quando uma domina e a outra aparece só em detalhes. Análoga usa cores vizinhas e produz combinações calmas, sem disputa. Tríade pega três pontos igualmente espaçados: vibrante e equilibrada. Tétrade usa quatro, em dois pares complementares, e é a mais difícil de equilibrar. Complementar dividida suaviza a complementar, trocando a cor oposta pelas duas vizinhas dela. Monocromática varia só luminosidade e saturação do mesmo tom.
Como transformar a paleta em design
Uma regra prática antiga é a proporção 60/30/10: cerca de 60% da área com a cor dominante, geralmente neutra ou bem clara, 30% com a secundária e 10% com o acento. Paletas que dão errado quase sempre usam as cores em quantidades parecidas, o que faz nenhuma delas liderar. Comece decidindo qual cor é o fundo, qual é o texto e qual é a ação — botão, link, destaque — e só depois distribua o resto.
Harmonia não garante legibilidade
As regras do círculo cromático dizem quais cores combinam, e não quais podem ficar uma sobre a outra como texto e fundo. Uma tríade perfeitamente harmônica pode ter contraste de 1,8:1 entre duas de suas cores, muito abaixo do mínimo de 4,5:1 que as diretrizes de acessibilidade pedem para texto normal. Escolha a paleta aqui e verifique os pares que vão virar texto sobre fundo no verificador de contraste antes de fechar.
Perguntas frequentes
Qual harmonia devo escolher?
Análoga para um visual calmo, complementar para contraste forte, tríade para algo vibrante e monocromática para sobriedade.
Que formato de cor a ferramenta aceita?
Código HEX, como #3B82F6. Formatos curtos de três dígitos também funcionam.
A paleta garante boa legibilidade?
Não. Harmonia é sobre combinação, não sobre contraste. Verifique os pares de texto e fundo no verificador de contraste.
Quantas cores devo usar em um projeto?
Na prática, uma dominante, uma secundária e um acento resolvem a maioria dos casos. Mais que isso costuma dispersar.
As paletas ficam salvas?
Não. Tudo é gerado no seu navegador e nada é armazenado.