Gerador de Paletas de Cores

Escolha o esquema certo

Uma paleta tem 5 cores por padrão e pode ter de 2 a 10. Quando ela tem mais cores do que o esquema tem matizes, as cores extras são versões mais claras e mais escuras desses matizes, e a ferramenta deixa de fora qualquer cor que ficaria igual a outra.

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

Você pode digitar a cor base em HEX (#3366FF ou o curto #36F), RGB (rgb(51 102 255)) ou HSL (hsl(225 100% 60%)), e cada cor da paleta mostra seus códigos HEX, RGB e HSL, prontos para copiar. Os esquemas de matiz giram o matiz da base pela roda de cores HSL. As etapas mais claras e mais escuras são distribuídas por igual na luminosidade OKLCH, que acompanha o quanto uma cor parece clara com mais fidelidade do que a luminosidade HSL.

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.