# Harmonia de cores: porque é que algumas cores combinam

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

O círculo cromático dá-te seis esquemas clássicos. Ajudam, mas são só metade da harmonia. A outra metade é a luminosidade, a saturação e a quantidade que usas de cada cor.

## The short version

- A harmonia de cores é a qualidade de um conjunto de cores que parecem pertencer umas às outras.
- As seis harmonias clássicas são monocromática, análoga, complementar, complementar dividida, triádica e tetrádica, cada uma definida por posições no círculo cromático.
- As relações de tom, só por si, não garantem harmonia: as cores precisam também de uma distribuição sensata de luminosidade e de saturação controlada.
- Uma cor dominante com quantidades menores das outras quase sempre parece mais harmoniosa do que quantidades iguais de todas as cores.
- Cores que partilham um subtom, como um toque de calor ou do mesmo tom, tendem a parecer ligadas mesmo quando estão longe no círculo cromático.

A **harmonia de cores** é a sensação de que um grupo de cores pertence junto. Os designers costumam construí-la de duas maneiras: escolhendo tons que ficam numa relação conhecida no círculo cromático, como vizinhos ou opostos, e equilibrando tudo o resto, ou seja, a luminosidade, a saturação e a quantidade de cada cor. Se acertares na primeira e falhares na segunda, o resultado continua a destoar. Se acertares em ambas, até combinações invulgares parecem calmas e intencionais.

## O círculo cromático e porque ajuda

