Adivinhar quais cores combinam desperdiça tempo de projeto. Este gerador aplica as harmonias clássicas do círculo cromático, as mesmas relações de matiz ensinadas na teoria das cores, então cada paleta sai matematicamente coordenada, e não no olhômetro. Clique em qualquer amostra para copiar o código hex, ou copie a paleta inteira como variáveis CSS prontas para colar. É totalmente client-side: sem conta, sem upload, sem rastreamento das cores da sua marca.
Gerador de Paleta de Cores Grátis
Funciona inteiramente no seu navegador - sem upload, sem cadastro.
Harmonia
Variáveis CSS
O que é um gerador de paleta de cores?
Um gerador de paleta de cores cria um esquema de cores combinando a partir de uma cor base, usando a teoria do círculo cromático. Você escolhe ou digita uma cor hex, seleciona uma harmonia como complementar, análoga, triádica ou monocromática, e ele calcula na hora as cores coordenadas, cada uma com um código hex pronto para copiar. Tudo roda direto no navegador.
Como usar
- 1Defina sua cor base. Clique no seletor de cor para escolher visualmente, digite um código hex como #6366f1, ou clique em Aleatório para partir de outro ponto.
- 2Escolha uma harmonia. Alterne entre complementar, complementar dividida, análoga, triádica, tetrádica, monocromática, sombras e tons. A paleta recalcula na hora.
- 3Copie as cores. Clique em qualquer amostra para copiar aquele código hex, ou use o botão Copiar para levar a paleta inteira como variáveis CSS.
Para quem é
- Web designers que estão começando um site a partir de uma única cor de marca: geram companheiras análogas ou complementares divididas para fundos, botões e detalhes.
- Desenvolvedores front-end que precisam de um ponto de partida de design tokens: copiam a paleta como variáveis CSS e colam direto na folha de estilos.
- Profissionais de marketing e apresentações que combinam gráficos, artes para redes sociais ou slides com a cor de uma logo sem usar um programa de design.
- Ilustradores e amadores explorando sombras e tons de um mesmo matiz para dar profundidade, luzes e sombras em uma peça.
Perguntas frequentes
Esse gerador de paleta de cores é grátis?
Sim, 100% grátis, sem cadastro, sem marca d'água e sem limites. Gere e copie quantas paletas quiser, para projetos pessoais ou comerciais.
Minhas cores são enviadas para algum servidor?
Não. A paleta é calculada inteiramente no seu navegador com JavaScript simples. As cores da sua marca, entradas e cliques nunca são enviados para um servidor.
O que é uma cor complementar?
A cor complementar fica exatamente do lado oposto da sua base no círculo cromático, uma rotação de 180 graus no matiz. Pares complementares como azul e laranja dão o contraste mais forte, o que os torna populares em botões de call-to-action sobre um fundo de marca.
Qual a diferença entre paletas análogas e triádicas?
Paletas análogas usam matizes vizinhos, dentro de uns 30 graus da base, então passam uma sensação calma e coesa. As triádicas usam três matizes espaçados em 120 graus, dando um esquema vibrante e equilibrado com mais contraste entre as cores.
O que são sombras e tons?
As sombras escurecem sua cor base reduzindo a luminosidade em direção ao preto; os tons clareiam em direção ao branco. Ambos mantêm o mesmo matiz e saturação, por isso são ideais para estados de hover, bordas e camadas de fundo de uma mesma cor de marca.
Quantas cores uma paleta de site deve ter?
Uma regra comum é 60-30-10: uma cor dominante para cerca de 60% da interface, uma secundária para 30%, e um destaque para 10%. Comece com uma harmonia de 3 a 5 cores aqui e depois adicione sombras e tons de cada uma para estados e superfícies.
Por que a paleta quase não muda com cinza ou preto?
Cinza, preto e branco têm saturação zero, então não há matiz para as rotações de harmonia agirem: girar nada devolve o mesmo neutro. Monte uma escala de neutros usando os modos de luminosidade: tons para preto ou cinzas escuros, sombras para branco ou cinzas claros, e monocromático para cinzas médios.