Adivinhar que cores combinam bem faz perder tempo de design. Este gerador aplica as harmonias clássicas do círculo cromático, as mesmas relações de matiz ensinadas na teoria da cor, pelo que cada paleta fica coordenada de forma matemática, e não a olho. Clica em qualquer amostra para copiar o respetivo código hex, ou copia a paleta inteira como variáveis CSS prontas a colar. É totalmente do lado do cliente: sem conta, sem envio de ficheiros, sem rastreio das cores da tua marca.
Gerador de Paleta de Cores Grátis
Funciona inteiramente no navegador - sem carregar nada, sem registo.
Harmonia
Variáveis CSS
O que é um gerador de paleta de cores?
Um gerador de paleta de cores cria um esquema de cores conjugadas a partir de uma cor base, usando a teoria do círculo cromático. Escolhes ou escreves uma cor hex, seleciona uma harmonia como complementar, análoga, triádica ou monocromática, e ele calcula de imediato as cores coordenadas, cada uma com um código hex pronto a copiar. Tudo corre diretamente no teu navegador.
Como utilizar
- 1Define a tua cor base. Clica no seletor de cor para escolher visualmente, escreve um código hex como #6366f1, ou carrega em Aleatório para partires de outro ponto.
- 2Escolhe uma harmonia. Alterna entre complementar, complementar dividida, análoga, triádica, tetrádica, monocromática, sombras e tons. A paleta recalcula-se de imediato.
- 3Copia as cores. Clica em qualquer amostra para copiar esse código hex, ou usa o botão Copiar para levares a paleta inteira como variáveis CSS.
Para quem é
- Web designers a começar um site a partir de uma única cor de marca: geram companheiras análogas ou complementares divididas para fundos, botões e detalhes.
- Programadores front-end que precisam de um ponto de partida de design tokens: copiam a paleta como variáveis CSS e colam-na diretamente numa folha de estilos.
- Profissionais de marketing e de apresentações que ajustam gráficos, imagens para redes sociais ou diapositivos à cor de um logótipo sem recorrer a um programa de design.
- Ilustradores e amadores a explorar sombras e tons de um mesmo matiz para criar profundidade, luzes e sombras numa peça.
Perguntas frequentes
Este gerador de paleta de cores é gratuito?
Sim, 100% gratuito, sem registo, sem marcas de água e sem limites. Gera e copia quantas paletas quiseres, para projetos pessoais ou comerciais.
As minhas cores são enviadas para algum servidor?
Não. A paleta é calculada inteiramente no teu navegador com JavaScript simples. As cores da tua marca, os dados introduzidos e os cliques nunca são enviados para um servidor.
O que é uma cor complementar?
A cor complementar fica exatamente do lado oposto da tua 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 muito usados em botões de apelo à ação sobre um fundo de marca.
Qual é a diferença entre paletas análogas e triádicas?
As paletas análogas usam matizes vizinhos, dentro de cerca de 30 graus da base, pelo que transmitem uma sensação calma e coesa. As triádicas usam três matizes espaçados 120 graus entre si, criando um esquema vibrante e equilibrado com mais contraste entre as cores.
O que são sombras e tons?
As sombras escurecem a tua cor base reduzindo a luminosidade em direção ao preto; os tons clareiam-na em direção ao branco. Ambos mantêm o mesmo matiz e saturação, por isso são ideais para estados de hover, contornos e camadas de fundo de uma mesma cor de marca.
Quantas cores deve ter a paleta de um site?
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%. Começa com uma harmonia de 3 a 5 cores aqui e depois acrescenta sombras e tons de cada uma para estados e superfícies.
Porque é que a paleta quase não muda com cinzento ou preto?
O cinzento, o preto e o branco têm saturação zero, pelo que não há matiz sobre o qual as rotações de harmonia possam atuar: rodar o nada devolve o mesmo neutro. Cria uma escala de neutros usando os modos de luminosidade: tons para preto ou cinzentos escuros, sombras para branco ou cinzentos claros, e monocromático para cinzentos médios.