Cores complementares: quando e como usar

Cores complementares são duas cores que ficam em lados opostos da roda de cores. Colocadas lado a lado, elas se destacam muito uma da outra. Use esse par quando quiser um ponto de atenção claro, como um botão, um preço ou o título de um cartaz, e deixe uma das duas ocupar a maior parte do espaço.

Como achar o par de cada cor

O jeito mais simples é olhar a roda e ir para o lado oposto. No traçado tradicional do pintor, os pares clássicos são:

• vermelho e verde
• azul e laranja
• amarelo e roxo

Em modelos de luz, como os das telas, os pares mudam um pouco. Vermelho combina com ciano, verde com magenta e azul com amarelo. A diferença existe porque cada sistema tem a própria definição do que é “oposto”. Escolha uma roda e siga com ela no projeto. Se quiser entender a origem da diferença, veja cores primárias: RYB, RGB e CMYK.

Se você escreve CSS, há um atalho. No formato hsl(), o MDN explica que somar ou subtrair 180 ao matiz dá a cor complementar. Um azul em 210° tem como par o 30°, um laranja.

O efeito de contraste simultâneo

Quando duas complementares ficam coladas, cada uma tende a parecer mais intensa. O químico francês Michel Eugène Chevreul formulou a lei do contraste simultâneo em um livro de 1839: cores postas lado a lado parecem o mais diferentes possível uma da outra. Na prática, é o que se vê quando um laranja encosta num azul: o par chama mais atenção do que cada cor sozinha.

Onde o par complementar rende mais

Para guiar o olhar. Um fundo azul-escuro com um único botão laranja faz o botão saltar. A pessoa entende na hora onde clicar.

Para dar vida a um visual sério. Uma oficina mecânica, por exemplo, pode usar um azul-marinho, como #14213D, junto de um laranja, como #F28C28. O azul escuro dá base à peça, e o laranja chama o olho para o que importa.

Para peças curtas. Cartaz, capa de rede social, etiqueta de promoção. Em peças que a pessoa lê por alguns segundos, o choque ajuda. Em textos longos, cansa.

Onde o par complementar atrapalha

Complementares puras e com a mesma intensidade, lado a lado, podem parecer vibrar e incomodar. Isso é pior com vermelho e verde, ou com tons muito saturados. Evite também usar o par para texto sobre fundo: o contraste de cor não garante legibilidade. Um laranja #FF7F00 sobre um azul #0000FF tem uma razão de contraste de cerca de 3,4 para 1, abaixo do mínimo de 4,5 para 1 que a WCAG exige no nível AA para texto normal (a versão 2.2, de outubro de 2023, manteve esse valor). A cor parece forte, mas o texto é difícil de ler. Veja o tema em contraste de valor, matiz e saturação.

Passo a passo: montar um par para uma oficina

1. Escolha a cor dominante. Aqui, o azul #1D4E89. Ela cobre fundos, faixas e áreas grandes.
2. Ache a oposta na roda. Do outro lado do azul fica o laranja. Pegue um laranja próximo de #F28C28.
3. Defina a proporção. Deixe o azul com a maior parte da peça e o laranja com uma parte pequena. Uma proporção como 80 a 90% de uma cor e 10 a 20% da outra costuma funcionar. A regra 60-30-10 ajuda a distribuir.
4. Adicione neutros. Um creme #F4F1EA para fundo de texto e um azul quase preto #14213D para letras.
5. Crie uma ponte. Um laranja bem claro, #FFD7A8, funciona como fundo de destaque suave e liga o par.
6. Teste o texto. Letras claras sobre azul-escuro costumam passar com folga. Texto laranja sobre fundo claro precisa de conferência.

Como suavizar o choque

Você não precisa usar as complementares na intensidade máxima. Algumas saídas:

• Reduza a saturação de uma delas. Um azul forte com um laranja queimado e mais discreto tem menos vibração.
• Mude a luminosidade. Um azul bem escuro com um laranja claro se separa pelo claro e escuro, não só pela cor.
• Separe com neutro. Uma borda branca, cinza ou creme entre as duas cores acalma o encontro.
• Use a complementar dividida. Em vez do oposto exato, pegue as duas cores vizinhas dele. Fica forte, porém mais fácil de equilibrar. O assunto está em tríade e complementar dividida.

Enganos ao usar azul e laranja juntos

Usar as duas cores em partes iguais. Sem uma cor dominante, o olho não sabe onde pousar. Dê a uma delas o papel principal.

Colocar texto de uma sobre a outra. Mesmo quando a combinação é bonita, a leitura sofre. Reserve o par para formas, ícones e destaques, e use um neutro para o texto.

Trocar a roda no meio do caminho. Quem escolhe o par pela roda de pintor e depois ajusta num seletor de tela pode terminar com um par que não é exatamente oposto. Para um uso mais livre, isso não é problema. Para um par bem preciso, confira o matiz.

Achar que toda paleta precisa ter um par. Para um clima calmo, cores análogas são mais seguras. O par complementar é uma ferramenta para quando você quer contraste, e não uma obrigação.

Teste do olho semicerrado

Com a paleta pronta, desfoque a visão ou reduza a imagem a um tamanho de miniatura. Se a cor de destaque ainda se enxerga e o resto continua tranquilo, o par está bem usado. Se tudo parece brigar, reduza a área de uma das cores ou suavize a saturação, e teste de novo.