Guia de paletas e combinações de cores: da teoria das cores à combinação profissional de UI na prática

Ferramentas de desenvolvimento

Fundamentos da teoria das cores

Modelo de cor HSL

H (Hue) Matiz: 0-360°, ângulo no círculo cromático
S (Saturation) Saturação: 0-100%, cinza → cor pura
L (Lightness) Luminosidade: 0-100%, preto → branco
Valor de matiz Cor
0° / 360° Vermelho
60° Amarelo
120° Verde
180° Ciano
240° Azul
300° Magenta

Círculo cromático

         0° Vermelho
    300°       60°
   Magenta     Amarelo
  240°         120°
    Azul       Verde
        180° Ciano

Cinco esquemas clássicos de combinação de cores

1. Combinação monocromática (Monochromatic)

Mesmo matiz, diferente saturação e luminosidade.

:root {
  --primary-50: hsl(220, 100%, 97%);   /* Azul extremamente claro */
  --primary-100: hsl(220, 100%, 94%);
  --primary-200: hsl(220, 100%, 88%);
  --primary-300: hsl(220, 100%, 78%);
  --primary-400: hsl(220, 100%, 68%);
  --primary-500: hsl(220, 100%, 58%);  /* Azul base */
  --primary-600: hsl(220, 100%, 48%);
  --primary-700: hsl(220, 100%, 38%);
  --primary-800: hsl(220, 100%, 28%);
  --primary-900: hsl(220, 100%, 18%);  /* Azul extremamente escuro */
}

Aplicação: Simples, profissional, forte identidade de marca

2. Combinação análoga (Analogous)

Cores adjacentes a 30° no círculo cromático.

:root {
  --analogous-1: hsl(200, 80%, 50%);  /* Azul */
  --analogous-2: hsl(220, 80%, 50%);  /* Azul-violeta */
  --analogous-3: hsl(240, 80%, 50%);  /* Violeta */
}

Aplicação: Harmonioso, natural, acolhedor

3. Combinação complementar (Complementary)

Cores opostas a 180° no círculo cromático.

:root {
  --primary: hsl(220, 80%, 55%);    /* Azul */
  --complement: hsl(40, 80%, 55%);  /* Laranja */
}

Aplicação: Alto contraste, chamativo, botões CTA

4. Combinação triádica (Triadic)

Três cores equidistantes a 120° no círculo cromático.

:root {
  --triadic-1: hsl(0, 70%, 55%);    /* Vermelho */
  --triadic-2: hsl(120, 70%, 55%);  /* Verde */
  --triadic-3: hsl(240, 70%, 55%);  /* Azul */
}

Aplicação: Vivo, colorido, produtos infantis

5. Combinação complementar dividida (Split-Complementary)

30° de cada lado da cor complementar.

:root {
  --primary: hsl(220, 80%, 55%);     /* Azul */
  --split-1: hsl(10, 80%, 55%);      /* Vermelho-laranja */
  --split-2: hsl(50, 80%, 55%);      /* Amarelo-laranja */
}

Aplicação: Rico mas não caótico, mais suave que a complementar

Padrões de contraste WCAG

Cálculo do contraste

Contraste = (L1 + 0,05) / (L2 + 0,05)

L1 = Luminância relativa da cor mais clara
L2 = Luminância relativa da cor mais escura

Cálculo da luminância relativa:
L = 0,2126 × R + 0,7152 × G + 0,0722 × B
(R/G/B precisam primeiro de linearização sRGB)

Padrão WCAG 2.1

Nível Texto do corpo Texto grande Componentes UI
AA 4,5:1 3:1 3:1
AAA 7:1 4,5:1 -

Texto grande: ≥18pt (24px) ou ≥14pt negrito

Verificar contraste com JavaScript

