A versão curta
- As cores complementares são pares que ficam diretamente opostos no círculo cromático, como o azul e o laranja.
- Colocadas lado a lado com toda a força e luminosidade semelhante, as cores complementares parecem vibrar na aresta que partilham.
- A forma mais fiável de usar complementares é deixar uma dominar e usar a outra como um pequeno destaque.
- Mudar a luminosidade ou a saturação de uma cor do par mantém o contraste e elimina o choque.
- Um gradiente direto entre dois complementares tende a ficar cinzento no meio, o que uma cor de ponto médio ou a interpolação em OKLCH corrige.
Nesta página
As 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 que os pares complementares dão o contraste de cor mais forte disponível. Usado com cuidado, esse contraste faz um único elemento impossível de não ver. Usado por igual e com toda a força, torna um design desconfortável de olhar.
Que pares contam como complementares depende do círculo. O círculo do pintor faz par do azul com o laranja; o círculo do ecrã faz par do azul com o amarelo. O guia sobre o círculo cromático explica a diferença. Os pares abaixo são os que os designers mais usam.
Pares de cores complementares, com códigos
| Par | Cor A | Cor B | Sensação |
|---|---|---|---|
| Azul e laranja | #1d4ed8 | #f97316 | Enérgico, desportivo, claro |
| Azul-marinho e dourado | #1e3a8a | #d4a017 | Clássico, estabelecido |
| Vermelho e verde | #b91c1c | #15803d | Festivo, natural, ruidoso |
| Violeta e amarelo | #6d28d9 | #facc15 | Brincalhão, elétrico |
| Verde-azulado e coral | #0f766e | #fb7185 | Fresco, quente, moderno |
| Ameixa e salva | #581c87 | #a3b18a | Suave, editorial |
Porque é que as cores complementares vibram
Põe dois complementares de luminosidade semelhante e saturação total lado a lado e a aresta entre eles parece cintilar. Os teus olhos não conseguem fixar onde um acaba. O efeito é mais forte com vermelho e verde ou azul e laranja com a mesma intensidade, e torna muito difícil ler texto de uma cor sobre a outra.
A solução quase nunca é mudar os matizes. Torna um deles muito mais escuro ou mais claro, ou muito menos saturado. O par continua complementar, mas a aresta deixa de lutar. Isto também resolve a legibilidade, porque o texto precisa mais de contraste de luminosidade do que de contraste de matiz; vê o contraste de cor.
Como usar cores complementares: uma lidera, outra destaca
A abordagem mais fiável é dar a uma cor a maior parte do espaço e à outra uma tarefa pequena e importante: um botão, um preço, uma única palavra, um autocolante. O destaque chama o olhar porque é a única coisa do seu género. Metade e metade, pelo contrário, divide a atenção e raramente parece planeado.
linear-gradient(90deg, #0f2a5c 0%, #0f2a5c 88%, #f97316 88%, #f97316 100%)- Cor dominante: fundos, formas grandes, a maior parte da superfície. Normalmente a mais escura ou mais discreta do par.
- Cor de destaque: apelos à ação, realces, um número-chave. Normalmente a mais viva.
- Neutros: quase branco, quase preto ou um cinzento quente para dar espaço a ambas. Poucos bons designs complementares têm só duas cores.
- Guia de proporção: a regra 60-30-10 é um bom ponto de partida, com o complementar a fazer de 10.
Gradientes complementares sem o meio cinzento
Mistura dois complementares diretamente e o ponto intermédio fica cinzento ou castanho. No espaço de cor sRGB que a maioria das ferramentas usa, os valores de vermelho, verde e azul de dois opostos têm uma média próxima do neutro. É um dos erros de gradiente mais comuns.
As duas correções mais fortes são uma paragem intermédia num matiz entre o par e a interpolação em OKLCH, que se move à volta do círculo cromático em vez de o atravessar. Os gradientes lamacentos e os gradientes OKLCH em CSS explicam ambas em detalhe.
Onde as paletas complementares funcionam melhor
Os complementares servem o trabalho que tem de ser notado depressa e lido à distância. Servem menos para leitura longa, interiores calmos ou tudo o que deva parecer sereno, onde as cores análogas se saem melhor.
- Apelos à ação. Um botão quente numa página fria, ou o inverso, é o uso clássico. Encontra-se sem procurar.
- Desporto e eventos. Equipamentos de equipas, cartazes e bilhetes usam cores opostas porque se leem do outro lado de um estádio ou de uma rua.
- Comida e retalho. O styling de comida põe muitas vezes pratos quentes contra pratos ou fundos frios para que avancem; um autocolante de saldos no complementar da embalagem destaca-se numa prateleira.
- Dados e mapas. Dois matizes opostos mostram com clareza os dois lados de uma comparação, desde que haja etiquetas a apoiá-los para quem vê as cores de forma diferente.
- Retratos e fotografias de produto. Um fundo no complementar da cor principal do sujeito separa-o sem um contorno rígido.
Erros a evitar com cores complementares
Evita
- Quantidades iguais das duas cores
- Texto de um complementar sobre um fundo do outro
- As duas cores com toda a saturação e luminosidade semelhante
- Um gradiente direto entre o par
Faz
- Uma cor dominante e um pequeno destaque
- Texto num neutro quase branco ou quase preto
- Uma cor mais profunda, mais pálida ou mais discreta do que a outra
- Uma cor de ponto médio ou uma mistura em OKLCH
Se um par complementar parecer demasiado tenso mesmo equilibrado, experimenta a complementar dividida: um matiz mais os dois de cada lado do seu oposto. Mantém a energia e suaviza o choque. As paletas em tríade e complementares divididas mostram como.
Perguntas frequentes
O que são cores complementares?
As cores complementares são dois matizes opostos no círculo cromático, como azul e laranja ou vermelho e verde. Juntas criam o contraste de cor mais forte.
Qual é a cor complementar do azul?
No círculo tradicional do pintor é o laranja. No círculo RGB do ecrã usado pelas ferramentas digitais é o amarelo.
Porque é que as cores complementares parecem vibrar?
Quando dois opostos de luminosidade semelhante e saturação total se tocam, o olho tem dificuldade em fixar a aresta. Tornar uma cor mais escura, mais clara ou menos saturada pára isso.
Como faço um gradiente entre cores complementares?
Acrescenta uma paragem intermédia num matiz entre as duas, ou interpola em OKLCH. Uma mistura direta em sRGB entre complementares costuma ficar cinzenta no meio.
Quanto de cada cor complementar devo usar?
Deixa uma dominar e usa a outra como um pequeno destaque, por exemplo cerca de 90% para 10%, com neutros para dar espaço a ambas.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
