Gerador de Paleta de Cores Harmoniosas

Gerador de paleta de cores harmoniosas

Este gerador de paleta de cores cria combinações harmoniosas em um clique para sites, logotipos, apresentações, posts e projetos de design. Escolha uma regra de harmonia, um estilo e quantas cores quer, trave as que já gostou e continue gerando até achar a paleta certa. Depois é só copiar os códigos HEX ou exportar em CSS, Tailwind, JSON ou imagem.

Como criar uma paleta de cores

Toque em Gerar paleta (ou aperte a barra de espaço) para criar uma combinação nova.
Gostou de uma cor? Trave-a pelo cadeado: ela fica fixa nas próximas gerações enquanto as outras mudam.
Para partir da cor da sua marca, informe a cor base e toque em Usar. A paleta é montada em volta dela.
Ajuste a regra de harmonia, o estilo (pastel, vibrante, escuro, sóbrio ou variado) e o número de cores.
Toque em uma cor para copiar o HEX, use Copiar link para compartilhar a paleta e volte às anteriores pela seta ou pelo histórico.

Regras de harmonia: qual escolher

As regras se baseiam nas posições das cores no círculo cromático. O gerador trabalha no espaço de cor OKLCH, que mantém o brilho percebido mais uniforme entre os tons, por isso as combinações tendem a ficar equilibradas.

Regra	Como funciona	Efeito
Análoga	Cores vizinhas no círculo	Suave e natural, boa para fundos e ilustrações
Monocromática	Variações claras e escuras de um mesmo tom	Elegante e coesa, ótima para interfaces
Complementar	Cores opostas no círculo	Alto contraste, chama atenção para botões e destaques
Complementar dividida	Uma cor e as duas vizinhas da sua oposta	Contraste com menos tensão que a complementar
Tríade	Três cores igualmente espaçadas	Vibrante e equilibrada
Tetrádica	Dois pares de complementares	Rica e variada; pede uma cor dominante

Como usar a paleta no seu projeto

Uma regra prática é a proporção 60-30-10: 60% da área com a cor dominante (geralmente neutra ou clara), 30% com a secundária e 10% com a cor de destaque, reservada para botões e chamadas. Antes de publicar, confira se texto e fundo têm contraste suficiente no verificador de contraste WCAG.

CSS: variáveis prontas para colar no :root do site.
Tailwind: bloco para theme.extend.colors do tailwind.config.js.
JSON: a lista de cores para usar em código ou em plugins.
Imagem: PNG ou SVG com os códigos, para apresentar ao cliente ou guardar como referência.

Para converter as cores entre HEX, RGB, HSL e CMYK, use o conversor de cores. Se você já tem uma foto ou um logotipo e quer as cores dele, o extrator de cores de imagem monta a paleta a partir do arquivo, e o gerador de gradiente CSS transforma duas ou mais cores em degradê.

Perguntas frequentes

Como gerar uma paleta de cores?

Toque em Gerar paleta ou aperte a barra de espaço. Trave as cores que quer manter e gere de novo até gostar do resultado. Depois copie os códigos HEX ou exporte em CSS, Tailwind, JSON, PNG ou SVG.

Como criar uma paleta a partir da cor da minha marca?

Digite a cor no campo Cor base e toque em Usar. O gerador mantém essa cor e cria as outras seguindo a regra de harmonia escolhida.

Qual regra de harmonia escolher?

Análoga e monocromática dão resultados suaves e coesos; complementar e complementar dividida criam contraste para destacar botões e chamadas; tríade e tetrádica são mais vibrantes e pedem uma cor dominante.

Quantas cores uma paleta deve ter?

Para sites e marcas, de três a cinco cores costumam bastar: uma dominante, uma ou duas secundárias e uma de destaque, além de tons neutros para textos e fundos.

Como compartilhar a paleta com outra pessoa?

Toque em Copiar link. O endereço guarda as cores da paleta e abre a mesma combinação em qualquer aparelho.

As cores da paleta têm bom contraste para leitura?

O gerador cuida da harmonia, não do contraste. Para textos, confira cada par de cores no verificador de contraste WCAG antes de usar.