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. Se os ligares com linhas, desenhas um retângulo ou um quadrado, e é por isso que as duas versões se chamam esquemas em retângulo e em quadrado. Como contém cores quentes e frias dos dois lados do círculo, uma paleta tetrádica é a mais completa das harmonias clássicas. É também a que mais facilmente parece caótica, a menos que deixes uma cor liderar e mantenhas as outras três no seu lugar.

Esquemas tetrádicos em retângulo e em quadrado

As duas versões partem de um matiz base e acrescentam o seu complementar, a 180 graus. Diferem no sítio onde fica o segundo par.

Como construir um esquema de cores tetrádico

1. 1

   Escolhe o matiz base

   Escolhe a cor de que a tua marca ou o teu design dependem. Anota o seu matiz em graus, que qualquer seletor de cor que mostre HSL te dá.

2. 2

   Junta o complementar

   Soma 180 graus. Esse par é a espinha dorsal do esquema. Cores complementares explica porque funcionam os opostos.

3. 3

   Escolhe retângulo ou quadrado

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

4. 4

   Dá uma função a cada cor

   Uma dominante, uma de apoio, dois acentos. Escreve-o para as funções se manterem iguais em todos os designs.

5. 5

   Afina a luminosidade e a saturação

   Escurece a cor dominante, suaviza a de apoio e mantém 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 */
}

Porque é difícil equilibrar quatro cores

Com duas cores, o contraste é simples. Com quatro matizes fortes, o olhar não sabe para onde olhar primeiro e cada cor parece gritar por cima das outras. A maioria dos designs tetrádicos que falham fá-lo porque as quatro cores recebem mais ou menos a mesma área e a mesma saturação. A solução é hierarquia, não menos cores.

Essa segunda figura aponta para a verdadeira força do esquema. Quatro cores dão-te variedade suficiente para uma série inteira: cada post pode ser liderado por um membro diferente da paleta, e o conjunto continua a pertencer claramente à mesma família. É ideal para carrosséis, menus e programas de eventos, onde a coerência da marca importa mas a monotonia aborrece.

Onde um esquema de cores tetrádico funciona melhor

Quatro matizes ganham o seu lugar quando um projeto precisa de separar claramente várias coisas sem inventar cores novas de cada vez. Um só cartaz raramente precisa disso. Um sistema costuma precisar.

• Codificação por categorias: um menu de café com bebidas, pequenos-almoços, almoços e bolos, cada um com a sua cor.
• Programas de eventos: quatro palcos, percursos ou dias que os visitantes precisam de distinguir de relance.
• Gráficos e dashboards: quatro séries de dados que têm de continuar distintas, idealmente verificadas para daltonismo também.
• Marcas infantis e de brincar: onde a versão completa e viva da paleta é exatamente o objetivo.
• Campanhas sazonais: um matiz a liderar cada trimestre do ano, com os outros em apoio.

Para as proporções, começa pela regra 60 30 10 e reparte os últimos dez por cento entre os dois acentos. Num menu, por exemplo, a cor dominante enche a página, a de apoio marca os títulos e os dois acentos assinalam os pratos vegetarianos e as novidades.

Fazer uma paleta tetrádica parecer sofisticada

As paletas tetrádicas em saturação total parecem uma caixa de brinquedos, o que é perfeito para uma loja de brinquedos e errado para a maioria das outras. Puxa duas ou três das cores para o cinzento ou para o escuro, e os mesmos matizes parecem ponderados e adultos.

Se quatro cores parecerem demais, recua para três com cores triádicas ou cores complementares divididas, que mantêm forte contraste com um matiz a menos para gerir. Depois experimenta a paleta em designs reais: no Gradiently, as cores guardadas num kit de marca (uma funcionalidade Pro) aparecem primeiro em todos os seletores de cor do Studio, para cada post de uma série poder ter um líder diferente.