Tríade e complementar dividida na prática
Como montar uma paleta tríade e uma complementar dividida: o que são, como achar as cores na roda e como equilibrar as proporções.
Uma paleta tríade usa três cores igualmente espaçadas na roda de cores, formando um triângulo. A complementar dividida usa uma cor e as duas vizinhas da oposta dela. Ambas dão variedade e vivacidade; a tríade é mais alegre e difícil de equilibrar, a complementar dividida é mais fácil de controlar. O manual do aplicativo Procreate descreve a tríade como um triângulo equilátero na roda e a dividida como um triângulo estreito.
Tríade: três cores à mesma distância
Imagine um triângulo com pontas iguais dentro da roda. Cada ponta é uma cor da paleta. Na roda de 360°, isso significa cores a 120° de distância uma da outra. O exemplo clássico é o das três cores de luz, vermelho, verde e azul. Na roda do pintor, a tríade mais conhecida é a das primárias: vermelho, amarelo e azul. Outras tríades também existem, como laranja, verde e roxo.
Para achar a sua, escolha uma cor, some 120° ao matiz e depois mais 120°. Quem trabalha com CSS faz isso direto no formato hsl(), em que o matiz é o primeiro número. Partindo de hsl(170 80% 28%), um verde-azulado, as outras duas seriam hsl(290 ...) (um roxo) e hsl(50 ...) (um amarelo). Se você não programa, o editor do Tom a Tom mostra a mesma geometria sobre a roda.
Quando a tríade serve
Para materiais que querem parecer vivos e variados: uma feira de artesanato, um cartaz de festa junina, um site de brinquedos, uma capa de livro infantil. Quanto mais saturadas as três, mais vibrante o visual. Quanto mais suaves, mais discreto.
O problema da tríade
Três cores fortes disputam atenção. Se você usar as três na mesma quantidade e com a mesma intensidade, o resultado parece bagunça. A saída é escolher uma delas como dominante e deixar as outras duas em papel de apoio.
Complementar dividida: o oposto, mas com uma folga
Na complementar pura, você pega a cor e a oposta exata. Na dividida, você pega a cor principal e, em vez do oposto, as duas cores que ficam ao lado dele. O desenho na roda é um “Y” ou um triângulo fino. Ela é uma variação da complementar, e por isso mantém o contraste forte. Só que a folga entre as duas cores do lado oposto tira um pouco do choque.
Exemplo: o azul tem como oposto o laranja. Na dividida, em vez do laranja, você usa um amarelo-alaranjado e um vermelho-alaranjado. A cor principal continua sendo o azul. Para ver como o par puro se comporta, leia cores complementares.
Quando a dividida serve
Quando você quer contraste mas tem medo de errar. Funciona bem para sites, apresentações e identidade de marca, porque a cor principal manda e as duas auxiliares dão opções de destaque. É mais fácil de equilibrar do que a tríade.
Tríade e dividida em uma tabela
| Tríade | Complementar dividida | |
|---|---|---|
| Desenho na roda | Triângulo com lados iguais | Uma cor e duas vizinhas da oposta |
| Distância típica | Cerca de 120° entre as cores | Principal e oposta a 180°, com as duas auxiliares ao lado da oposta, de 10° a 30° dela |
| Clima | Variado, festivo | Forte, mas controlado |
| Dificuldade | Maior | Menor |
Tríade a 120°: cartaz e crachá de uma feira de artesanato
Você organiza uma feira de bairro e precisa de cartaz, crachá e faixas.
- Escolha a cor dominante. Um verde-azulado,
#0F766E. Ele cobre fundos e faixas e dá a identidade ao evento. - Calcule as duas outras. O verde-azulado
#0F766Eestá perto de 175° na roda. Somando 120° e 240°, chegamos a cerca de 295° (um roxo) e 55° (um amarelo). Em tons agradáveis, ficam#91279Be#DAC90B. - Defina os papéis. O verde-azulado ocupa a maior parte. O roxo entra em títulos e no nome da feira. O amarelo aparece em pequenos detalhes e na data.
- Acrescente neutros. Um branco quente,
#F5F5F4, para áreas de texto e um marrom quase preto,#292524, para letras. - Suavize se precisar. Se achou intenso, reduza a saturação das duas cores de apoio. Elas não precisam estar no máximo.
- Teste o cartaz de longe. Veja se o nome da feira e a data aparecem logo. Medi o contraste: o roxo sobre o branco quente dá 6,49:1 e o verde-azulado sobre ele dá 5,02:1, bons para títulos. O amarelo sobre o branco quente dá só 1,56:1, então ele só entra sobre o marrom
#292524(8,91:1) ou sobre o verde-azulado (3,22:1, suficiente para um detalhe grande, não para texto pequeno).
Complementar dividida: o azul de uma consultoria com dois acentos
- Cor principal. Um azul sóbrio,
#1D4E89. - Oposto. Laranja, perto de
#F28C28. - Divida. Em vez do laranja, pegue duas vizinhas: um amarelo-âmbar,
#EAB308, e um vermelho-alaranjado,#DC4C1F. - Use o azul em 70% da peça e as outras em pequenas áreas. O vermelho-alaranjado pode ficar com o botão principal e o âmbar com sinais secundários, como selos.
- Neutros: branco e cinza-azulado.
Cinco erros ao montar uma tríade ou uma dividida
Dar peso igual às três cores. A tríade pede uma dominante. Uma proporção como a 60-30-10 resolve a maioria dos casos.
Usar saturação máxima nas três. A paleta fica agressiva. Baixe a intensidade de ao menos duas.
Deixar de fora os neutros. Sem branco, creme ou cinza, o olho não descansa.
Ignorar o texto. Cada uma dessas cores deve ser testada sobre os fundos em que vai aparecer. Cores vivas e de luminosidade parecida podem ter contraste pobre mesmo sendo diferentes entre si.
Achar que esses esquemas são regra fixa. São pontos de partida. Se uma cor sai um pouco do lugar na roda mas funciona nos olhos, pode ficar. O amarelo da feira, por exemplo, não está em 55° exatos.
Para uma opção mais calma, vá às cores análogas. Para ver a roda inteira com os esquemas desenhados, abra o artigo roda de cores.
Fontes
- Procreate. Color harmony (Procreate Handbook).
- MDN Web Docs. hsl() - CSS: Cascading Style Sheets.
Escrito pela Equipe Tom a Tom. Veja como produzimos e revisamos em Política editorial.