🌈 Gerador de Paleta de Cores

O gerador de paleta de cores ajuda você a montar combinações harmônicas a partir de uma única cor base, sem precisar entender de teoria das cores. Escolha um ponto de partida e a ferramenta calcula automaticamente tons e sombras, a cor complementar e as cores análogas, sempre com o código HEX pronto para copiar. É ideal para quem trabalha com design gráfico, sites, apresentações, identidade visual, edição de fotos ou simplesmente quer testar combinações agradáveis para um projeto pessoal.

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, então você pode usar a ferramenta à vontade, inclusive offline depois de carregada.

Exemplos e dicas

Para um site, uma boa prática é escolher a cor da marca como base, usar 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, garantindo que ele se destaque. Já em uma identidade visual ou post para redes sociais, as cores análogas costumam funcionar melhor, porque passam coesão sem cansar a vista.

Uma dica prática: gere a paleta, copie os HEX dos tons e monte uma escala de cores 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 estiver sem ideia de por onde começar, use o botão Cor aleatória algumas vezes até encontrar uma base que agrade.

Perguntas frequentes