Teoria das Cores para Designers de UI: Paletas, Contraste e Emoção

A cor é o sinal visual mais imediato em qualquer design. Antes mesmo de o usuário ler uma palavra, a cor já comunicou humor, hierarquia e identidade de marca. Mesmo assim, muitos desenvolvedores e designers escolhem cores por intuição — e acabam com paletas que parecem erradas, reprovam verificações de acessibilidade ou conflitam entre os modos claro e escuro. Compreender a teoria das cores oferece uma base sólida e fundamentada para cada decisão cromática.

Os fundamentos do modelo de cores

Matiz, Saturação e Luminosidade (HSL)

HSL é o modelo de cores mais intuitivo para trabalhos de design:

• Matiz — A própria cor: 0° = vermelho, 60° = amarelo, 120° = verde, 180° = ciano, 240° = azul, 300° = magenta
• Saturação — O quão vívida ou acinzentada: 0% = cinza, 100% = totalmente saturada
• Luminosidade — O quão clara ou escura: 0% = preto, 50% = cor pura, 100% = branco

/* O mesmo matiz com diferentes saturações e luminosidades */
hsl(220, 90%, 50%)   /* Azul vívido */
hsl(220, 30%, 50%)   /* Azul aço suave */
hsl(220, 90%, 90%)   /* Tom azul muito claro */
hsl(220, 90%, 20%)   /* Tom azul muito escuro */

HSL é poderoso porque você pode ajustar uma dimensão por vez. Para deixar uma cor mais clara, aumente L. Para deixá-la menos vibrante, diminua S.

RGB e HEX

RGB define cores pelos valores dos canais vermelho, verde e azul (0–255). HEX é o mesmo em hexadecimal:

rgb(59, 130, 246)  ≡  #3B82F6

HEX é o padrão para CSS e ferramentas de design. Converta entre formatos com o nosso Conversor de Cores.

Harmonias de cores

Harmonias de cores são combinações visualmente agradáveis devido às suas relações geométricas no círculo cromático.

Monocromática

Um único matiz com variações de saturação e luminosidade. Limpa, coesa e sofisticada.

Base:    hsl(220, 80%, 50%)
Clara:   hsl(220, 70%, 85%)
Escura:  hsl(220, 60%, 25%)
Suave:   hsl(220, 20%, 60%)

Excelente para produtos minimalistas, temas escuros e interfaces com forte identidade de marca.

Complementar

Dois matizes diretamente opostos no círculo cromático (180° de distância). Alto contraste e vibrante — use a segunda cor com moderação como destaque.

Primária: hsl(220, 80%, 50%)   /* Azul */
Destaque: hsl(40,  90%, 55%)   /* Laranja/âmbar */

Usar ambas igualmente cria tensão visual. Deixe uma dominar.

Análoga

Três ou mais matizes adjacentes (30–60° de distância). Transmite naturalidade e harmonia, como os gradientes encontrados nos pores do sol.

hsl(200, 70%, 50%)   /* Azul-ciano */
hsl(220, 80%, 50%)   /* Azul */
hsl(250, 70%, 55%)   /* Azul-roxo */

Ideal para fundos e camadas sutis.

Triádica

Três matizes igualmente espaçados (120° de distância). Vibrante e equilibrada — requer gerenciamento cuidadoso para evitar o caos visual.

hsl(0,   80%, 55%)   /* Vermelho */
hsl(120, 70%, 45%)   /* Verde */
hsl(240, 75%, 55%)   /* Azul */

Funciona bem em infográficos, gráficos e visualização de dados.

Construindo uma paleta de cores para um sistema de design

Um sistema de cores robusto possui diversas camadas:

1. Cores de marca (primária + secundária)

As cores que representam a identidade do seu produto. Geralmente 1–2 matizes.

2. Cores semânticas

Cores com significados específicos em toda a sua UI:

Token	Finalidade
success	Verde — estados positivos, confirmações
warning	Amarelo/âmbar — cautela, estados degradados
error	Vermelho — falhas, ações destrutivas
info	Azul — informações neutras, dicas

3. Escala de neutros

Tons de cinza para textos, fundos, bordas e divisores. Uma escala completa geralmente vai de 50 (quase branco) a 950 (quase preto):

