# Cores triádicas e paletas complementares divididas, explicadas

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

Três cores igualmente espaçadas podem deixar uma paleta ousada e equilibrada ao mesmo tempo, ou com cara de caixa de brinquedos. A diferença está quase toda em qual cor lidera.

## The short version

- Cores triádicas são três matizes espaçados por igual no círculo cromático, a um terço do círculo de distância, como vermelho, amarelo e azul no círculo do pintor.
- Uma paleta triádica funciona quando uma cor domina, uma segunda apoia e a terceira é usada como um pequeno destaque.
- Suavizar duas das três cores é o jeito mais rápido de deixar uma paleta triádica com cara de adulta.
- Uma paleta complementar dividida usa um matiz mais os dois matizes vizinhos do seu oposto, o que dá contraste forte com menos tensão.
- Cores triádicas costumam funcionar melhor como áreas separadas do que misturadas em um único gradiente.

**Cores triádicas** são três matizes espaçados por igual no círculo cromático, cada um a um terço do círculo dos outros. No círculo do pintor, vermelho, amarelo e azul formam uma tríade, assim como laranja, verde e violeta. Como as três ficam à mesma distância, nenhuma se impõe às outras só pela posição, e é isso que faz as paletas triádicas parecerem vivas e equilibradas. É também o que facilita exagerar.

