Gerador de Paleta de Cores
Gere paletas de cores bonitas a partir de qualquer cor base usando regras de harmonia — complementar, análoga, tríade, tétrade, monocromática e tons — com amostras ao vivo e variáveis CSS prontas para copiar.
Gere uma paleta de cores bonita e harmoniosa a partir de uma única cor base com este gerador de paleta de cores gratuito. Escolha ou cole qualquer valor hex, selecione uma regra de harmonia de cores — complementar, análoga, tríade, tétrade, monocromática ou tons — e obtenha instantaneamente cinco cores combinando como amostras ao vivo e variáveis CSS prontas para copiar. Use o botão aleatório para explorar novos esquemas, tudo calculado de forma privada no seu navegador.
O que é um gerador de paleta de cores?
Um gerador de paleta de cores transforma uma cor base em um conjunto de cores que combinam entre si aplicando regras clássicas de harmonia da teoria das cores. Em vez de adivinhar quais cores combinam, você escolhe uma cor inicial e uma harmonia — como complementar ou análoga — e a ferramenta calcula o resto girando o matiz e ajustando a luminosidade no círculo cromático. O resultado é um esquema pronto para usar em sites, design de interfaces, identidade visual, ilustrações ou qualquer projeto que precise de cores que funcionem em grupo.
Como gerar uma paleta de cores
Monte um esquema de cores combinando em segundos. Tudo é atualizado ao vivo conforme você muda a cor ou a harmonia.
- Escolha uma cor base com a amostra ou cole um valor hex como #4f46e5.
- Escolha uma regra de harmonia: complementar, análoga, tríade, tétrade, monocromática ou tons.
- Confira as amostras ao vivo e seus códigos hex.
- Clique em Cor aleatória para explorar novos pontos de partida.
- Clique em Copiar paleta para pegar as variáveis CSS para o seu projeto.
Regras de harmonia de cores explicadas
Cada harmonia escolhe cores de uma posição diferente no círculo cromático. A complementar usa o matiz oposto para alto contraste. A análoga usa matizes vizinhos para um visual calmo e coeso. A tríade e a tétrade espalham três ou quatro matizes igualmente espaçados para esquemas equilibrados e vibrantes. A monocromática mantém um único matiz e varia apenas a luminosidade, enquanto Tons percorre a mesma cor do claro ao escuro.
Por que usar este gerador de paleta de cores?
- Seis regras de harmonia: complementar, análoga, tríade, tétrade, monocromática e tons.
- Amostras ao vivo com códigos hex são atualizadas na hora ao escolher as cores.
- Botão aleatório gera novas paletas para inspirar ideias.
- Variáveis CSS prontas para colar direto na sua folha de estilo.
- Aceita o seletor de cores ou um valor hex digitado, com hex de 3 ou 6 dígitos.
- 100% gratuito e privado — tudo roda no seu navegador.
Perguntas frequentes
O que é uma harmonia de cores?
Uma harmonia de cores é uma regra para escolher cores que ficam agradáveis juntas com base em suas posições no círculo cromático. Harmonias comuns incluem complementar (matizes opostos), análoga (matizes vizinhos) e tríade (três matizes igualmente espaçados). Este gerador aplica a harmonia que você escolher à sua cor base para montar uma paleta combinando.
Qual é a diferença entre paletas complementares e análogas?
Paletas complementares unem uma cor ao matiz diretamente oposto no círculo, criando um forte contraste ótimo para destaques e chamadas para ação. Paletas análogas usam cores que ficam lado a lado, dando uma sensação mais suave e unificada que funciona bem em fundos e gradientes.
Como uso a paleta gerada no CSS?
A ferramenta gera a paleta como propriedades personalizadas do CSS, como --color-1, --color-2 e assim por diante. Cole-as em um bloco :root na sua folha de estilo e use em qualquer lugar com var(--color-1). Você também pode copiar os códigos hex individuais mostrados sob cada amostra.
Posso obter uma paleta aleatória?
Sim. Clique no botão Cor aleatória para definir uma cor base aleatória, e a ferramenta reconstrói a paleta usando a sua regra de harmonia atual. É uma forma rápida de explorar esquemas de cores que talvez você não tivesse pensado.
Minhas cores são enviadas para algum lugar?
Não. A paleta inteira é gerada no seu navegador com JavaScript. Nada sobre as suas cores é enviado para um servidor, então é seguro usar até para trabalhos de marca e design não lançados.