Esquema de cores tetrádico: quatro cores em equilíbrio

Um esquema de cores tetrádico são quatro matizes que formam dois pares complementares no círculo cromático. Ligue-os com linhas e você desenha um retângulo ou um quadrado, e por isso as duas versões se chamam esquema retangular e esquema quadrado. Como reúne cores quentes e frias dos dois lados do círculo, a paleta tetrádica é a mais completa das harmonias clássicas. É também a que mais tende a parecer caótica, a menos que uma cor lidere e as outras três fiquem no seu lugar.

Esquemas tetrádicos retangular e quadrado

As duas versões partem de um matiz base e somam o complementar, a 180 graus. A diferença está em onde fica o segundo par.

Como montar um esquema de cores tetrádico

1. 1

   Escolha o matiz base

   Escolha a cor de que sua marca ou seu design depende. Anote o matiz em graus, que qualquer seletor de cor com HSL informa.

2. 2

   Some o complementar

   Some 180 graus. Esse par é a espinha dorsal do esquema. Cores complementares explica por que os opostos funcionam.

3. 3

   Escolha retângulo ou quadrado

   Para um retângulo, some 60 graus à base e ao complementar. Para um quadrado, some 90 graus a cada um.

4. 4

   Dê uma função a cada cor

   Uma dominante, uma de apoio, dois acentos. Anote, para que os papéis sejam os mesmos em todos os designs.

5. 5

   Ajuste luminosidade e saturação

   Escureça a dominante, suavize a de apoio e deixe os acentos mais vivos. O matiz define a harmonia; a luminosidade define a hierarquia.

:root {
  --h: 220; /* base hue */

  /* Rectangle scheme */
  --c1: hsl(var(--h) 65% 30%);
  --c2: hsl(calc(var(--h) + 60) 45% 55%);
  --c3: hsl(calc(var(--h) + 180) 85% 60%);
  --c4: hsl(calc(var(--h) + 240) 40% 55%);

  /* For a square scheme use +90, +180 and +270 instead */
}

Por que quatro cores são difíceis de equilibrar

Com duas cores, o contraste é simples. Com quatro matizes fortes, o olho não sabe onde olhar primeiro, e cada cor parece gritar mais alto que as outras. A maioria dos designs tetrádicos que falham dá a todas as quatro cores área e saturação quase iguais. A solução é hierarquia, não menos cores.

Essa segunda figura aponta a verdadeira força do esquema. Quatro cores dão variedade suficiente para uma série inteira: cada post pode ser liderado por um membro diferente da paleta e o conjunto ainda claramente se pertence. É ideal para carrosséis, cardápios e programações de eventos, onde a consistência de marca importa, mas a mesmice cansa.

Onde o esquema tetrádico funciona melhor

Quatro matizes se justificam quando um projeto precisa separar várias coisas com clareza sem inventar cores novas a cada vez. Um único pôster raramente precisa disso. Um sistema costuma precisar.

• Codificação por categoria: o cardápio de um café com bebidas, café da manhã, almoço e bolos, cada um com sua cor.
• Programações de eventos: quatro palcos, trilhas ou dias que os visitantes precisam distinguir num relance.
• Gráficos e painéis: quatro séries de dados que precisam continuar distintas, de preferência testadas para daltonismo também.
• Marcas infantis e de brincar: em que a versão cheia e vibrante da paleta é exatamente o objetivo.
• Campanhas sazonais: um matiz liderando cada trimestre do ano, com os outros em apoio.

Para as proporções, comece pela regra 60 30 10 e divida os dez por cento finais entre os dois acentos. Num cardápio, por exemplo, a cor dominante preenche a página, a de apoio marca os títulos e os dois acentos sinalizam os pratos vegetarianos e as novidades.

Como deixar uma paleta tetrádica sofisticada

Paletas tetrádicas com saturação total parecem uma caixa de brinquedos, o que é perfeito para uma loja de brinquedos e errado para a maioria das outras marcas. Puxe duas ou três cores para o cinza ou para o escuro, e os mesmos matizes parecem pensados e adultos.

Se quatro cores parecem demais, volte a três com cores triádicas ou cores complementares divididas, que mantêm forte contraste com um matiz a menos para administrar. Depois teste a paleta em designs reais: no Gradiently, as cores salvas no kit de marca (um recurso Pro) aparecem primeiro em todo seletor de cor do Studio, e cada post de uma série pode assumir uma liderança diferente.