# Noções básicas de teoria das cores para quem não é designer

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

Você não precisa de faculdade de arte para escolher bem as cores. Seis ideias explicam quase toda decisão de cor, e cada uma pode ser aprendida em poucos minutos.

## The short version

- A teoria das cores é um conjunto de ideias práticas sobre como as cores se relacionam, se combinam e afetam o que as pessoas veem primeiro.
- Toda cor pode ser descrita por três propriedades: matiz, a família da cor; saturação, o quanto ela é intensa; e luminosidade, o quanto ela está perto do branco ou do preto.
- O contraste de luminosidade importa mais para a legibilidade do que o contraste de matiz, e por isso um design deve continuar funcionando em escala de cinza.
- Harmonias de cor como complementar, análoga, tríade e monocromática são posições no círculo cromático que costumam parecer equilibradas.
- A maioria das boas paletas usa uma cor dominante, uma ou duas cores de apoio e um pequeno destaque.

A **teoria das cores** é o conjunto de ideias práticas que designers usam para escolher cores que funcionam juntas e fazem o que precisam fazer. Ela se resume a seis coisas: matiz, saturação, luminosidade, temperatura, harmonia e contraste. Entenda essas seis e você consegue explicar por que uma paleta parece calma ou intensa, por que certo texto é difícil de ler e por que duas cores brigam.

Esta página é o ponto de partida de todos os artigos de cor do Guia. Cada seção leva a uma mais profunda quando você precisar.

## Matiz, saturação e luminosidade

Qualquer cor pode ser descrita com três propriedades. O **matiz** é a família da cor: vermelho, laranja, verde, azul. A **saturação** (também chamada de croma) é o quanto ela é intensa, do cinza ao vívido. A **luminosidade** é o quanto ela está perto do preto ou do branco. Mude uma mantendo as outras e você vê o que cada uma faz.

- Matiz: a família da cor: `linear-gradient(90deg, #ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444)`
- Saturação: do cinza ao violeta vívido: `linear-gradient(90deg, #939393 0%, #7c3aed 100%)`
- Luminosidade: de violeta escuro a claro: `linear-gradient(90deg, #1e0a3c 0%, #7c3aed 50%, #ede9fe 100%)`

Três propriedades, três rampas. A segunda e a terceira mantêm o mesmo matiz e mudam só uma coisa.

