# Cores complementares divididas: contraste com menos choque

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

Um par complementar é intenso e difícil de equilibrar. Divide o oposto em dois e manténs quase todo o contraste, sem que as cores lutem entre si. Eis como funciona, com paletas para copiar.

## The short version

- As cores complementares divididas são uma cor base mais as duas cores que ficam de cada lado da sua complementar no círculo cromático.
- Num círculo de 360 graus, as duas parceiras ficam a cerca de 150 e 210 graus da base, uns 30 graus de cada lado do seu oposto exato.
- O esquema mantém um contraste forte, mas choca menos do que um par complementar simples, porque nenhuma das cores é exatamente oposta a outra.
- Funciona melhor quando a cor base domina e as duas cores divididas entram como acentos mais pequenos.
- Os círculos dos pintores e os círculos dos ecrãs colocam as complementares de forma diferente, por isso a mesma base pode dar paletas divididas ligeiramente diferentes.

As **cores complementares divididas** são três cores: uma base e as duas cores de cada lado da complementar da base. Em vez de juntar o azul ao seu oposto direto, o laranja, juntas o azul ao vermelho-alaranjado e ao amarelo-alaranjado. Manténs o contraste entre quente e frio que dá vida aos esquemas complementares, mas, como nada fica exatamente oposto a outra cor, o resultado é mais agradável à vista e muito mais fácil de equilibrar num design real.

## Como funcionam as cores complementares divididas

