Gerador de Paleta de Cores
Gere paletas de cores harmoniosas a partir de qualquer cor base. Escolha harmonia Análoga, Complementar, Triádica ou Tetrádica — exporte como CSS variables...
Atualizado em maio de 2026
Base Color
Harmony Rule
Global Refinement
Assign Roles
Drag swatches → drop on a card · drag cards to swap · to pick any color
Primary
#197FE6
Secondary
#1461B8
Accent
#F59E0B
Background
#FFFFFF
Surface
#F5F7FA
Text
#111827
Build products
your users love
The fastest way to ship your next project with a polished design system and production-ready components.
Popular Palettes
Brand Palettes
Como gerar
Uma cor base, uma regra de harmonia
1. Escolha a cor base
Clique no swatch ou digite um código hex diretamente no campo.
2. Escolha a regra de harmonia
Análoga, Monocromática, Complementar, Triádica ou Tetrádica — a paleta atualiza na hora.
3. Refine e exporte
Ajuste com os sliders de Saturação e Luminância, depois exporte como CSS, JSON ou PNG.
O que esta ferramenta faz
Regras geométricas comprovadas, aplicadas automaticamente
5 cores por paleta, sempre
O ponto ideal entre variedade e coesão para a maioria dos design systems.
Sliders globais de saturação e luminância
Ajuste toda a harmonia de uma vez, sem alterar as relações entre matizes.
Regenerar mantendo a regra
Aleatoriza o matiz base preservando a harmonia e os ajustes atuais — com histórico de 10 gerações.
3 formatos de exportação
CSS custom properties, JSON com hex/RGB/HSL por cor, ou card PNG de swatches.
Atribuição de papéis com detecção inteligente
Arraste qualquer swatch para os cards Primary, Secondary, Accent, Background, Surface ou Text — presets de marca já chegam com papéis sugeridos pela luminosidade.
Biblioteca de paletas prontas
20 paletas para carregar com um clique: 10 temas populares de editor (Dracula, Nord, Catppuccin...) e 10 paletas de marcas reais (Spotify, Netflix, Google...).
As cinco regras de harmonia
Quando você vai usar isso
Os cenários mais comuns entre quem usa a ferramenta
Design systems de UI
Gere 5 cores a partir da cor primária da marca e exporte direto como CSS custom properties.
Identidade de marca
Explore harmonias análogas e complementares a partir da cor do logo.
Temas dark mode
Use Monocromática com luminância baixa para construir surface, background e muted.
Pipelines de design tokens
O export JSON inclui hex/RGB/HSL com label semântico, pronto para Style Dictionary.
Mockup rápido de site
O preview ao vivo mostra navbar, hero, cards de feature e footer usando os papéis atribuídos — veja o resultado antes de implementar de verdade.
Referência de paletas de marcas conhecidas
Carregue paletas como Spotify, Netflix ou Vercel como ponto de partida para comparar ou inspirar sua própria identidade visual.
Erros comuns
Confundir análoga com monocromática
Análoga varia o matiz em passos pequenos; monocromática mantém o matiz e varia só a luminosidade.
Usar Tetrádica sem hierarquia clara
A harmonia mais rica exige uma cor dominante — as outras três como suporte, ou o resultado fica poluído.
Esquecer de salvar antes de regenerar
O histórico guarda só as últimas 10 gerações — copie CSS/JSON para armazenamento permanente.
Sobrescrever uma role sem checar o contraste
O ícone de lápis no card de role permite escolher qualquer cor livremente, mas a detecção automática de contraste só vale para as cores sugeridas — uma sobrescrita manual pode quebrar a legibilidade sem aviso.
Achar que o export segue a ordem das swatches
CSS e JSON exportados usam as cores atribuídas nos cards de role (primary, secondary...), não a ordem da tira de swatches acima. Arrastou cores para papéis diferentes? O export reflete essa nova atribuição.
Usar uma paleta de marca sem revisar o preview
Paletas prontas como Dracula ou Spotify foram pensadas para o contexto original delas, não necessariamente para o seu layout. Abra o Site Preview antes de exportar para confirmar que texto e fundo continuam legíveis.
Por que usar 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 sem exigir intuição de designer.
Os sliders globais de saturação e luminância movem toda uma harmonia de "UI diurna vibrante" para "acessível em dark mode" sem quebrar as relações entre as cores.
Além da geração matemática, o fluxo é completo: atribua as 5 cores aos papéis reais de um design system (primary, secondary, accent, background, surface, text) por arrastar-e-soltar e veja o resultado aplicado a um preview de site inteiro antes de exportar qualquer coisa.
Perguntas frequentes
É o uso de relações matematicamente definidas entre matizes na roda de cores para criar paletas equilibradas. Paletas harmoniosas são mais fáceis de processar visualmente e parecem profissionais sem exigir intuição de designer.
Referências
Como usar as CSS variables geradas por esta ferramenta.
Visão geral da teoria das cores e as regras de harmonia geométrica.
Referência oficial do Google sobre nomear cores por papel (primary, secondary, surface) — a mesma lógica da atribuição de roles desta ferramenta.
Ferramentas Relacionadas
- Gerador de Paleta de Cores por Imagem Design Extraia paletas de cores de qualquer imagem — obtenha códigos HEX, RGB, HSL e exporte como CSS variables, Tailwind, JSON ou PNG. 100% no browser, sem upload.
- Gerador DESIGN.md Design Crie arquivos DESIGN.md prontos para IA para Google Stitch, Claude Code, Cursor e Copilot — defina cores, tipografia, espaçamento e componentes em formato...
- Seletor de Cor Design Seletor de cor grátis — escolha qualquer cor visualmente e obtenha instantaneamente os códigos HEX, RGB, HSL, HSV e CMYK. Gere sombras, tons, harmonias e...
- Verificador de Contraste de Cores Design Verificador de contraste de cores grátis — verifique conformidade WCAG 2.2 AA e AAA instantaneamente. Preview ao vivo, simulação de daltonismo e sugestões...
- Conversor de Cores Design Converta cores entre HEX, RGB, HSL e CMYK instantaneamente. Ferramenta gratuita com seletor de cores, verificador de contraste WCAG e gerador de paletas.
