Dicas de Design de Paleta de Cores: Crie Combinações Harmoniosas

Uma paleta de cores bem escolhida eleva um design de amador a profissional. A teoria das cores fornece o framework, mas aplicá-la efetivamente requer compreender tanto a ciência quanto a psicologia por trás das escolhas de cores. Este guia cobre os princípios e técnicas práticas para construir paletas que funcionam.

A Roda Cromática e Relações

Todas as regras de harmonia de cores são baseadas em posições ao redor da roda cromática — um arranjo circular de matizes onde cores adjacentes se misturam suavemente e cores opostas criam contraste.

Cores Complementares

Cores diretamente opostas na roda. Criam contraste máximo e tensão visual.

• Exemplo: Azul (#2563EB) e Laranja (#EA580C)
• Use para: Botões de call-to-action, elementos de destaque, ênfase
• Atenção: Usar cores complementares em saturação total lado a lado pode causar vibração visual. Atenue uma delas.

Cores Análogas

Três a cinco cores adjacentes na roda. Criam designs calmos e harmoniosos.

• Exemplo: Azul (#2563EB), Azul-violeta (#7C3AED), Violeta (#9333EA)
• Use para: Fundos, grandes superfícies, branding coeso
• Dica: Escolha uma cor dominante, uma de suporte e uma de destaque

Cores Triádicas

Três cores igualmente espaçadas na roda (120° de distância). Vibrantes e equilibradas.

• Exemplo: Vermelho (#DC2626), Amarelo (#CA8A04), Azul (#2563EB)
• Use para: Designs divertidos, produtos infantis, categorias de visualização de dados

Complementar Dividida

Uma cor base mais as duas cores adjacentes ao seu complemento. Menos tensão que complementar pura.

• Exemplo: Azul (#2563EB), Vermelho-Laranja (#EA580C), Amarelo-Laranja (#CA8A04)
• Use para: Designs que precisam de contraste sem a intensidade de esquemas complementares

Gere esses esquemas automaticamente com nosso Gerador de Paleta de Cores.

A Regra 60-30-10

A proporção mais confiável para aplicar cores em qualquer design:

• 60%: Cor primária/dominante (fundos, grandes superfícies)
• 30%: Cor secundária (cards, painéis, elementos de suporte)
• 10%: Cor de destaque (botões, destaques, links)

:root {
  --primary: #F8FAFC;     /* 60% - Fundo claro */
  --secondary: #1E293B;   /* 30% - Superfícies escuras */
  --accent: #3B82F6;      /* 10% - Elementos interativos */
}

Essa proporção espelha como designers de interiores trabalham — e funciona pelas mesmas razões psicológicas. A cor dominante estabelece o clima, a secundária fornece estrutura, e o destaque atrai a atenção.

Construindo uma Paleta do Zero

Passo 1: Comece com a Marca ou Clima

Escolha uma única cor base que represente a marca ou clima:

• Azul: Confiança, profissionalismo, tecnologia
• Verde: Crescimento, saúde, natureza
• Roxo: Luxo, criatividade, sabedoria
• Vermelho: Energia, urgência, paixão
• Laranja: Calor, entusiasmo, acessibilidade

Passo 2: Gere Variações

Crie 9-10 tons da sua cor base usando manipulação HSL. Mantenha a matiz constante, varie saturação e luminosidade:

--blue-50:  hsl(217, 91%, 97%);
--blue-100: hsl(217, 91%, 93%);
--blue-200: hsl(217, 91%, 85%);
--blue-300: hsl(217, 91%, 75%);
--blue-400: hsl(217, 91%, 65%);
--blue-500: hsl(217, 91%, 60%);  /* Base */
--blue-600: hsl(217, 91%, 50%);
--blue-700: hsl(217, 91%, 40%);
--blue-800: hsl(217, 91%, 30%);
--blue-900: hsl(217, 91%, 20%);

Para entender HSL e outros formatos de cor, veja nosso guia de formatos de cor.

Passo 3: Adicione Cores Neutras

Toda paleta precisa de cinzas. Crie uma escala de cinza quente ou fria que complemente sua cor base:

/* Cinzas frias (combinam com base azul) */
--gray-50:  hsl(210, 20%, 98%);
--gray-100: hsl(210, 16%, 93%);
--gray-500: hsl(210, 10%, 53%);
--gray-900: hsl(210, 24%, 10%);

Passo 4: Adicione Cores Semânticas

Cores de status para estados de sucesso, alerta, erro e informação:

--success: hsl(142, 76%, 36%);  /* Verde */
--warning: hsl(38, 92%, 50%);   /* Âmbar */
--error:   hsl(0, 84%, 60%);    /* Vermelho */
--info:    hsl(199, 89%, 48%);  /* Ciano */

Requisitos de Acessibilidade

Razões de Contraste (WCAG 2.1)

Daltonismo

8% dos homens têm alguma forma de deficiência na visão de cores. Nunca use cor sozinha para transmitir informação:

• Adicione ícones ou padrões junto com indicadores de cor
• Use contraste de luminância suficiente (funciona mesmo em tons de cinza)
• Teste com simuladores de daltonismo

Estratégia de Paleta para Modo Escuro

Não inverta simplesmente sua paleta clara. O modo escuro requer suas próprias considerações:

1. Fundo: Use cinza escuro (#111827), não preto puro (#000000). Preto puro cria contraste muito duro.
2. Texto: Use branco suave (#F9FAFB), não branco puro (#FFFFFF), para reduzir cansaço visual.
3. Cores de destaque: Aumente a luminosidade em 10-15% para visibilidade contra fundos escuros.
4. Sombras: Use sombras mais claras ou brilhos sutis em vez de sombras escuras.

/* Modo claro */
--bg: hsl(0, 0%, 100%);
--text: hsl(0, 0%, 10%);
--accent: hsl(217, 91%, 60%);

/* Modo escuro */
--bg: hsl(220, 20%, 10%);
--text: hsl(0, 0%, 95%);
--accent: hsl(217, 91%, 70%);  /* Mais claro no modo escuro */

Ferramentas para Criação de Paleta

• Nosso Gerador de Paleta de Cores cria paletas harmoniosas a partir de qualquer cor base
• Nosso Conversor de Cores traduz entre HEX, RGB e HSL
• Nosso Gerador de Gradientes cria transições suaves entre as cores da paleta

FAQ

Quantas cores uma paleta de design deve ter?

Um sistema de design completo tipicamente inclui: 1 cor primária (com 9-10 tons), 1-2 cores de destaque, uma escala de cinza neutro (9-10 tons) e 4 cores semânticas (sucesso, alerta, erro, informação). Isso totaliza cerca de 40-50 valores individuais de cor, mas todos são derivados de apenas 3-4 matizes base.

Devo projetar no modo claro ou escuro primeiro?

Projete no modo claro primeiro. É mais fácil estabelecer legibilidade e razões de contraste com texto escuro em fundos claros. Depois derive sua paleta de modo escuro ajustando valores de luminosidade. A maioria dos problemas de acessibilidade de cores é mais fácil de identificar e corrigir no modo claro.

Recursos Relacionados

• Gerador de Paleta de Cores — Gere paletas a partir de qualquer cor base
• Formatos de Cor Explicados — Entenda HEX, RGB e HSL
• Guia de Gradientes CSS — Crie gradientes a partir das cores da sua paleta