Imagina o [círculo cromático](https://gradiently.design/pt-pt/guide/color-wheel) como um relógio. A tua cor base está nas doze. A sua complementar está nas seis. Um esquema complementar dividido salta as seis e usa as cinco e as sete. Em graus, são matizes a cerca de 150 e 210 graus da base.

1. **Escolhe um matiz base** Começa pela cor de que o teu design trata mesmo: a cor da marca, o produto, a atmosfera. Digamos verde-azulado, com um matiz de 175 graus.
2. **Encontra a complementar** Soma 180 graus. A complementar do verde-azulado é um vermelho coral a cerca de 355 graus.
3. **Anda 30 graus para cada lado** Desloca-te 30 graus em cada sentido a partir da complementar: cerca de 325 graus (rosa) e 25 graus (laranja).
4. **Ajusta a luminosidade e a saturação** Os matizes definem o esquema, mas tu escolhes o quão clara, profunda ou suave é cada uma. É aí que a paleta começa a parecer tua.

- Base verde-azulado: #188b81
- Rosa orquídea: #e052a5
- Alperce: #f58a3d
- Verde-azulado escuro: #173633
- Papel quente: #f6f0ea

O exemplo trabalhado: verde-azulado com rosa e alperce, mais um verde-azulado mais escuro e um neutro para texto e espaço.

## Porque é que as complementares divididas chocam menos

Os opostos exatos, como o vermelho e o ciano ou o azul e o laranja, disputam a atenção com igual força. Lado a lado, com saturação total, podem parecer vibrar, e misturados dão cinzento. As [cores complementares](https://gradiently.design/pt-pt/guide/complementary-colors) são poderosas por isso mesmo, mas deixam pouca margem para erro.

Num esquema dividido, as duas parceiras estão a 60 graus uma da outra, o que as torna parentes próximas. Apoiam-se em vez de lutar e, juntas, equilibram a base. Ficas com contraste e com uma aliada natural do lado quente ou do lado frio, consoante o ponto de partida.

| Esquema | Cores | Contraste | Facilidade de equilíbrio |
| --- | --- | --- | --- |
| Complementar | 2, exatamente opostas | O mais alto | Difícil |
| Complementar dividido | 3, base mais duas quase opostas | Alto | Moderada |
| [Tríade](https://gradiently.design/pt-pt/guide/triadic-colors) | 3, igualmente espaçadas a 120 graus | Alto | Moderada a difícil |
| [Análogas](https://gradiently.design/pt-pt/guide/analogous-colors) | 3, lado a lado | Baixo | Fácil |

O complementar dividido fica entre a calma das análogas e o drama das complementares.

## Exemplos de paletas complementares divididas

Cinco paletas construídas com os passos acima. A primeira cor de cada linha é a base; as outras duas são as suas parceiras divididas. A luminosidade e a saturação foram afinadas para que cada conjunto sirva para trabalho real, e não apenas na teoria.

| Base | Hex da base | Parceiras divididas | Transmite |
| --- | --- | --- | --- |
| Verde-azulado | `#188b81` | `#e052a5` orquídea, `#f58a3d` alperce | Tropical, moderno, vivo |
| Violeta | `#6629a3` | `#f5e63d` limão, `#3fa648` folha | Divertido, criativo, ousado |
| Azul-cobalto | `#1b4f98` | `#e45e44` vermelhão, `#f5d63d` girassol | Confiante, desportivo, clássico |
| Carmesim | `#c32230` | `#318160` jade, `#2970a3` cerúleo | Festivo, firme, rico |
| Verde-floresta | `#2a6f41` | `#ab5eba` orquídea, `#e4677c` rosa | Botânico, romântico, fresco |

Copia os códigos diretamente para a tua ferramenta. Usa a base na maior parte da área.

- Esquema verde-azulado: as duas parceiras: `linear-gradient(135deg, #e052a5 0%, #f58a3d 100%)`
- Esquema cobalto: as duas parceiras: `linear-gradient(135deg, #e45e44 0%, #f5d63d 100%)`
- Base verde-azulada como fundo: `radial-gradient(circle at 75% 25%, #188b81 0%, #173633 60%, #0b1a19 100%)`
- Base cobalto como fundo: `radial-gradient(circle at 25% 25%, #2970a3 0%, #1b4f98 45%, #0c1f3d 100%)`

As duas parceiras divididas são vizinhas, por isso misturam-se limpamente. Misturar a base diretamente com uma parceira atravessa o círculo e fica turvo, por isso mantém a base como fundo próprio.

## Como usar um esquema complementar dividido num design

Três cores igualmente fortes fazem o design parecer uma bandeira. Dá-lhes antes funções desiguais. A [regra 60 30 10](https://gradiently.design/pt-pt/guide/60-30-10-rule) é um bom ponto de partida: a base cobre a maior parte da área, uma parceira faz um papel de apoio e a outra aparece só onde queres que o olhar vá primeiro.

Atenuar é a tua outra alavanca. Escurece ou acinzenta a base até se comportar quase como um neutro, e as duas parceiras passam de repente a parecer intencionais em vez de berrantes. É assim que os esquemas divididos acabam por parecer sofisticados: um verde-azulado profundo, um rosa empoeirado e um alperce suave usam os mesmos matizes da versão viva, mas leem-se como um hotel boutique e não como uma bola de praia.

Publicação vertical de menu de verão sobre fundo verde-azulado profundo com acentos rosa e alperce

Um fundo verde-azulado profundo faz a maior parte do trabalho; o rosa e o alperce ficam para o texto e um só destaque.

### Evita

- Os três matizes com saturação total e área igual
- Texto corrido numa cor parceira por cima da outra
- Um único gradiente da base a uma parceira, atravessando o círculo
- Juntar um quarto matiz vivo por cima

### Faz

- Uma base dominante, muitas vezes aprofundada ou atenuada
- Parceiras com luminosidades diferentes, para uma liderar
- Um neutro para texto e espaço para respirar
- Verifica o contraste onde o texto fica

## Círculo dos pintores ou círculo dos ecrãs

Há dois círculos cromáticos comuns. O círculo tradicional dos pintores usa o vermelho, o amarelo e o azul como primárias, por isso o oposto do vermelho é o verde. Os ecrãs usam luz vermelha, verde e azul, por isso, num círculo HSL, o oposto do vermelho é o ciano. Ambos dão esquemas válidos; basta usar sempre o mesmo. Se trabalhas em CSS, o círculo dos ecrãs é o que o `hsl()` usa, por isso podes gerar um esquema com um pouco de aritmética.

```css
:root {
  --h: 175; /* base hue in degrees */
  --base: hsl(var(--h) 70% 32%);
  --split-a: hsl(calc(var(--h) + 150) 70% 60%);
  --split-b: hsl(calc(var(--h) + 210) 90% 60%);
}
```

Muda `--h` e todo o esquema complementar dividido se move com ele. Mais sobre este modelo em [matiz, saturação e brilho](https://gradiently.design/pt-pt/guide/hue-saturation-brightness).

Para ver uma paleta a funcionar em formatos reais, o Designer do Gradiently consegue compor um post, um story e um banner de uma só vez, para avaliares as proporções em cada tamanho e não num cartão de amostras.

## FAQ

### O que são cores complementares divididas?

Uma cor base mais as duas cores de cada lado da sua complementar no círculo cromático. Para o azul, são o vermelho-alaranjado e o amarelo-alaranjado.

### Como se encontram as cores complementares divididas?

Encontra a complementar da cor base somando 180 graus ao seu matiz e depois toma os matizes a cerca de 30 graus de cada lado.

### O complementar dividido é melhor do que o complementar?

É mais fácil de equilibrar. Manténs a maior parte do contraste, mas as cores chocam menos porque nenhuma é exatamente oposta.

### Qual é o complementar dividido do vermelho?

No círculo dos pintores, o verde-amarelado e o verde-azulado. Num círculo HSL de ecrã, as parceiras do vermelho são um ciano esverdeado e um ciano azulado, por volta dos 150 e 210 graus.

### Quantas cores tem um esquema complementar dividido?

Três matizes, embora a maioria das paletas reais junte um neutro escuro e um claro para texto e espaço.