--gray-50:  #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1e293b;
--gray-900: #0f172a;

4. Escalas de cores completas

Para cada cor de marca, gere uma escala de 10 etapas seguindo o padrão da escala de neutros. Ferramentas como Radix Colors e a paleta de cores do Tailwind são referências bem calibradas.

Contraste de cores e acessibilidade

O WCAG 2.2 exige as seguintes proporções mínimas de contraste (texto vs. fundo):

Tipo de texto	Mínimo (AA)	Aprimorado (AAA)
Texto normal (< 18pt)	4,5:1	7:1
Texto grande (≥ 18pt ou 14pt negrito)	3:1	4,5:1
Componentes de UI, ícones	3:1	—

Fórmula da proporção de contraste:

ratio = (L1 + 0.05) / (L2 + 0.05)

Onde L1 é a luminância relativa da cor mais clara e L2 a da mais escura.

Regras práticas:

• Texto branco funciona em cores com luminosidade abaixo de ~45–50% (depende da saturação)
• Texto escuro funciona em cores com luminosidade acima de ~50–55%
• A mesma cor pode reprovar no contraste sobre branco, mas ser aprovada sobre um fundo cinza claro

Nunca dependa apenas da cor — 1 em cada 12 pessoas tem algum tipo de deficiência na percepção de cores. Sempre combine cor com forma, ícone ou texto.

Cores no modo escuro

O modo escuro não é simplesmente inverter sua paleta clara. Princípios fundamentais:

Evite fundos preto puro

#000000 cria um contraste agressivo com o texto e parece pesado. Use tons de cinza escuro:

/* Fundo no modo claro */
background: #ffffff;

/* Fundo no modo escuro */
background: #0f172a;  /* Ou #111827, #1a1a2e */

Reduza a saturação em superfícies escuras

Cores altamente saturadas sobre fundos escuros podem parecer excessivas e causar fadiga visual. Reduza levemente a saturação das cores de marca no modo escuro:

/* Primária no modo claro */
--primary: hsl(220, 90%, 50%);

/* Primária no modo escuro — mesmo matiz, menos saturação, mais luminosidade */
--primary: hsl(220, 70%, 65%);

Elevação através da luminosidade

No modo escuro, superfícies mais altas aparecem mais claras (como um elemento elevado que captura mais luz):

--surface-1: #1e293b;   /* Base */
--surface-2: #253044;   /* Cards */
--surface-3: #2d3a52;   /* Modais, dropdowns */

Psicologia das cores por matiz

Matiz	Associações	Usos típicos
Vermelho	Urgência, perigo, paixão, energia	CTAs, erros, alertas, promoções
Laranja	Calor, criatividade, entusiasmo	Destaques, alimentação, entretenimento
Amarelo	Otimismo, cautela, atenção	Avisos, destaques, produtos infantis
Verde	Crescimento, sucesso, natureza, calma	Estados de sucesso, finanças, saúde
Azul	Confiança, estabilidade, profissionalismo	Tecnologia, finanças, saúde, links padrão
Roxo	Luxo, criatividade, mistério	Planos premium, beleza, espiritual
Rosa	Leveza, romance, cuidado	Estilo de vida, saúde, beleza
Cinza	Neutralidade, equilíbrio, sofisticação	Estrutura da UI, texto secundário

Essas são generalizações — o contexto cultural e as normas do setor têm grande importância. O azul transmite "confiança" no setor financeiro, mas é comum no setor alimentício.

O fluxo de trabalho com cores na prática

1. Comece com uma escala de neutros (paleta de cinzas)
2. Escolha uma cor primária de marca com alto contraste tanto sobre fundos brancos quanto escuros
3. Defina as cores semânticas (sucesso, aviso, erro, informação)
4. Gere escalas completas para cada cor (50–950)
5. Verifique o contraste em cada combinação de texto e fundo
6. Teste nos modos claro e escuro
7. Verifique com ferramentas de simulação de daltonismo

Uma boa cor é invisível — os usuários a sentem antes de percebê-la. Um sistema de cores bem construído faz sua UI parecer profissional, confiável e acessível, sem que ninguém consiga explicar exatamente o porquê.