function getContrastRatio(color1: string, color2: string): number {
  const l1 = getRelativeLuminance(color1);
  const l2 = getRelativeLuminance(color2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

function getRelativeLuminance(hex: string): number {
  const rgb = hexToRgb(hex);
  const [r, g, b] = [rgb.r / 255, rgb.g / 255, rgb.b / 255]
    .map(c => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function meetsWcagAA(fg: string, bg: string, isLargeText = false): boolean {
  const ratio = getContrastRatio(fg, bg);
  return isLargeText ? ratio >= 3 : ratio >= 4.5;
}

Geração de paletas profissionais

Escalas de cores estilo Tailwind CSS

function generatePalette(baseHue: number, baseSat: number) {
  const lightnesses = [97, 94, 88, 78, 68, 58, 48, 38, 28, 18];
  return lightnesses.map((l, i) => ({
    name: `${(i) * 100}`,
    value: `hsl(${baseHue}, ${baseSat}%, ${l}%)`,
  }));
}

// Gerar paleta azul
const bluePalette = generatePalette(220, 80);
// 50: hsl(220, 80%, 97%)
// 100: hsl(220, 80%, 94%)
// ...
// 900: hsl(220, 80%, 18%)

Espaço de cor OKLCH (mais uniforme)

/* OKLCH é perceptualmente mais uniforme que HSL */
:root {
  --blue-50: oklch(97% 0.01 250);
  --blue-500: oklch(62% 0.19 250);
  --blue-900: oklch(30% 0.12 250);
}
Espaço de cor Uniformidade perceptual Suporte de navegadores
HSL ❌ Não uniforme Todos
OKLCH ✅ Uniforme Chrome 111+, Safari 15.4+
OKLAB ✅ Uniforme Chrome 111+, Safari 15.4+

Combinação de cores no modo escuro

/* Modo claro */
:root {
  --bg: #ffffff;
  --surface: #f5f5f5;
  --text: #1f2937;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
}

/* Modo escuro: não simplesmente inverter, mas reduzir o contraste */
[data-theme="dark"] {
  --bg: #111827;
  --surface: #1f2937;
  --text: #f9fafb;
  --text-secondary: #9ca3af;
  --border: #374151;
}

Princípios de combinação no modo escuro

  1. Não usar preto puro #000: Usar cinzas escuros como #111827
  2. Reduzir a saturação da cor principal: Alta saturação no modo escuro é ofuscante
  3. Manter contraste ≥ 4,5:1: Padrão WCAG AA
  4. Substituir sombras por camadas de fundo mais escuras: Sombras não são visíveis no modo escuro

Referência de paletas clássicas

Tecnologia/SaaS

Cor principal: #3b82f6 (Azul 500)
Cor secundária: #8b5cf6 (Violeta 500)
Destaque: #06b6d4 (Ciano 500)
Fundo: #f8fafc
Texto: #0f172a

E-commerce/Consumo

Cor principal: #f97316 (Laranja 500)
Cor secundária: #ef4444 (Vermelho 500)
Destaque: #22c55e (Verde 500)
Fundo: #ffffff
Texto: #1f2937

Finanças/Profissional

Cor principal: #1e40af (Azul 800)
Cor secundária: #059669 (Verde 600)
Destaque: #d97706 (Âmbar 600)
Fundo: #f9fafb
Texto: #111827

Geração de combinações com ToolsKu

  1. Abra a ferramenta de conversão de cor ou o gerador de gradientes
  2. Selecione a cor base
  3. Gere automaticamente a escala de cores (50-900)
  4. Verifique se o contraste atende ao WCAG AA
  5. Visualize o efeito no modo escuro
  6. Copie o código de variáveis CSS

Perguntas frequentes

Por que minha combinação de cores parece "suja"?

HSL tem uma percepção de saturação inconsistente em luminosidades altas/baixas. Use o espaço de cor OKLCH para gerar escalas de cores mais limpas.

As cores são muito chamativas no modo escuro?

Reduza a saturação em 20-30%, aumente a luminosidade em 5-10%:

/* Modo claro */
--primary: hsl(220, 80%, 55%);

/* Modo escuro: reduzir saturação */
--primary: hsl(220, 60%, 65%);

Como garantir que seja amigável para daltônicos?

  • Não confiar apenas na cor para transmitir informações (adicionar ícones/texto)
  • A combinação vermelho-verde não é amigável para daltônicos, usar azul-laranja como alternativa
  • Testar com o simulador de daltonismo

Resumo

Uma boa combinação de cores vem da teoria das cores + padrões de contraste + testes práticos. Dominar os cinco esquemas clássicos de combinação, os padrões de contraste WCAG e o espaço de cor OKLCH permitirá gerar paletas de nível profissional. Lembre-se: combinação de cores não é arte, é engenharia — há padrões a seguir, ferramentas a medir.

#调色板#颜色搭配#色彩理论#UI设计#教程