# Cores triádicas e paletas complementares divididas, explicadas

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

Três cores equidistantes podem tornar uma paleta ousada e equilibrada ao mesmo tempo, ou parecida com uma caixa de brinquedos. A diferença está quase toda em qual das cores lidera.

## The short version

- As cores triádicas são três tons distribuídos de forma igual à volta do círculo cromático, a um terço do círculo umas das outras, como o vermelho, o amarelo e o azul no círculo do pintor.
- Uma paleta triádica funciona quando uma cor domina, uma segunda apoia e a terceira é usada como pequeno acento.
- Suavizar duas das três cores é a forma mais rápida de dar a uma paleta triádica um ar adulto.
- Uma paleta complementar dividida usa um tom e os dois tons de cada lado do seu oposto, o que dá um contraste forte com menos tensão.
- As cores triádicas costumam funcionar melhor como áreas separadas do que misturadas num só gradiente.

As **cores triádicas** são três tons distribuídos de forma igual à volta do círculo cromático, cada um a um terço do círculo dos outros. No círculo do pintor, o vermelho, o amarelo e o azul formam uma tríade, tal como o laranja, o verde e o violeta. Como os três estão à mesma distância, nenhum se sobrepõe aos outros só pela posição, e é isso que torna as paletas triádicas vivas e equilibradas. Também as torna fáceis de exagerar.

Este guia trata 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-pt/guide/color-wheel) explica os dois tipos de círculo referidos abaixo.

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

| Tríade | Círculo | Carácter |
| --- | --- | --- |
| Vermelho, amarelo, azul | Do pintor (primárias) | Ousada, gráfica, familiar |
| Laranja, verde, violeta | Do pintor (secundárias) | Terrosa, invulgar, rica |
| Vermelho alaranjado, verde amarelado, azul violeta | Do pintor (terciárias) | Moderna, menos esperada |
| Vermelho, verde, azul | De ecrã (RGB) | Técnica, estridente na intensidade máxima |
| Ciano, magenta, amarelo | De ecrã (RGB) | Com ar de impressão, divertida |

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

- Azul marinho (azul): #1e3a8a
- Mostarda (amarelo): #d4a017
- Tijolo (vermelho): #b91c1c
- Azeitona (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 máxima para ficarem juntas 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 apenas onde queres 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-pt/guide/60-30-10-rule).

- Terços iguais: em 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 azeitona 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 numa paleta.

Que cor deve liderar? Normalmente a mais escura ou a menos saturada, porque grandes áreas de uma cor viva cansam. Guarda a mais viva para o acento. Se a cor da tua marca faz parte da tríade, é muitas vezes a líder óbvia.

## Suavizar uma tríade

A segunda ferramenta é a saturação. Mantém uma cor forte e puxa as outras duas para o cinzento, mais escuras ou mais claras. A estrutura da tríade sobrevive, por isso a paleta continua equilibrada, mas perde o brilho de escola primária. Muitas paletas editoriais e de tradição são tríades disfarçadas: marinho, ocre e tijolo, ou azeitona, 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 divertida.

## Onde funcionam as paletas triádicas

As tríades servem marcas e projetos que querem transmitir energia, inclusão ou diversão sem parecerem 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 produtos, três níveis de curso ou três tipos de evento, porque cada cor está o mais longe possível das outras duas.

- **Três categorias:** dá a cada uma a sua cor da tríade e mantém os layouts idênticos, para que a cor faça a separação.
- **Uma marca, uma líder:** usa a cor líder em todo o lado e traz as outras duas para ilustrações, gráficos e destaques.
- **Cartazes e embalagens:** uma tríade suavizada sobre um neutro quente dá um ar impresso de meados do século. Planeia as cores para tinta; vê [imprimir gradientes](https://gradiently.design/pt-pt/guide/print-gradients).
- **Interfaces:** guarda a tríade para estados e ilustrações e deixa os neutros sustentar os ecrãs, ou todas as páginas vão parecer barulhentas.

## Cores complementares divididas

Um esquema complementar dividido parte de um tom e, em vez do seu oposto direto, usa os dois tons de cada lado desse oposto. Manténs a maior parte do contraste de um [par complementar](https://gradiently.design/pt-pt/guide/complementary-colors) mas perdes o choque frontal, e ganhas uma terceira cor para trabalhar. É um dos esquemas mais tolerantes para quem está a começar.

- 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 de cada lado dele, lima e âmbar.

- **Cor base:** a líder, usada na maior parte do design.
- **Primeira cor dividida:** apoio, em áreas menores ou numa versão mais discreta.
- **Segunda cor dividida:** o acento, usado com moderação.
- **Neutro:** um quase branco ou quase preto para segurar o conjunto.

## Cores triádicas em gradientes

Misturar as três cores de uma tríade num só gradiente obriga a mistura a passar por todos os tons entre elas, e pelo menos uma das transições costuma ficar baça. As tríades funcionam melhor como áreas separadas, ou como um gradiente de duas cores com a terceira guardada como acento.

- As três misturadas: segunda metade turva: `linear-gradient(90deg, #b91c1c 0%, #d4a017 50%, #1e3a8a 100%)`
- Marinho a tijolo, passando pela ameixa: `linear-gradient(135deg, #1e3a8a 0%, #6b2a6e 55%, #b91c1c 100%)`
- Mostarda como acento de aresta viva: `linear-gradient(135deg, #1e3a8a 0%, #6b2a6e 50%, #b91c1c 86%, #d4a017 86%, #d4a017 100%)`

Duas cores da tríade misturam-se; a terceira fica à parte. A metade do amarelo para o azul no primeiro exemplo mostra porquê.

## Erros nas paletas triádicas

### Evita

- Três cores saturadas em quantidades iguais
- Texto na cor de acento
- As três misturadas num só gradiente
- Nenhum neutro para descansar o olhar

### Faz

- Uma líder, uma de apoio, um acento
- Texto num neutro com contraste forte
- Áreas separadas, ou duas misturadas e um acento
- Um quase branco ou quase preto ao lado

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

## FAQ

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

As cores triádicas são três tons distribuídos de forma igual à volta do círculo cromático, cada um a um terço do círculo dos outros, como o vermelho, o amarelo e o azul no círculo do pintor.

### Como se usa um esquema de cores triádico?

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

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

Um tom base mais os dois tons de cada lado 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 tons opostos; as triádicas usam três tons distribuídos de forma igual à volta do círculo. As tríades são mais variadas e normalmente um pouco menos tensas.