# Cores complementares divididas: contraste com menos choque

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

Um par complementar é intenso e difícil de equilibrar. Divida o oposto em dois e você mantém quase todo o contraste, enquanto as cores deixam de brigar. Veja como funciona, com paletas para copiar.

## The short version

- Cores complementares divididas são uma cor base mais as duas cores que ficam de cada lado do seu complemento no círculo cromático.
- Num círculo de 360 graus, os dois parceiros 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 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 destaques menores.
- Os círculos dos pintores e os das telas posicionam os complementos de modo diferente, então a mesma base pode dar paletas divididas ligeiramente distintas.

**Cores complementares divididas** são três cores: uma base mais as duas cores de cada lado do complemento da base. Em vez de combinar o azul com seu oposto direto, o laranja, você combina o azul com o vermelho-alaranjado e o amarelo-alaranjado. Você mantém o contraste entre quente e frio que dá vida aos esquemas complementares, mas, como nada fica exatamente oposto a nada, o resultado é mais agradável ao olho e muito mais fácil de equilibrar num design real.

## Como funcionam as cores complementares divididas

Imagine o [círculo cromático](https://gradiently.design/pt-br/guide/color-wheel) como um relógio. Sua cor base está nas doze. Seu complemento está nas seis. Um esquema complementar dividido pula as seis e pega as cinco e as sete. Em graus, são tons a cerca de 150 e 210 graus da base.

1. **Escolha um tom base** Comece pela cor sobre a qual seu design realmente trata: a cor da marca, o produto, o clima. Digamos azul-petróleo, com um tom de 175 graus.
2. **Encontre o complemento** Some 180 graus. O complemento do azul-petróleo é um vermelho coral a cerca de 355 graus.
3. **Ande 30 graus para cada lado** Vá 30 graus para cada lado a partir do complemento: cerca de 325 graus (rosa) e 25 graus (laranja).
4. **Ajuste luminosidade e saturação** Os tons definem o esquema, mas você escolhe quão clara, profunda ou apagada é cada uma. É aí que a paleta começa a parecer sua.

- Base azul-petróleo: #188b81
- Rosa orquídea: #e052a5
- Damasco: #f58a3d
- Azul-petróleo profundo: #173633
- Papel quente: #f6f0ea

O exemplo prático: azul-petróleo com rosa e damasco, mais um azul-petróleo mais escuro e um neutro para texto e espaço.

## Por que o complementar dividido choca menos

Opostos exatos, como vermelho e ciano ou azul e laranja, disputam a atenção com a mesma força. Lado a lado, em saturação total, podem parecer vibrar, e misturados viram cinza. As [cores complementares](https://gradiently.design/pt-br/guide/complementary-colors) são poderosas por isso, mas deixam pouca margem de erro.

Num esquema dividido, os dois parceiros ficam a 60 graus um do outro, o que os faz parentes próximos. Eles se apoiam em vez de brigar e, juntos, equilibram a base. Você tem contraste com um aliado natural do lado quente ou do lado frio, conforme 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 dois quase opostos | Alto | Moderada |
| [Tríade](https://gradiently.design/pt-br/guide/triadic-colors) | 3, espaçadas por igual a 120 graus | Alto | Moderada a difícil |
| [Análogas](https://gradiently.design/pt-br/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 feitas com os passos acima. A primeira cor de cada linha é a base; as outras duas são seus parceiros divididos. A luminosidade e a saturação foram ajustadas para cada conjunto servir ao trabalho real, e não só estar teoricamente correto.

| Base | Hex da base | Parceiros divididos | Transmite |
| --- | --- | --- | --- |
| Azul-petróleo | `#188b81` | `#e052a5` orquídea, `#f58a3d` damasco | Tropical, moderno, vivo |
| Violeta | `#6629a3` | `#f5e63d` limão, `#3fa648` folha | Divertido, criativo, ousado |
| Azul cobalto | `#1b4f98` | `#e45e44` vermelhão, `#f5d63d` girassol | Confiante, esportivo, 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 |

Copie os códigos direto para a sua ferramenta. Use a base na maior parte da área.

- Esquema azul-petróleo: os dois parceiros: `linear-gradient(135deg, #e052a5 0%, #f58a3d 100%)`
- Esquema cobalto: os dois parceiros: `linear-gradient(135deg, #e45e44 0%, #f5d63d 100%)`
- Base azul-petróleo 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%)`

Os dois parceiros divididos são vizinhos, então se misturam limpos entre si. Misturar a base direto num parceiro atravessa o círculo e embarra, então mantenha a base como fundo próprio.

## Como usar um esquema complementar dividido num design

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

Apagar as cores é sua outra alavanca. Escureça ou acinzente a base até ela se comportar quase como um neutro, e os dois parceiros de repente parecem intencionais em vez de berrantes. É assim que os esquemas divididos acabam parecendo sofisticados: um azul-petróleo profundo, um rosa empoeirado e um damasco suave usam os mesmos tons da versão viva, mas se leem como um hotel boutique, e não como uma bola de praia.

Post vertical de cardápio de verão sobre um fundo azul-petróleo profundo com destaques em rosa e damasco

Um fundo azul-petróleo profundo faz a maior parte do trabalho; rosa e damasco ficam para as palavras e um destaque.

### Evite

- Os três tons em saturação total e área igual
- Texto corrido numa cor parceira sobre a outra
- Um único gradiente indo da base ao parceiro, atravessando o círculo
- Acrescentar por cima um quarto tom vivo

### Faça

- Uma base dominante, muitas vezes aprofundada ou apagada
- Parceiros em luminosidades diferentes, para um liderar
- Um neutro para o texto e para respirar
- Confira o contraste onde as palavras ficam

## Círculo dos pintores ou círculo das telas

Há dois círculos cromáticos comuns. O círculo tradicional dos pintores usa vermelho, amarelo e azul como primárias, então o oposto do vermelho é o verde. As telas usam luz vermelha, verde e azul, então num círculo HSL o oposto do vermelho é o ciano. Os dois dão esquemas válidos; só use um círculo de modo consistente. Se você trabalha em CSS, o círculo das telas é o que o `hsl()` usa, então dá para 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%);
}
```

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

Para ver uma paleta funcionando em formatos reais, o Designer do Gradiently pode diagramar um post, um story e um banner de uma só vez, e você avalia as proporções em cada tamanho em vez de num cartão de amostras.

## FAQ

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

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

### Como encontrar cores complementares divididas?

Encontre o complemento da cor base somando 180 graus ao seu tom e depois pegue os tons a cerca de 30 graus de cada lado dele.

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

É mais fácil de equilibrar. Você mantém 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, verde-amarelado e verde-azulado. No círculo HSL das telas, os parceiros do vermelho são um ciano esverdeado e um ciano azulado, em torno de 150 e 210 graus.

### Quantas cores tem um esquema complementar dividido?

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