Como funciona
Escolha uma cor base e uma regra de harmonia, e uma paleta combinando é criada girando o matiz pelo círculo cromático ou mudando a luminosidade. Toque em qualquer amostra para copiar o código, ou copie o conjunto inteiro como variáveis CSS para a sua folha de estilos.
Complementar = matiz + 180° · Tríade = matiz + 120° e + 240°
Regras de harmonia
- Complementar: cores opostas para contraste forte e botões de chamada para ação.
- Análoga: cores vizinhas no círculo para designs calmos e naturais.
- Tríade e tétrade: três ou quatro matizes igualmente espaçados para paletas vivas e equilibradas.
- Complementar dividida: as duas vizinhas da cor oposta — contraste com menos tensão.
- Monocromática, tons claros e escuros: um só matiz em vários níveis de luminosidade, ideal para estados de interface.
Dicas
- Use uma cor como tom principal, outra como destaque e as demais com moderação.
- Confira os pares de texto e fundo no verificador de contraste antes de publicar.
- Tudo roda no seu navegador; nada é salvo.
Padrões e fontes
- As harmonias são calculadas no círculo cromático HSL definido no CSS Color Module Level 4
Última revisão 7 de outubro de 2026
Perguntas frequentes
Como criar uma paleta de cores a partir de uma cor?
Digite sua cor base e escolha uma regra de harmonia. A ferramenta gira o matiz no círculo cromático ou muda a luminosidade para criar cores que combinam.
Qual harmonia é melhor para um site?
Paletas análogas ou monocromáticas passam calma e consistência; adicione uma cor complementar como destaque para botões e links.
O que são tons claros e escuros?
Tons claros são versões mais claras de uma cor, e tons escuros, versões mais escuras. São úteis para estados de hover, bordas e fundos.
Posso exportar a paleta?
Sim. Copie o bloco de variáveis CSS ou toque em qualquer amostra para copiar um único código HEX.
A ferramenta sugere uma paleta aleatória?
Toque em “Cor base aleatória” para começar com uma cor nova e depois troque a regra de harmonia para explorar.