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

[Canonical HTML page](https://gradiently.design/pt-pt/guide/tetradic-colors)

Quatro cores é a harmonia clássica mais rica e a mais fácil de errar. O segredo não é escolher os quatro matizes, que é aritmética, mas decidir qual deles manda.

## The short version

- Um esquema de cores tetrádico usa quatro matizes dispostos como dois pares complementares no círculo cromático.
- A versão em retângulo junta dois matizes a 60 graus um do outro com os seus dois opostos; a versão em quadrado espaça os quatro matizes a 90 graus.
- As paletas tetrádicas são ricas e variadas mas difíceis de equilibrar, porque quatro matizes competem pela atenção.
- O esquema funciona quando uma cor domina, uma segunda apoia e as duas restantes servem de pequenos acentos.
- Atenuar ou escurecer alguns dos quatro matizes faz uma paleta tetrádica parecer sofisticada e não ruidosa.

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.

| Versão | Matizes a partir da base | Carácter |
| --- | --- | --- |
| Retângulo, ou duplamente complementar | 0, 60, 180 e 240 graus | Dois vizinhos próximos e os seus opostos; mais fácil de equilibrar |
| Quadrado | 0, 90, 180 e 270 graus | Espaçamento perfeitamente uniforme; o mais variado e o mais ousado |

Os esquemas em retângulo têm um par natural de aliados de cada lado, e é por isso que os designers costumam começar por eles.

- Cobalto: #1b3c7e
- Ametista: #9d59c0
- Calêndula: #f0b642
- Feto: #7dba5e

Um esquema em retângulo: cobalto e ametista, a 60 graus um do outro, opostos a calêndula e feto.

- Violeta profundo: #452277
- Vermelho coral: #e25a66
- Folha de lima: #95c059
- Verde-azulado do mar: #2e9e95

Um esquema em quadrado: quatro matizes a 90 graus, com o violeta aprofundado para poder servir de base.

## Como construir um esquema de cores tetrádico

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. **Junta o complementar** Soma 180 graus. Esse par é a espinha dorsal do esquema. [Cores complementares](https://gradiently.design/pt-pt/guide/complementary-colors) explica porque funcionam os opostos.
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. **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. **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.

```css
: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 */
}
```

A paleta em retângulo acima, gerada a partir de um só número. O matiz HSL dá a volta além de 360 sozinho, por isso nunca precisas de subtrair.

## 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.

Um post vertical de evento para um fim de semana de ateliês abertos, com uma cor de fundo dominante e pequenos acentos

Uma cor lidera o fundo e as outras aparecem em sítios pequenos: conteúdo cheio, design calmo.

Um post vertical de lista na mesma série, liderado por uma segunda cor do esquema de quatro cores

Um post companheiro em que uma segunda cor do conjunto lidera, para a série parecer relacionada mas não repetitiva.

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](https://gradiently.design/pt-pt/guide/brand-consistency) 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](https://gradiently.design/pt-pt/guide/color-blindness-design) 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](https://gradiently.design/pt-pt/guide/60-30-10-rule) 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.

- Azul-ardósia: #24324c
- Urze: #a085ad
- Trigo: #dfc590
- Salva: #85a375
- Linho: #f6f2ea

O esquema em retângulo de cobalto atenuado: os mesmos matizes, agora discretos o suficiente para um hotel, uma livraria ou um casamento.

- Do cobalto à ametista: `linear-gradient(135deg, #1b3c7e 0%, #9d59c0 100%)`
- Da calêndula ao feto: `linear-gradient(135deg, #f0b642 0%, #7dba5e 100%)`
- Urze sobre ardósia: `radial-gradient(circle at 70% 30%, #a085ad 0%, #24324c 55%, #141c2b 100%)`

Num esquema em retângulo, mistura cada par de 60 graus consigo mesmo. Misturar até um oposto atravessa o cinzento; vê [gradientes sujos](https://gradiently.design/pt-pt/guide/muddy-gradients).

### Evitar

- Quatro matizes com a mesma área e o mesmo brilho
- Texto de um matiz vivo sobre outro
- Um gradiente que atravessa os quatro
- Juntar um quinto matiz para corrigir o equilíbrio

### Fazer

- Uma cor dominante, cerca de 60 por cento da área
- Um neutro para o texto e o espaço
- Dois matizes atenuados, dois deixados mais vivos
- Rodar a cor líder ao longo de uma série

Se quatro cores parecerem demais, recua para três com [cores triádicas](https://gradiently.design/pt-pt/guide/triadic-colors) ou [cores complementares divididas](https://gradiently.design/pt-pt/guide/split-complementary-colors), 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.

## FAQ

### O que é um esquema de cores tetrádico?

Uma paleta de quatro matizes feita de dois pares complementares no círculo cromático, formando um retângulo ou um quadrado.

### Qual é a diferença entre esquemas de cores em retângulo e em quadrado?

Um esquema em retângulo usa matizes a 0, 60, 180 e 240 graus; um esquema em quadrado espaça-os uniformemente em intervalos de 90 graus. Os retângulos costumam ser mais fáceis de equilibrar.

### Tetrádico é o mesmo que duplamente complementar?

O esquema tetrádico em retângulo chama-se muitas vezes duplamente complementar, porque são dois pares complementares próximos um do outro.

### Qual é um exemplo de esquema de cores tetrádico?

Cobalto `#1B3C7E`, ametista `#9D59C0`, calêndula `#F0B642` e feto `#7DBA5E` formam um esquema em retângulo: cobalto e ametista ficam a 60 graus um do outro, opostos a calêndula e feto.

### Como se equilibra uma paleta de quatro cores?

Deixa uma cor dominar, dá a uma um papel de apoio e mantém as outras duas como pequenos acentos. Atenua ou escurece alguns matizes e junta um neutro para o texto.