Gerador de Paleta de Cores
O gerador de paleta de cores cria uma paleta de 5 cores a partir de qualquer cor base usando harmonias da teoria das cores — complementar, tríade, análoga, complementar dividida, tetrádica ou monocromática — e a exporta como propriedades personalizadas de CSS.
Sobre esta ferramenta
O gerador de paleta de cores cria uma paleta de 5 cores a partir de qualquer cor base usando harmonias da teoria das cores — complementar, tríade, análoga, complementar dividida, tetrádica ou monocromática — e a exporta como propriedades personalizadas de CSS.
Como usar
- Escolha uma cor base no seletor de cores.
- Escolha um tipo de harmonia, como complementar ou tríade.
- Confira as cinco amostras geradas.
- Clique em Copiar como variáveis CSS para colar a paleta na sua folha de estilos.
Bom saber
- Cores complementares ficam a 180° uma da outra no círculo cromático; cores em tríade ficam espaçadas em 120°.
- Paletas análogas usam matizes vizinhos (cerca de 30° de distância) e costumam transmitir calma e coesão.
- A complementar dividida combina um matiz base com os dois matizes ao lado do seu complementar (±30°), gerando contraste com menos tensão.
- Paletas monocromáticas mantêm um único matiz e variam apenas saturação e luminosidade.
- O gerador trabalha em HSL, que gira o matiz sem alterar a luminosidade da cor.
Funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado.
Perguntas frequentes
O que é uma paleta de cores complementares?
Uma paleta complementar combina um matiz com o que fica exatamente do lado oposto no círculo cromático (a 180°), como azul e laranja. É a harmonia com o maior contraste.
Quantas cores a paleta de um site deve ter?
A maioria das interfaces usa uma cor primária, uma ou duas cores de destaque e um conjunto de neutros. Uma harmonia de cinco cores é um bom ponto de partida, que você pode reduzir ou ampliar com tons claros e escuros.
Qual a diferença entre tríade e tetrádica?
A tríade usa três matizes igualmente espaçados em 120°. A tetrádica usa quatro matizes espaçados em 90°, formando um quadrado no círculo, o que é mais rico, mas mais difícil de equilibrar.
Posso usar a paleta em CSS ou no Tailwind?
Sim. Copie a paleta como propriedades personalizadas de CSS e use-as com var(), ou cole os valores hex nas cores do tema do Tailwind.