🌈 Gerador de Paleta de Cores

O gerador de paleta de cores monta combinações harmônicas a partir de uma cor base, sem exigir conhecimento de teoria das cores. A ferramenta calcula tons e sombras, a cor complementar e as cores análogas, sempre com o código HEX pronto para copiar. Útil para design gráfico, sites, apresentações, identidade visual e edição de imagens.

Como usar

1. Clique no seletor Cor base e escolha a cor de partida, ou digite a cor desejada no seletor do navegador.
2. Se preferir explorar, clique em Cor aleatória para sortear uma nova base a cada clique.
3. A paleta é gerada na hora em três grupos: Tons e sombras, Complementar e Análogas.
4. Clique em qualquer amostra (ou na prévia da cor base) para copiar o código HEX para a área de transferência.
5. Cole o HEX no seu CSS, no editor de imagens, no Canva, no Figma ou onde precisar.

Como funciona

A ferramenta converte a cor base do formato HEX para RGB e depois para HSL (matiz, saturação e luminosidade). É trabalhando sobre o valor de matiz na roda de cores que cada harmonia é calculada:

• Tons e sombras: mantêm o mesmo matiz e a mesma saturação, variando apenas a luminosidade, do mais claro (92%) ao mais escuro (22%). Servem para criar hierarquia visual, com o tom forte no destaque e os claros no fundo.
• Complementar: soma 180° ao matiz para encontrar a cor oposta na roda, que gera o contraste máximo. Também são geradas versões mais claras da base e da oposta. Use a complementar com moderação, em botões e chamadas de ação.
• Análogas: deslocam o matiz em ±30° e ±60°, resultando em cores vizinhas que combinam de forma suave, ótimas para fundos, ilustrações e composições calmas.

Todo o cálculo acontece localmente no seu navegador: nenhuma cor é enviada para servidores, e a ferramenta funciona offline depois de carregada.

Exemplos rápidos

Como a cor complementar é sempre o matiz oposto na roda de cores (matiz + 180°), dá para prever algumas combinações clássicas. Veja alguns pares de cor base e sua complementar exata:

• Vermelho #FF0000 → complementar Ciano #00FFFF
• Verde #00FF00 → complementar Magenta #FF00FF
• Azul #0000FF → complementar Amarelo #FFFF00
• Amarelo #FFFF00 → complementar Azul #0000FF
• Laranja #FF8000 → complementar Azul-celeste #0080FF
• Ciano #00FFFF → complementar Vermelho #FF0000

Já os tons e sombras partem do mesmo matiz e vão do claro ao escuro. Com o azul #3B5BDB como base, por exemplo, a ferramenta gera uma escala ideal para textos, fundos e botões da mesma família de cor. As cores análogas ficam a ±30° e ±60° do matiz da base, resultando em vizinhas que combinam de forma suave.

Exemplos e dicas

Num site, use a cor da marca como base, um tom escuro para textos, um tom claro para fundos de seção e a cor complementar apenas no botão principal de ação, para que ele se destaque. Em identidade visual ou posts para redes sociais, as cores análogas costumam funcionar melhor, porque passam coesão sem cansar a vista.

Uma dica: copie os HEX dos tons e monte uma escala no seu projeto (por exemplo, versões 100, 300, 500, 700 e 900 da mesma cor). Isso deixa o design consistente e facilita ajustes futuros. Se não souber por onde começar, use o botão Cor aleatória até encontrar uma base que agrade.

Perguntas frequentes