Gerador de Paleta Split-Complementary

Paleta split-complementary: o contraste do complementar, sem a tensão

Uma paleta split-complementary é uma das harmonias clássicas da teoria das cores. Em vez das duas cores opostas do esquema complementar puro (180° de distância), ela usa uma cor base mais as duas cores imediatamente adjacentes ao complemento — tipicamente a base em H mais H + 150° e H + 210°. O resultado mantém o contraste vibrante do complementar, mas troca parte da tensão visual por variação e respiro.

A classificação vem do círculo cromático de Johannes Itten na Bauhaus, que formalizou análogo, complementar, triádico, tetrádico e split-complementary como relações canônicas. No Adobe Color, no Coolors e na maioria das ferramentas modernas de paleta você encontra "Split Complementary" como modo preset que faz exatamente essa rotação.

Por que designers escolhem essa harmonia

• Contraste rico, menos estresse — complementar puro (laranja + azul) pode "vibrar"; split-complementary suaviza essa vibração mantendo o impacto.
• Três acentos utilizáveis — diferente do complementar (que dá 2), você fica com uma base mais duas cores de apoio, ideal para papéis primário/secundário/terciário em UI.
• Amigável para iniciantes — é difícil deixar feio um esquema split-complementary, por isso professores de design recomendam para os primeiros projetos.
• Mais amigável a daltonismo — como os dois acentos não são o complemento exato de 180°, observadores protan/deuteran geralmente ainda conseguem distingui-los.

Implementação em HSL

A matemática é uma linha por matiz em HSL. Dada uma matiz base H (aqui usamos 220° — um azul forte), os dois splits ficam em (H + 150) mod 360 e (H + 210) mod 360:

:root {
  --base:    hsl(220, 70%, 50%);   /* azul */
  --split-1: hsl(10,  70%, 50%);   /* (220 + 150) mod 360 */
  --split-2: hsl(70,  70%, 50%);   /* (220 + 210) mod 360 */
}

O ângulo entre os dois splits é configurável — o padrão é 60° entre eles (30° de cada lado do complemento), mas muitas ferramentas deixam apertar ou abrir. Splits estreitos comportam-se como complementar monocromático; splits largos se aproximam de uma paleta triádica.

Aplicando a regra 60-30-10

Distribuição confiável vinda do design de interiores que se traduz perfeitamente para UI web: 60% da superfície usa a cor base (fundos, blocos grandes), 30% usa o primeiro split (superfícies secundárias, ilustração de apoio) e 10% usa o segundo split como acento de alto contraste para CTAs, links e alertas. A paleta split-complementary entrega exatamente três papéis, encaixando um-para-um nessa regra.

Onde você já viu isso

Pôsteres de cinema de Hollywood são saturados de paletas split-complementary — pele laranja-quente contra um teal dessaturado e um azul-marinho escuro é tão comum que virou meme ("teal and orange"). Muitas marcas tech adotam base + dois acentos em seus sistemas visuais justamente porque dá ao dashboard de data-viz três categorias que se distinguem nitidamente num mesmo gráfico.

Perguntas frequentes

Por que é melhor que o complementar puro? Menos tensão visual. Um complementar direto pode "vibrar" desconfortavelmente em saturação cheia; a versão split mantém o contraste mas soa mais harmoniosa.

Quantas cores gera? Sempre três: a base mais dois splits. Se precisar de tonalidades, derive variações claras e escuras de cada uma variando a luminosidade (L).

Serve para iniciantes? Sim — é uma das harmonias mais fáceis de balancear, bem mais perdoadora que triádicas ou tetrádicas.

O ângulo importa? Sim — 30° de cada lado do complemento é o ajuste canônico (um split "aberto" de 60°). Ângulos menores empurram o look para complementar; maiores, para triádico.