Este guia fala das tríades, da regra que as impede de parecer uma caixa de brinquedos e do esquema complementar dividido, um parente próximo mais fácil de controlar. O guia do [círculo cromático](https://gradiently.design/pt-br/guide/color-wheel) explica os dois tipos de círculo citados abaixo.

## Esquemas de cores triádicos no círculo

| Tríade | Círculo | Caráter |
| --- | --- | --- |
| Vermelho, amarelo, azul | Do pintor (primárias) | Ousado, gráfico, familiar |
| Laranja, verde, violeta | Do pintor (secundárias) | Terroso, incomum, rico |
| Vermelho-alaranjado, amarelo-esverdeado, azul-violeta | Do pintor (terciárias) | Moderno, menos previsível |
| Vermelho, verde, azul | Da tela (RGB) | Técnico, gritante na força máxima |
| Ciano, magenta, amarelo | Da tela (RGB) | Cara de impresso, divertido |

Tríades comuns. Gire o triângulo para qualquer ponto do círculo para ter mais.

- Marinho (azul): #1e3a8a
- Mostarda (amarelo): #d4a017
- Tijolo (vermelho): #b91c1c
- Oliva (verde): #4d7c0f
- Ameixa (violeta): #6b21a8
- Laranja queimado: #c2410c

A tríade primária e a tríade secundária, cada uma aprofundada a partir da saturação total para que convivam com mais facilidade.

## A regra da dominância: uma cor lidera

Três cores vivas em quantidades iguais disputam a atenção e parecem infantis. A solução é hierarquizá-las. Uma cor cobre a maior parte do design, uma segunda apoia e a terceira aparece só onde você quer que o olhar pouse. Uma divisão de 60, 30 e 10 é um bom ponto de partida, como na [regra 60 30 10](https://gradiently.design/pt-br/guide/60-30-10-rule).

- Terços iguais: disputa: `linear-gradient(90deg, #b91c1c 0% 33.3%, #d4a017 33.3% 66.6%, #1e3a8a 66.6% 100%)`
- 60, 30, 10: o marinho lidera: `linear-gradient(90deg, #1e3a8a 0% 60%, #d4a017 60% 90%, #b91c1c 90% 100%)`
- 60, 30, 10: o oliva lidera: `linear-gradient(90deg, #4d7c0f 0% 60%, #6b21a8 60% 90%, #c2410c 90% 100%)`

O mesmo tipo de tríade em proporções diferentes. Hierarquizar as cores transforma ruído em paleta.

Qual cor deve liderar? Geralmente a mais escura ou a menos saturada, porque grandes áreas de uma cor viva cansam. Guarde a mais viva para o destaque. Se a cor da sua marca faz parte da tríade, ela costuma ser a líder óbvia.

## Como suavizar uma tríade

A segunda ferramenta é a saturação. Mantenha uma cor forte e puxe as outras duas em direção ao cinza, mais escuras ou mais claras. A estrutura da tríade continua, então a paleta ainda parece equilibrada, mas perde o brilho de escola primária. Muitas paletas editoriais e tradicionais são tríades disfarçadas: marinho, ocre e tijolo, ou oliva, ameixa e ferrugem.

- Marinho tinta: #1f2a44
- Aveia: #e9dcc3
- Ocre: #b98b2e
- Tijolo: #9b3d33

Uma tríade primária suavizada com um neutro quente. Parece editorial em vez de infantil.

## Onde as paletas triádicas funcionam

Tríades combinam com marcas e projetos que querem parecer enérgicos, inclusivos ou divertidos sem parecer aleatórios: educação infantil, jogos, festivais, comida e projetos comunitários. Também são úteis em sistemas que precisam de três categorias bem separadas, como três linhas de produto, três níveis de curso ou três tipos de evento, porque cada cor fica o mais longe possível das outras duas.

- **Três categorias:** dê a cada uma a sua cor da tríade e mantenha os layouts idênticos, para que a cor faça a separação.
- **Uma marca, uma líder:** use a cor líder em tudo e traga as outras duas para ilustrações, gráficos e destaques.
- **Pôsteres e embalagens:** uma tríade suavizada sobre um neutro quente dá uma sensação de impresso de meados do século. Planeje as cores para tinta; veja [gradientes para impressão](https://gradiently.design/pt-br/guide/print-gradients).
- **Interfaces:** reserve a tríade para status e ilustrações e deixe os neutros sustentarem as telas, senão toda página vai parecer barulhenta.

## Cores complementares divididas

Um esquema complementar dividido começa com um matiz e, em vez do oposto direto, usa os dois matizes vizinhos desse oposto. Você mantém a maior parte do contraste de um [par complementar](https://gradiently.design/pt-br/guide/complementary-colors), perde o choque frontal e ganha uma terceira cor para trabalhar. É um dos esquemas mais tolerantes para quem está começando.

- Base: violeta: #5b21b6
- Divisão: lima: #a3e635
- Divisão: âmbar: #f59e0b
- Neutro: branco lilás: #f5f3ff

O oposto do violeta no círculo do pintor é o amarelo. A divisão usa as cores ao lado dele, lima e âmbar.

- **Cor base:** a líder, usada na maior parte do design.
- **Primeira cor da divisão:** apoio, em áreas menores ou em uma versão mais discreta.
- **Segunda cor da divisão:** o destaque, usado com moderação.
- **Neutro:** um quase branco ou quase preto para amarrar tudo.

## Cores triádicas em gradientes

Misturar as três cores de uma tríade em um só gradiente obriga a transição a passar por todos os matizes entre elas, e pelo menos uma das passagens costuma ficar apagada. As tríades funcionam melhor como áreas separadas, ou como um gradiente de duas cores com a terceira guardada como destaque.

- As três juntas: metade final lamacenta: `linear-gradient(90deg, #b91c1c 0%, #d4a017 50%, #1e3a8a 100%)`
- Marinho para tijolo, passando por ameixa: `linear-gradient(135deg, #1e3a8a 0%, #6b2a6e 55%, #b91c1c 100%)`
- Mostarda como destaque de borda seca: `linear-gradient(135deg, #1e3a8a 0%, #6b2a6e 50%, #b91c1c 86%, #d4a017 86%, #d4a017 100%)`

Duas cores da tríade se misturam; a terceira fica à parte. A metade do amarelo ao azul do primeiro exemplo mostra por quê.

## Erros comuns em paletas triádicas

### Evite

- Três cores saturadas em quantidades iguais
- Texto na cor de destaque
- As três misturadas em um só gradiente
- Nenhum neutro para o olho descansar

### Faça

- Uma líder, uma de apoio, uma de destaque
- Texto em um neutro com contraste forte
- Áreas separadas, ou duas misturadas mais um destaque
- Um quase branco ou quase preto junto

Se uma tríade ainda parecer barulhenta demais, desça para uma [paleta análoga](https://gradiently.design/pt-br/guide/analogous-colors), em que as cores são vizinhas em vez de opostas.

## FAQ

### O que são cores triádicas?

Cores triádicas são três matizes espaçados por igual no círculo cromático, cada um a um terço do círculo dos outros, como vermelho, amarelo e azul no círculo do pintor.

### Como usar um esquema de cores triádico?

Deixe uma cor dominar, uma segunda apoiar e a terceira funcionar como um pequeno destaque. Suavizar duas das três deixa a paleta mais fácil de usar no dia a dia.

### O que é um esquema de cores complementar dividido?

Um matiz base mais os dois matizes vizinhos do seu complementar. Mantém um contraste forte com menos tensão do que um par complementar direto.

### Qual é a diferença entre cores triádicas e complementares?

As complementares usam dois matizes opostos; as triádicas usam três matizes espaçados por igual no círculo. As tríades são mais variadas e costumam ser um pouco menos tensas.