Gerador de paleta de cores

Gere paletas harmoniosas usando teoria das cores — complementar, triádico, análogo e muito mais

Partilhar:
Click any color swatch to copy its hex code
Copied!

Por que usar um gerador de paleta de cores?

Escolher cores que funcionam bem juntas requer conhecimento de teoria das cores — relações complementares, análogas, triádicas e complementares divididas. Fazer isso manualmente com uma roda de cores é lento. Nosso gerador usa matemática HSL para calcular automaticamente paletas harmoniosas a partir de qualquer cor base, permitindo que designers e desenvolvedores produzam esquemas profissionais em segundos.

🎨

6 modos de harmonia

Complementar, triádico, análogo, complementar dividido, tetrádico e matizes monocromáticos

👁️

Pré-visualização de amostras ao vivo

Clique em qualquer amostra para copiar instantaneamente seu código hexadecimal para a área de transferência

📋

Exportação de variáveis CSS

Exporte toda a paleta como propriedades CSS personalizadas prontas para colar na sua folha de estilos

Gerar uma paleta em 3 passos

1

Escolha uma cor base

Use o seletor de cores ou digite um código hexadecimal para definir sua cor inicial/de marca

2

Escolha o tipo de harmonia

Selecione complementar, triádico, análogo ou outra harmonia adequada ao seu design

3

Copie e use

Clique em uma amostra para copiar seu hexadecimal, ou use 'Copiar como variáveis CSS' para exportar toda a paleta

Casos de uso da paleta de cores

🌐

Web design

Construa um sistema de cores completo para o site a partir da cor primária da sua marca

🏢

Identidade de marca

Desenvolva uma paleta de cores de marca profissional com cores primária, secundária e de destaque

📱

Design UI/UX

Crie cores acessíveis e visualmente coerentes para botões, textos e fundos de aplicações

📊

Visualização de dados

Gere cores categóricas distintas para gráficos, tabelas e painéis de dados

Boas práticas de design de cores

✓ Verifique o contraste de cores (WCAG)

Certifique-se de que pares texto/fundo atendam à taxa de contraste WCAG AA (4,5:1 para texto normal) para acessibilidade.

✓ Limite sua paleta

Mantenha 3-5 cores: 1 primária, 1 secundária, 1-2 de destaque e neutras. Mais cores criam desordem visual.

✓ Considere a psicologia das cores

Azul = confiança/profissionalidade, Verde = crescimento/sucesso, Vermelho = urgência/energia, Amarelo = otimismo. Alinhe sua paleta com a mensagem da sua marca.

✓ Teste no modo escuro

Gere uma variante de modo escuro ajustando os valores de luminosidade. Preto puro (#000) e branco puro (#fff) raramente são ideais — use quase-preto e quase-branco.

❓ Perguntas frequentes

O que é um esquema de cores complementares?
Cores complementares ficam opostas umas às outras na roda de cores (ex. azul e laranja, vermelho e verde). Criam alto contraste e energia visual — ideais para botões de chamada para ação e destaques.
Quando usar um esquema de cores análogas?
Esquemas análogos usam 3 cores adjacentes na roda de cores. Criam designs harmoniosos e tranquilos com pouco contraste — perfeitos para fundos, degradês e designs de interface suaves.
O que é HSL comparado com RGB e Hex?
Os três representam a mesma cor em formatos diferentes. Hex (#6366f1) é usado em CSS. RGB (99, 102, 241) especifica canais vermelho/verde/azul. HSL (237°, 84%, 67%) usa matiz, saturação, luminosidade — muito mais intuitivo para gerar paletas harmoniosas.
Como criar uma paleta de cores para modo escuro?
Para o modo escuro, reduza significativamente a luminosidade das suas cores (ex. L:60% → L:30%) e troque os papéis de texto/fundo. Mantenha matiz e saturação similares mas ajuste a luminosidade para que as cores permaneçam legíveis em fundos escuros.