O círculo organiza os tons numa circunferência para que as relações se tornem geometria. Os vizinhos partilham muita da mesma luz e misturam-se com suavidade; os opostos não partilham nada e fazem-se parecer mais intensos um ao outro. Cada harmonia clássica é uma forma desenhada sobre o círculo. Se o círculo em si é novidade para ti, começa por [o círculo cromático](https://gradiently.design/pt-pt/guide/color-wheel).

Um círculo cromático: `conic-gradient(from 0deg, #e64545, #e6a645, #c8e645, #45e66a, #45e6d4, #4596e6, #6a45e6, #d445e6, #e64545)`

Tons de intensidade moderada à volta de uma circunferência. Cada harmonia abaixo é um padrão de pontos neste anel.

## As seis harmonias de cores clássicas

Eis cada esquema construído a partir da mesma base verde-azulada, `#30a69c`, para veres como a relação muda o ambiente enquanto a cor de partida fica quieta.

- Monocromática: `linear-gradient(90deg, #d7f4f1 0% 25%, #88ddd6 25% 50%, #30a69c 50% 75%, #1d635d 75% 100%)`
- Análoga: `linear-gradient(90deg, #30a661 0% 33.3%, #30a69c 33.3% 66.6%, #3075a6 66.6% 100%)`
- Complementar: `linear-gradient(90deg, #30a69c 0% 50%, #a6303a 50% 100%)`
- Complementar dividida: `linear-gradient(90deg, #30a69c 0% 33.3%, #a63075 33.3% 66.6%, #a66130 66.6% 100%)`
- Triádica: `linear-gradient(90deg, #30a69c 0% 33.3%, #9c30a6 33.3% 66.6%, #a69c30 66.6% 100%)`
- Tetrádica: `linear-gradient(90deg, #30a69c 0% 25%, #6130a6 25% 50%, #a6303a 50% 75%, #75a630 75% 100%)`

Cada faixa mostra os tons do esquema com a mesma saturação. Repara como os esquemas ficam mais ruidosos à medida que os tons se afastam.

| Harmonia | Tons no círculo | Sensação | Parte mais difícil |
| --- | --- | --- | --- |
| Monocromática | Um tom, muitos degraus de luminosidade | Calma, refinada, unificada | Evitar a monotonia |
| [Análoga](https://gradiently.design/pt-pt/guide/analogous-colors) | Três vizinhos, a cerca de 30 graus de distância | Natural, quente ou fria, fácil | Conseguir contraste suficiente |
| [Complementar](https://gradiently.design/pt-pt/guide/complementary-colors) | Dois opostos, a 180 graus | Ousada, enérgica | Impedir que as cores lutem entre si |
| Complementar dividida | Uma base mais os dois vizinhos do seu oposto | Viva mas mais suave do que a complementar | Escolher qual das cores lidera |
| [Triádica](https://gradiently.design/pt-pt/guide/triadic-colors) | Três tons, a 120 graus | Divertida, equilibrada | Parecer infantil com toda a intensidade |
| [Tetrádica](https://gradiently.design/pt-pt/guide/tetradic-colors) | Dois pares complementares | Rica, complexa | Manter quatro cores juntas |

Cada esquema tem o seu próprio artigo, com códigos e exemplos.

Um guia grosseiro para escolher: quanto menos e mais próximos os tons, mais fácil é alcançar a harmonia. Os esquemas monocromáticos e análogos quase se resolvem sozinhos. Os complementares, triádicos e tetrádicos dão mais energia, mas pedem mais disciplina nas três áreas seguintes.

## A harmonia é também luminosidade e saturação

Olha para a faixa triádica acima. Os tons são de manual, mas, com a mesma intensidade, parecem uma caixa de brinquedos. É porque o círculo só descreve o tom. Duas outras propriedades decidem se as cores assentam mesmo bem juntas.

- **Luminosidade:** um conjunto harmonioso costuma abranger valores claros, médios e escuros. Cinco cores com a mesma luminosidade esbatem-se umas nas outras; uma gama dá ao olhar onde descansar e algo para ler.
- **Saturação:** mantém a maioria das cores calmas e deixa uma só vibrante. Quando todas estão na intensidade máxima, competem, e o esquema lê-se como ruído.
- **Subtom partilhado:** cores que tendem todas ligeiramente para o quente, ou que levam todas um vestígio do mesmo tom, parecem ligadas mesmo quando estão longe no círculo. Juntar um pouco da cor principal aos neutros é a forma mais rápida de o conseguir.

- Branco esverdeado #edf3f2: #edf3f2
- Verde-azulado claro #88ddd6: #88ddd6
- Verde-azulado #30a69c: #30a69c
- Tinta verde-azulada #122b29: #122b29
- Destaque coral #e0525d: #e0525d

Um esquema complementar domado: o verde-azulado lidera em quatro degraus de luminosidade, os neutros levam um vestígio de verde-azulado e o vermelho oposto torna-se um único destaque coral.

Para fazer estes ajustes por números, usa um formato que separe a luminosidade do tom. O HSL é a escolha familiar; o [OKLCH](https://gradiently.design/pt-pt/guide/oklch-explained) é melhor a manter a luminosidade uniforme quando mudas o tom, o que torna muito mais fácil construir esquemas equilibrados.

## Proporção: deixa uma cor liderar

A maior diferença entre um design harmonioso e um caótico costuma ser a proporção, não o tom. Quantidades iguais de duas ou três cores fazem o olhar saltar entre elas. Uma cor dominante, uma de apoio e um pequeno destaque dão-lhe uma hierarquia a seguir. A [regra 60 30 10](https://gradiently.design/pt-pt/guide/60-30-10-rule) é uma divisão útil para começar.

### Destoa

- Áreas iguais de cada cor
- Todas as cores com saturação total
- Todas as cores com a mesma luminosidade
- Neutros cinzentos puros ao lado de cores quentes
- Opostos em contacto ao longo de bordas compridas

### Harmoniza

- Uma cor claramente dominante
- Um destaque vibrante, o resto mais calmo
- Uma gama do claro ao escuro
- Neutros com um toque do tom principal
- Opostos separados por espaço ou por um neutro

Uma publicação vertical de Instagram a anunciar um estúdio de cerâmica aberto ao sábado, sobre um fundo de gradiente

Um Mark: repara que cor lidera, quanto do enquadramento cobre e onde descansam as palavras.

A mesma publicação de estúdio aberto sobre um segundo fundo de gradiente com outra família de cores

Um segundo Mark com as mesmas palavras. A relação de cores muda o ambiente; a mensagem fica igual.

## Como construir na prática uma paleta harmoniosa

1. **Parte de uma cor que signifique algo** Uma cor de marca, um produto, um lugar. A harmonia é mais fácil à volta de um ponto fixo do que a partir do nada.
2. **Escolhe uma relação para o ambiente** Análoga para calma, complementar ou complementar dividida para energia, monocromática para contenção.
3. **Distribui a luminosidade e acalma a saturação** Faz uma versão clara, uma média e uma escura e depois baixa a saturação de tudo menos do destaque.
4. **Decide as proporções** Diz que cor cobre a maior parte do espaço, qual apoia e qual aparece só em pequenos toques.
5. **Testa com palavras reais** Põe a paleta num layout real e verifica o contraste do texto. Uma harmonia que não aguenta um título não está terminada.

Se preferires partir de uma paleta já equilibrada, cada Mark do Gradiently é um fundo vivo acabado cujas cores, materiais e luz foram compostos juntos, e o Studio assenta as tuas palavras nele com a Tinta automática a escolher letra clara ou escura por linha. Para gerar a tua do zero, vê [geradores de paletas de cores](https://gradiently.design/pt-pt/guide/color-palette-generator).

## FAQ

### O que é a harmonia de cores?

É a qualidade de cores que parecem pertencer umas às outras, normalmente conseguida com relações de tom no círculo cromático combinadas com luminosidade, saturação e proporção equilibradas.

### Quais são os tipos de harmonia de cores?

As seis clássicas são monocromática, análoga, complementar, complementar dividida, triádica e tetrádica.

### Que harmonia de cores é mais fácil de usar?

Os esquemas monocromáticos e análogos, porque os tons estão próximos e raramente destoam. Precisam de boa distribuição de luminosidade para não parecerem planos.

### Porque é que as minhas cores complementares destoam?

Normalmente porque ambas estão com saturação total e em quantidades iguais. Deixa uma dominar, acalma a outra num destaque e separa-as com um neutro.