Cores complementares: contraste que ainda parece equilibrado

Cores complementares são dois matizes diretamente opostos no círculo cromático, como azul e laranja, vermelho e verde, ou amarelo e violeta. Cada uma faz a outra parecer mais intensa, e por isso os pares complementares dão o maior contraste de cor disponível. Usado com cuidado, esse contraste faz um único elemento ser impossível de não ver. Usado em partes iguais e com força total, deixa o design desconfortável de olhar.

Quais pares contam como complementares depende do círculo. O círculo do pintor liga o azul ao laranja; o círculo da tela liga o azul ao amarelo. O guia do círculo cromático explica a diferença. Os pares abaixo são os que designers mais usam.

Pares de cores complementares, com códigos

Por que as cores complementares vibram

Coloque duas complementares de luminosidade parecida e saturação total lado a lado e a borda entre elas parece piscar. Seus olhos não conseguem decidir onde uma termina. O efeito é mais forte com vermelho e verde ou azul e laranja em intensidade igual, e deixa o texto de uma cor sobre a outra muito difícil de ler.

A solução quase nunca é mudar os matizes. Deixe um deles bem mais escuro ou mais claro, ou bem menos saturado. O par continua complementar, mas a borda para de brigar. Isso também resolve a legibilidade, porque o texto precisa mais de contraste de luminosidade do que de matiz; veja contraste de cores.

Como usar cores complementares: uma lidera, a outra destaca

A abordagem mais confiável é dar a uma cor a maior parte do espaço e à outra um trabalho pequeno e importante: um botão, um preço, uma única palavra, um selo. O destaque atrai o olhar porque é a única coisa do tipo. Metade e metade, ao contrário, divide a atenção e raramente parece planejado.

• Cor dominante: fundos, formas grandes, a maior parte da superfície. Em geral a mais escura ou mais discreta do par.
• Cor de destaque: chamadas para ação, realces, um número importante. Em geral a mais brilhante.
• Neutros: quase branco, quase preto ou um cinza quente para dar espaço às duas. Poucos bons designs complementares têm apenas duas cores.
• Guia de proporção: a regra 60-30-10 é um bom ponto de partida, com a complementar nos 10.

Gradientes complementares sem o meio cinza

Misture duas complementares diretamente e o ponto do meio fica cinza ou marrom. No espaço de cor sRGB que a maioria das ferramentas usa, os valores de vermelho, verde e azul de dois opostos têm média próxima do neutro. É um dos erros de gradiente mais comuns.

As duas melhores soluções são um ponto intermediário em um matiz entre o par e a interpolação em OKLCH, que contorna o círculo cromático em vez de cortar por dentro. Gradientes turvos e gradientes OKLCH em CSS explicam as duas em detalhe.

Onde as paletas complementares funcionam melhor

As complementares combinam com peças que precisam ser notadas rápido e lidas de longe. Servem menos para leitura longa, interiores calmos ou qualquer coisa que deva parecer quieta, onde as cores análogas se saem melhor.

• Chamadas para ação. Um botão quente em uma página fria, ou o contrário, é o uso clássico. Ele é achado sem procurar.
• Esporte e eventos. Uniformes de time, cartazes e ingressos usam cores opostas porque se leem do outro lado de um estádio ou de uma rua.
• Comida e varejo. A composição de comida costuma pôr pratos quentes contra pratos ou fundos frios para que avancem; um selo de promoção na complementar da embalagem se destaca na prateleira.
• Dados e mapas. Dois matizes opostos mostram claramente os dois lados de uma comparação, desde que rótulos os reforcem para quem enxerga as cores de outro jeito.
• Retratos e fotos de produto. Um fundo na complementar da cor principal do assunto o separa sem contorno duro.

Erros com cores complementares a evitar

Se um par complementar parecer tenso demais mesmo equilibrado, experimente a complementar dividida: um matiz mais os dois ao lado do seu oposto. Ela mantém a energia e suaviza o conflito. Paletas em tríade e complementar dividida mostra como.