Gerador de Paletas de Cores

Escolha o esquema certo

Estrutura prática de paleta

Uma harmonia gerada é um ponto de partida, não um sistema de design completo. Para uma UI em produção, nomeie cores por função, não por aparência: primary, secondary, accent, surface, border, text, success, warning e error. Acrescente cinzas neutros separadamente, porque neutros costumam exigir controle mais fino do que um gerador baseado em matiz oferece.

Use as cores HEX geradas diretamente em um protótipo e mantenha apenas as que funcionarem em telas reais, fundos claros e escuros, além de estados hover ou desativados.

Exportação em variáveis CSS

A etapa de exportação usa propriedades personalizadas simples:

:root {
  --palette-1: #6366F1;
  --palette-2: #818CF8;
  --palette-3: #4F46E5;
}

Renomeie essas variáveis com os nomes do seu próprio sistema ao colá-las no CSS, nos tokens de tema do Tailwind ou em um arquivo de design tokens.

HEX, RGB e HSL

A entrada e a saída visível usam HEX porque é o formato mais rápido para copiar entre CSS, ferramentas de design e comentários de tarefas. Internamente, a cor base é convertida para HSL, o matiz ou a luminosidade é ajustado e os resultados voltam para HEX. Se você precisar das mesmas cores em RGB ou HSL, converta os valores HEX gerados em um conversor de códigos de cor.

Contraste e acessibilidade

Esquemas de harmonia não garantem acessibilidade. Antes de usar uma combinação em texto, controles ou gráficos, confira com um verificador de contraste:

• Texto normal sobre o fundo: mínimo de 4,5:1 para WCAG AA.
• Texto grande: mínimo de 3:1.
• Partes importantes não textuais, como bordas de botões, ícones, anéis de foco e limites de gráficos: mínimo de 3:1 contra cores adjacentes.

Também não dependa apenas do matiz. Duas cores podem parecer diferentes em uma amostra e ainda falhar em texto pequeno, ícones finos ou etiquetas de status.

Dicas

• Comece com uma cor base com significado, como uma cor de marca, de produto ou de campanha já existente.
• Escolha uma cor dominante e trate as demais como apoio. Dar o mesmo peso a todas costuma deixar a interface carregada.
• Reduza a saturação em superfícies grandes, como fundos de app, painéis e seções hero.
• Teste novamente depois do tema aplicado. Uma paleta que funciona em fundo branco pode falhar no modo escuro ou em gráficos densos.