Roda de cores: como ler e usar
Aprenda a ler a roda de cores e a usá-la para escolher combinações: complementares, análogas e tríades, com um passo a passo simples.
A roda de cores é um círculo que organiza as cores em ordem, como um relógio. Você usa a posição de cada cor para decidir quais combinam: cores vizinhas formam combinações calmas, cores opostas formam combinações fortes. Para usar, escolha uma cor-base, ache o lugar dela na roda e escolha as outras pela distância que ficam dela.
De onde vem a roda e como ela é medida
Um dos primeiros círculos de cores, e o mais famoso, é o de Isaac Newton, no livro Opticks (1704). Ele divide a borda de um círculo em sete arcos, um para cada cor do arco-íris, e usa essa figura para prever o resultado de misturas. De lá para cá, artistas e designers criaram versões mais práticas.
A mais comum entre quem pinta e desenha usa três cores de partida: vermelho, amarelo e azul. Elas ficam em três pontos igualmente afastados. Entre elas ficam as misturas: laranja, verde e roxo. Esse arranjo se chama RYB (as iniciais em inglês de vermelho, amarelo e azul). Se quiser entender por que telas e impressoras usam outras bases, leia cores primárias: RYB, RGB e CMYK.
Na tela, a roda funciona de um jeito parecido, só que a posição é medida em graus, de 0 a 360. O vermelho puro fica em 0°, o verde em 120° e o azul em 240°. Quem escreve cores em CSS usa esses números diretamente, e a documentação de referência da Mozilla (MDN) explica que o matiz, que é a posição na roda, volta ao ponto de partida quando passa de 360°.
Três perguntas para ler a roda
Pense na roda como um mapa com três perguntas.
Onde a cor está? Essa posição é o matiz, o nome da família da cor: vermelho, laranja, verde, azul. Ela não diz se a cor é clara ou escura, nem se é viva ou apagada. Isso é assunto de matiz, saturação e luminosidade.
Quem está perto? Cores vizinhas se parecem. Vermelho, laranja e amarelo, por exemplo, compartilham calor. Elas se misturam sem brigar.
Quem está do lado oposto? Cores em frente uma da outra são complementares. Na roda tradicional de pintura, os pares são vermelho e verde, amarelo e roxo, azul e laranja. Em modelos de luz, como os de tela, os pares mudam um pouco: vermelho e ciano, por exemplo. A diferença entre as duas leituras é real e vem do modelo de cor usado.
Quatro desenhos que a roda permite
Com a roda na mão, quase todo esquema de cores cabe em quatro desenhos.
| Esquema | Como achar na roda | Resultado |
|---|---|---|
| Análogas | Cores vizinhas, até uns 60° de distância | Calmo, harmônico |
| Complementares | Duas cores opostas | Forte, com energia |
| Complementar dividida | Uma cor e as duas vizinhas da oposta | Forte, mais fácil de controlar |
| Tríade | Três cores com a mesma distância entre si | Variado, vivo |
Cada um tem artigo próprio, com exemplos, como o das cores complementares. Aqui o importante é saber que todos nascem do mesmo gesto: marcar uma cor-base e medir a distância até as outras.
Na prática: cores para o letreiro de uma padaria
Imagine que você vai montar o cardápio e o letreiro de uma padaria. Dá para fazer assim.
- Escolha a cor-base. Você quer algo que lembre pão assado, então parte de um marrom quente,
#7F5539. Ele fica na faixa dos laranjas, perto de 25° na roda. - Decida o clima. Quer acolhedor e tranquilo? Pegue vizinhas. Quer chamar atenção? Pegue uma oposta.
- Ache a vizinha. Um amarelo alaranjado como
#E9A23Bestá perto do marrom na roda. Os dois juntos lembram crosta e manteiga. - Ache a oposta para o destaque. Do outro lado do laranja fica o azul-esverdeado. Um
#2F6F73serve para etiquetas e detalhes, e dá descanso ao olho. - Reserve um fundo. Um creme muito claro,
#FFF8F0, deixa tudo respirar. - Use o vermelho queimado
#C8553Dcom economia, só onde quer que a pessoa olhe, como o preço da promoção.
Repare no resultado: três cores quentes vizinhas, uma fria oposta para contrastar, um fundo claro e um toque de destaque. A roda deu a estrutura, e você só ajustou o gosto.
Onde a roda engana
Usar todas as cores da roda ao mesmo tempo. A roda mostra tudo o que existe, não o que você deve usar. Duas ou três famílias de cor, mais neutros, costumam resolver a maioria dos casos.
Achar que a roda resolve sozinha. Ela diz quais matizes combinam, mas não diz quanto de cada um usar, nem se o texto vai ficar legível. Duas cores podem ser “harmônicas” na roda e ainda assim ter pouco contraste na tela. Sempre confira a leitura do texto sobre o fundo.
Misturar rodas diferentes sem perceber. Se você aprendeu a roda de pintor (vermelho, amarelo, azul) e depois usa um seletor de cor de tela, os opostos podem não bater. Escolha uma roda e fique com ela durante o projeto. Se estiver no editor do Tom a Tom, use a mesma roda do início ao fim.
Ignorar a luminosidade. A roda mostra só o matiz. Um amarelo claro e um roxo escuro são opostos na roda de pintura, mas também têm claro e escuro bem diferentes, e isso muda o efeito. Essa diferença de claro e escuro é o assunto do artigo sobre contraste de valor.
Três conferências depois de montar a paleta
Depois de montar a paleta, faça três verificações simples:
- Aperte os olhos até a imagem ficar borrada. Se uma cor desaparece no fundo, ela precisa de mais contraste.
- Veja se há uma cor dominante, uma de apoio e uma de destaque. Se as três disputam atenção, tire uma.
- Mostre para uma pessoa que não participou da escolha e pergunte qual cor ela vê primeiro. Se for a que você queria, a combinação está no caminho certo.
Qual esquema para qual tipo de peça
Para peças calmas, como um perfil de artesã ou o quarto de um bebê, vizinhas costumam funcionar. Para cartazes, promoções e botões de ação, uma oposta ajuda a separar o que importa. Para materiais de festa ou uma marca alegre, a tríade dá variedade sem virar bagunça se uma das três cores dominar.
A roda também serve de ferramenta de diagnóstico. Quando uma paleta parece “estranha”, marque as cores na roda. Muitas vezes você vai ver uma cor isolada, longe das outras, sem motivo. Aproximá-la ou trocá-la resolve.
Comece pequeno: pegue uma cor que você já gosta, ache o ponto dela na roda e teste uma vizinha e uma oposta no editor. Em dez minutos você sente a diferença entre os esquemas melhor do que lendo qualquer regra.
Fontes
- Wikipedia. Color wheel.
- Isaac Newton (transcrição do Newton Project, Universidade de Oxford). Opticks, Book I, Part II (1704), Proposition VI (1704).
- MDN Web Docs. hsl() - CSS: Cascading Style Sheets.
Escrito pela Equipe Tom a Tom. Veja como produzimos e revisamos em Política editorial.