É assim que códigos de cor como HSL e OKLCH descrevem a cor, o que os torna fáceis de ajustar em código. [Códigos de cor explicados](https://gradiently.design/pt-br/guide/color-codes-explained) trata de HEX, RGB, HSL e OKLCH.

## Cores quentes e frias

As cores também têm temperatura. Vermelhos, laranjas e amarelos parecem quentes; azuis, verdes e violetas parecem frios. As cores quentes tendem a parecer mais próximas e enérgicas, e as frias, mais distantes e calmas. A temperatura é relativa, porém: um violeta com bastante vermelho pode parecer quente ao lado de um azul puro.

- Tijolo: #b91c1c
- Tangerina: #ea580c
- Sol: #facc15
- Verde-azulado: #0d9488
- Cobalto: #2563eb
- Violeta: #6d28d9

Três cores quentes e três frias. Uma paleta que mistura as duas costuma deixar uma temperatura liderar.

[Cores quentes e frias](https://gradiently.design/pt-br/guide/warm-and-cool-colors) vai além, inclusive sobre como misturar temperaturas em um só gradiente.

## Harmonia de cores e o círculo cromático

Organize os matizes em um círculo e algumas relações parecem equilibradas de forma confiável. Essas são as harmonias de cor. Não são regras, mas são bons pontos de partida quando você está em dúvida. O guia do [círculo cromático](https://gradiently.design/pt-br/guide/color-wheel) explica como lê-las.

| Harmonia | Onde ficam as cores | Como ela transmite |
| --- | --- | --- |
| [Monocromática](https://gradiently.design/pt-br/guide/monochromatic-color-scheme) | Um matiz em várias luminosidades | Calma, unificada, refinada |
| [Análoga](https://gradiently.design/pt-br/guide/analogous-colors) | Vizinhas no círculo | Harmoniosa, natural, fácil |
| [Complementar](https://gradiently.design/pt-br/guide/complementary-colors) | Opostas uma à outra | Alto contraste, enérgica |
| Complementar dividida | Um matiz mais os dois ao lado do seu oposto | Viva, mas menos tensa |
| [Tríade](https://gradiently.design/pt-br/guide/triadic-colors) | Três matizes igualmente espaçados | Divertida, equilibrada, ousada |

As cinco harmonias que você mais vai encontrar.

- Monocromática em azul: `linear-gradient(135deg, #1e3a8a 0%, #3b82f6 55%, #bfdbfe 100%)`
- Análoga: azul, turquesa, verde: `linear-gradient(135deg, #1d4ed8 0%, #0891b2 50%, #059669 100%)`
- Complementar azul e âmbar, via rosa: `linear-gradient(135deg, #1d4ed8 0%, #db2777 50%, #f59e0b 100%)`
- Tríade: verde, violeta, laranja: `linear-gradient(135deg, #16a34a 0%, #7c3aed 50%, #ea580c 100%)`

Cada harmonia como gradiente. Pares complementares precisam de uma cor intermediária, ou a mistura fica cinza.

## Contraste: por que algumas cores são difíceis de ler

Contraste é a diferença entre duas cores. Para a leitura, a diferença que mais importa é a de luminosidade, não a de matiz. Texto vermelho sobre fundo verde pode ter dois matizes bem diferentes e ainda ser difícil de ler, porque as duas cores podem ter luminosidade parecida. Muitas pessoas com deficiência de visão de cores não conseguem separá-las de jeito nenhum.

### Só contraste de matiz

- Vermelho sobre verde de luminosidade parecida
- Azul sobre roxo
- Laranja sobre rosa
- Some quando convertido para escala de cinza

### Contraste de luminosidade

- Quase branco sobre azul-marinho profundo
- Quase preto sobre amarelo-claro
- Tinta escura sobre um pastel claro
- Continua legível em escala de cinza

O teste da escala de cinza é a conferência mais rápida: deixe o design cinza e veja se as palavras ainda se destacam. Para texto, as Diretrizes de Acessibilidade para Conteúdo Web definem razões mínimas de contraste, 4,5:1 para texto comum e 3:1 para texto grande. [Contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility) explica como medi-las.

## Proporção: quanto de cada cor

As mesmas cinco cores podem parecer calmas ou caóticas conforme a quantidade de cada uma. Um bom padrão é uma cor dominante cobrindo a maior parte do espaço, uma ou duas de apoio e um pequeno destaque para aquilo que você quer que seja notado. A [regra 60-30-10](https://gradiently.design/pt-br/guide/60-30-10-rule) é a versão comum dessa ideia.

- Dominante: azul-marinho profundo: #0f172a
- Apoio: ardósia: #334155
- Apoio: neblina: #e2e8f0
- Destaque: laranja: #f97316

Um escuro dominante, dois apoios discretos e um destaque quente. O destaque funciona porque é raro.

## O que as cores significam

As cores carregam associações, mas essas associações são aprendidas, e não inatas, e variam com a cultura e o contexto. O verde pode significar natureza, dinheiro ou seguir; o vermelho pode significar perigo, sorte ou promoção. Trate o significado como uma pergunta sobre seu público e sua categoria, e não como um dicionário fixo. [Psicologia das cores](https://gradiently.design/pt-br/guide/color-psychology) separa o que se sustenta do que não se sustenta, e [significado das cores pelo mundo](https://gradiently.design/pt-br/guide/color-meanings-around-the-world) mostra o quanto elas diferem.

## Colocando a teoria das cores para trabalhar

1. **Comece por uma cor** Escolha a cor que mais importa: a cor da sua marca ou uma tirada de uma foto. [Tirar uma paleta de uma imagem](https://gradiently.design/pt-br/guide/color-palette-from-image) ajuda.
2. **Escolha uma harmonia** Decida se a paleta deve ser calma (monocromática ou análoga) ou enérgica (complementar ou tríade).
3. **Monte uma faixa de luminosidade** Acrescente uma versão muito escura e uma muito clara para texto e fundos. A maioria das paletas falha por não ter essas duas.
4. **Defina as proporções** Decida qual cor domina, qual dá apoio e qual é o destaque.
5. **Teste o contraste e o contexto** Confira o contraste do texto, faça o teste da escala de cinza e veja a paleta em um layout real, não só como amostras.

Para o trabalho de marca, [como escolher as cores da marca](https://gradiently.design/pt-br/guide/how-to-choose-brand-colors) transforma esses passos em um método completo.

## FAQ

### O que é teoria das cores?

A teoria das cores é um conjunto de ideias práticas sobre como as cores se relacionam, como se combinam em paletas harmoniosas e como o contraste afeta o que as pessoas veem e leem.

### Quais são as três propriedades da cor?

Matiz, a família da cor; saturação, o quanto ela é intensa ou acinzentada; e luminosidade, o quanto ela está perto do preto ou do branco.

### Quais são as principais harmonias de cor?

Monocromática, análoga, complementar, complementar dividida e tríade. Cada uma descreve onde as cores ficam no círculo cromático umas em relação às outras.

### O que importa mais para a legibilidade, matiz ou luminosidade?

A luminosidade. O texto precisa de uma diferença clara de luminosidade em relação ao fundo, e por isso um design legível continua funcionando quando convertido para escala de cinza.

### As cores têm significados universais?

Não. As associações de cor são aprendidas e diferem entre culturas, categorias e contextos, então confira-as com o seu público.