Paleta Complementar
Gere a cor complementar (oposta na roda de cores) a partir de uma cor base em hex. Crie combinações de alto contraste para design, sites e identidade visual.
Complementar
—
Paletas complementares: opostos que prendem o olhar
Uma paleta complementar combina duas matizes que ficam a 180° uma da outra na roda de cores. Em HSL a fórmula cabe numa linha: H2 = (H1 + 180) mod 360. O resultado entrega o maior contraste possível para duas cores — e é exatamente por isso que o nosso córtex visual trava nele instantaneamente. O fisiologista Michel-Eugène Chevreul descreveu o efeito em 1839 como contraste simultâneo: ponha vermelho ao lado de verde e cada cor parece mais intensa do que pareceria sozinha.
Pares complementares clássicos
- Vermelho & Verde — Natal, sinalização "pare / siga", estados de erro vs. sucesso.
- Azul & Laranja — o famoso teal & orange da colorização hollywoodiana (pele caucasiana fica no campo laranja; fundo teal faz o rosto saltar). Visto em Avatar, Mad Max: Estrada da Fúria e quase todo pôster da Marvel.
- Amarelo & Roxo — vibe real, teatral, Lakers, Cadbury.
Quando complementar vence
Use em CTAs (botão com cor oposta ao fundo da página), identidade de times esportivos (energia, rivalidade) e comunicação de estado em UI (vermelho para perigo / verde para sucesso). A variação split-complementary — a matiz base mais as duas vizinhas da oposta — mantém a energia com um pouco menos de tensão.
Acessibilidade e a armadilha do daltonismo
Pares complementares normalmente passam fácil na razão de contraste da WCAG 2.1, mas dois complementares muito saturados juntos podem vibrar de forma desagradável (evite #ff0000 sobre #00ff00). A solução: deixar um saturado e o outro dessaturado. Armadilha maior — a deuteranopia (vermelho/verde) afeta cerca de 5% dos homens; nunca dependa só de vermelho contra verde para comunicar estado. Adicione forma, ícone ou rótulo. Azul/laranja é o par complementar mais seguro para todos os tipos de daltonismo.
Regra de composição: 70/30, não 50/50
Dividir 50/50 entre dois complementares gera tensão visual — nenhuma cor vence. Designers usam proporção próxima de 70/30: uma cor domina a superfície, a outra aparece só como acento (CTA, link, alerta). Exemplos: McDonald's vermelho+amarelo, FedEx roxo+laranja, IKEA azul+amarelo — em todos os casos uma cor ocupa 70%+ da área.
FAQ
Funciona em camisa de time? Sim — times adoram complementar. Contraste máximo à distância é exatamente o que se quer em campo.
Imprime bem? Sim. Complementares bem saturados convertem limpo para CMYK e ficam vivos em couché.
É seguro para daltônicos? Pares vermelho/verde falham para ~5% dos homens. Use azul/laranja como complementar seguro, ou sempre adicione pista não-cromática (forma, ícone, rótulo).
Diferença entre complementar e split-complementary? Complementar são duas matizes a 180°. Split-complementary é uma matiz mais as duas vizinhas da sua oposta (150° e 210° à frente), suavizando a tensão sem perder o contraste.
Ferramentas Relacionadas
Gerador de Esquemas de Cores
Gere paletas harmônicas a partir de uma cor base: complementares, análogas, triádicas, tetrádicas e split-complementares. Copie os códigos HEX com um clique.
Paleta Tetrádica
Gere uma paleta tetrádica (quatro cores em retângulo na roda de cores) a partir de uma cor base. Esquema rico e equilibrado para design, sites e branding.
Paleta Triádica
Gere uma paleta triádica (três cores espaçadas igualmente na roda de cores) a partir de uma cor base. Combinações vibrantes e equilibradas para design e branding.