Gerador de Paleta de Cores — Crie Paletas Harmoniosas Instantaneamente
Escolha qualquer cor base e gere uma paleta matematicamente harmoniosa com um clique. Selecione entre cinco regras de harmonia de cores — Análoga, Monocromática, Complementar, Triádica ou Tetrádica — ajuste com os sliders de saturação e luminância, depois exporte como CSS custom properties ou JSON. Tudo roda no seu browser, sem upload necessário.
Seja para montar um design system, escolher cores de marca, ou explorar combinações de UI, esta ferramenta transforma um único código hex em uma paleta pronta para produção em segundos. Brasileiros buscam tanto "gerador de paleta de cores" quanto "color palette generator" — você encontrou o lugar certo para as duas variantes.
Como Gerar uma Paleta de Cores
- Escolha a cor base — clique no swatch colorido para abrir o seletor nativo, ou digite um código hex diretamente no campo (ex:
197FE6). - Escolha a regra de harmonia — selecione Análoga, Monocromática, Complementar, Triádica ou Tetrádica no painel lateral. A paleta atualiza instantaneamente.
- Refine com os sliders — use os sliders de Saturação e Luminância para ajustar o clima e o contraste de toda a paleta de uma só vez.
- Regenere para inspiração — clique em Regenerate para aleatorizar o matiz base mantendo a regra de harmonia e os ajustes atuais.
- Exporte — clique em qualquer swatch para copiar o HEX, ou use a barra de exportação para CSS variables, JSON ou baixar um card PNG.
Regras de Harmonia de Cores Explicadas
Análoga — usa matizes adjacentes na roda de cores (±30° e ±60° da base). Resulta em paletas coesas e naturais, como cores encontradas na natureza ou num pôr do sol. Ideal para fundos de UI, ilustração e identidades de marca orgânicas.
Monocromática — mantém o mesmo matiz e varia apenas a luminosidade em cinco passos (do quase branco ao quase preto). É a escolha mais segura para temas dark/light mode, design focado em acessibilidade e variações sutis sem conflito visual.
Complementar — combina sua cor base com a cor diretamente oposta (180°) na roda, mais tons de acento próximos. Cria combinações de alto contraste e energia. Comum em branding esportivo e design de call-to-action.
Triádica — divide a roda em três segmentos iguais de 120°. Produz paletas vibrantes e equilibradas, mais fáceis de usar do que as complementares. Frequente em produtos infantis, agências criativas e design editorial.
Tetrádica (Quadrada) — usa quatro matizes espaçados 90° um do outro, mais um acento. A harmonia mais rica desta ferramenta — oferece maior variedade de cores, mas exige atenção para manter uma cor dominante e as demais como suporte.
Casos de Uso
- Design Systems de UI: Gere uma paleta de 5 cores a partir da cor primária da sua marca. Exporte diretamente como CSS custom properties e use na sua biblioteca de componentes. O output CSS é compatível com Tailwind v4, CSS nativo e qualquer framework moderno.
- Identidade de Marca: Explore harmonias análogas e complementares a partir da cor principal do seu logo para encontrar opções de paleta secundária para materiais de marketing e assets digitais.
- Temas Dark Mode: Use a regra Monocromática com um valor baixo de Luminância para construir sistematicamente as camadas de surface, background e muted de um tema escuro.
- Prototipagem Rápida: Regenere até encontrar uma combinação interessante, depois salve copiando os HEX codes ou o bloco CSS. O histórico armazena suas últimas 10 gerações para você voltar quando quiser.
- Pipelines de Design Tokens: O export JSON inclui valores hex, RGB e HSL para cada cor com seu label semântico (ex:
PRIMARY BASE,ANALOGOUS L). Alimente diretamente no Style Dictionary ou sua etapa de build de tokens.
Perguntas Frequentes
O que é harmonia de cores e por que ela importa?
Harmonia de cores é o uso de relações matematicamente definidas entre matizes na roda de cores para criar paletas que pareçam equilibradas e intencionais. Paletas harmoniosas são mais fáceis de processar visualmente e parecem profissionais sem exigir intuição de designer. Esta ferramenta aplica regras geométricas comprovadas (adjacência análoga, oposição complementar, divisão triádica) para produzir pontos de partida que funcionam — e que você pode refinar ao seu gosto.
Qual é a diferença entre análoga e monocromática?
Paletas análogas variam o matiz em pequenos passos ao redor da cor base (cores vizinhas na roda), mantendo saturação e luminosidade constantes. Paletas monocromáticas mantêm o mesmo matiz e variam apenas a luminosidade — de tints claros a shades escuros. Análoga parece mais colorida e viva; monocromática parece mais unificada e minimalista.
Como funcionam os sliders de Saturação e Luminância?
Eles se aplicam globalmente a todas as cores geradas de uma vez. Saturação (0–100%) controla a intensidade da cor — 0% gera cinzas puros, 100% dá a versão mais vívida. Luminância (5–95%) controla o brilho — valores baixos produzem cores escuras e ricas; valores altos produzem pastéis claros e suaves. Os sliders permitem mover toda uma harmonia de "UI diurna vibrante" para "acessível em dark mode" sem alterar as relações harmônicas.
Posso salvar paletas que gostar?
Clique em Regenerate antes de fazer qualquer alteração — a paleta atual é automaticamente salva no Histórico (até 10 entradas). Abra o Histórico a qualquer momento para recarregar uma combinação anterior. Para armazenamento permanente, copie as CSS variables ou o export JSON e cole nos arquivos do seu projeto.
Quantas cores cada paleta contém?
Todos os tipos de harmonia geram exatamente 5 cores. Esta é uma escolha deliberada: a maioria dos design systems define 5 papéis semânticos para uma paleta (primary, secondary/accent, neutral, surface, variante dark/light), e 5 cores distintas é o ponto ideal entre variedade e coesão para a maioria dos trabalhos de UI.
Quais formatos posso exportar?
CSS Variables — um bloco :root {} com nomes de variáveis semânticos pronto para colar em qualquer projeto web. JSON — um array legível por máquina com valores hex, RGB e HSL mais o label semântico de cada cor. PNG — um card de swatches limpo com blocos de cor e labels hex, pronto para compartilhar no Figma, Slack ou num brief de marca.
Recursos
- MDN — CSS Custom Properties — Como usar as CSS variables geradas por esta ferramenta nos seus projetos web.
- Wikipedia — Harmonia de Cores — Visão geral da teoria das cores e as regras de harmonia geométrica que esta ferramenta implementa.
- DESIGN.md Specification — Padrão open source para arquivos de design system legíveis por máquina, compatível com Claude Code e outros assistentes de código com IA.
