# Harmonia das cores: por que algumas cores combinam

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

O círculo cromático oferece seis esquemas clássicos. Eles ajudam, mas são só metade da harmonia. A outra metade é luminosidade, saturação e quanto de cada cor você usa.

## The short version

- Harmonia das 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 matiz sozinhas não garantem harmonia: as cores também precisam 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 cada cor.
- Cores que compartilham um subtom, como um toque de calor ou do mesmo matiz, tendem a parecer relacionadas mesmo quando estão distantes no círculo.

**Harmonia das cores** é a sensação de que um grupo de cores pertence ao mesmo lugar. Designers costumam construí-la de duas formas: escolhendo matizes que têm uma relação conhecida no círculo cromático, como vizinhas ou opostas, e equilibrando todo o resto, ou seja, luminosidade, saturação e quanto aparece de cada cor. Acerte a primeira e erre a segunda, e o resultado ainda incomoda. Acerte as duas, e até combinações incomuns parecem calmas e intencionais.

## O círculo cromático e por que ele ajuda

O círculo organiza os matizes em volta de um anel, e as relações viram geometria. Vizinhas compartilham boa parte da mesma luz e se misturam suavemente; opostas não compartilham nada e fazem uma à outra parecer mais intensa. Toda harmonia clássica é uma forma desenhada sobre o círculo. Se o círculo ainda é novidade para você, comece pelo [círculo cromático](https://gradiently.design/pt-br/guide/color-wheel).

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

Matizes de intensidade moderada em volta de um círculo. Cada harmonia abaixo é um padrão de pontos neste anel.

## As seis harmonias de cores clássicas

Aqui está cada esquema construído a partir da mesma base verde-azulada, `#30a69c`, para você ver como a relação muda o clima enquanto a cor inicial continua a mesma.

- 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 matizes do esquema com a mesma saturação. Repare como os esquemas ficam mais barulhentos à medida que os matizes se afastam.

| Harmonia | Matizes no círculo | Sensação | Parte mais difícil |
| --- | --- | --- | --- |
| Monocromática | Um matiz, vários níveis de luminosidade | Calma, refinada, unificada | Evitar que fique sem graça |
| [Análoga](https://gradiently.design/pt-br/guide/analogous-colors) | Três vizinhas, cerca de 30 graus de distância | Natural, quente ou fria, fácil | Conseguir contraste suficiente |
| [Complementar](https://gradiently.design/pt-br/guide/complementary-colors) | Duas opostas, a 180 graus | Ousada, enérgica | Impedir que as cores briguem |
| Complementar dividida | Uma base e as duas vizinhas da sua oposta | Viva, mas mais suave que a complementar | Escolher qual cor lidera |
| [Triádica](https://gradiently.design/pt-br/guide/triadic-colors) | Três matizes, a 120 graus | Divertida, equilibrada | Parecer infantil na intensidade máxima |
| [Tetrádica](https://gradiently.design/pt-br/guide/tetradic-colors) | Dois pares complementares | Rica, complexa | Manter quatro cores unidas |

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

Uma regra prática para escolher: quanto menos matizes e mais próximos, mais fácil chegar à harmonia. 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 a seguir.

## Harmonia também é luminosidade e saturação

Olhe a faixa triádica acima. Os matizes são de manual, mas na mesma intensidade parecem uma caixa de brinquedos. Isso acontece porque o círculo só descreve o matiz. Duas outras propriedades decidem se as cores realmente ficam bem juntas.

- **Luminosidade:** um conjunto harmonioso costuma ir do claro ao médio e ao escuro. Cinco cores com a mesma luminosidade se confundem; uma variação dá ao olho onde descansar e algo para ler.
- **Saturação:** deixe a maioria das cores calmas e só uma viva. Quando todas estão na intensidade máxima, elas competem, e o esquema vira ruído.
- **Subtom em comum:** cores que puxam todas um pouco para o quente, ou que carregam um traço do mesmo matiz, parecem relacionadas mesmo quando estão longe no círculo. Acrescentar um pouco da cor principal aos neutros é o jeito mais rápido de chegar lá.

- 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 níveis de luminosidade, os neutros carregam um traço dele, e o vermelho oposto vira um único destaque coral.

Para fazer esses ajustes por número, use um formato que separe luminosidade de matiz. O HSL é a escolha conhecida; o [OKLCH](https://gradiently.design/pt-br/guide/oklch-explained) mantém a luminosidade mais estável quando você muda o matiz, o que torna esquemas equilibrados muito mais fáceis de montar.

## Proporção: deixe uma cor liderar

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

### Briga

- Áreas iguais de cada cor
- Todas as cores na saturação máxima
- Todas as cores com a mesma luminosidade
- Neutros cinza puro ao lado de cores quentes
- Opostas se tocando ao longo de bordas compridas

### Harmoniza

- Uma cor claramente dominante
- Um destaque vivo, o resto mais calmo
- Uma variação do claro ao escuro
- Neutros tingidos com o matiz principal
- Opostas separadas por espaço ou por um neutro

Um post retrato do Instagram anunciando um ateliê de cerâmica aberto no sábado, sobre um fundo em gradiente

Um Mark: repare qual cor lidera, quanto do quadro ela cobre e onde o texto descansa.

O mesmo post do ateliê aberto sobre um segundo fundo em gradiente com outra família de cores

Um segundo Mark com as mesmas palavras. A relação entre as cores muda o clima; a mensagem continua a mesma.

## Como montar uma paleta harmoniosa na prática

1. **Comece por uma cor que signifique algo** Uma cor de marca, um produto, um lugar. A harmonia é mais fácil em torno de um ponto fixo do que do zero.
2. **Escolha uma relação para o clima** Análoga para calma, complementar ou complementar dividida para energia, monocromática para contenção.
3. **Espalhe a luminosidade e acalme a saturação** Crie uma versão clara, uma média e uma escura, depois reduza a saturação de tudo, menos do destaque.
4. **Defina as proporções** Diga qual cor cobre a maior parte do espaço, qual dá apoio e qual aparece só em pequenos toques.
5. **Teste com palavras reais** Coloque a paleta num layout real e confira o contraste do texto. Uma harmonia que não segura um título não está pronta.

Se você prefere começar de uma paleta já equilibrada, cada Mark do Gradiently é um fundo vivo pronto, cujas cores, materiais e luz foram compostos juntos, e o Studio coloca suas palavras sobre ele com a tinta automática escolhendo texto claro ou escuro em cada linha. Para gerar a sua do zero, veja [geradores de paleta de cores](https://gradiently.design/pt-br/guide/color-palette-generator).

## FAQ

### O que é harmonia das cores?

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

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

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

### Qual harmonia de cores é a mais fácil de usar?

Os esquemas monocromáticos e análogos, porque os matizes ficam próximos e raramente brigam. Eles precisam de uma boa variação de luminosidade para não ficarem sem graça.

### Por que minhas cores complementares brigam?

Geralmente as duas estão na saturação máxima e em quantidades iguais. Deixe uma dominar, acalme a outra até virar destaque e separe as duas com um neutro.