# Fundamentos da teoria da cor para quem não é designer

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

Não precisas de uma escola de arte para escolher bem as cores. Seis ideias explicam quase todas as decisões de cor, e cada uma aprende-se em poucos minutos.

## The short version

- A teoria da cor é um conjunto de ideias práticas sobre como as cores se relacionam, se combinam e afetam o que as pessoas veem primeiro.
- Qualquer cor pode ser descrita por três propriedades: o matiz, a família da cor; a saturação, a sua intensidade; e a luminosidade, o quão perto está do branco ou do preto.
- O contraste de luminosidade importa mais para a legibilidade do que o contraste de matiz, e é por isso que um design deve funcionar também em tons de cinzento.
- As harmonias de cor, como complementar, análoga, tríade e monocromática, são posições no círculo cromático que parecem equilibradas de forma fiável.
- A maioria das boas paletas usa uma cor dominante, uma ou duas cores de apoio e um pequeno destaque.

A **teoria da cor** é o conjunto de ideias práticas que os designers usam para escolher cores que funcionam em conjunto e fazem aquilo que têm de fazer. Resume-se a seis coisas: matiz, saturação, luminosidade, temperatura, harmonia e contraste. Percebe-as e consegues explicar porque é que uma paleta parece calma ou ruidosa, porque é que certo texto é difícil de ler e porque é que duas cores destoam.

Esta página é o ponto de partida de todos os artigos sobre cor do Guia. Cada secção liga a uma mais aprofundada quando precisares.

## 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 croma) é a sua intensidade, de cinzento a vivo. A **luminosidade** é o quão perto está do preto ou do branco. Muda uma mantendo as outras e vês o que cada uma faz.

- Matiz: a família da cor: `linear-gradient(90deg, #ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444)`
- Saturação: cinzento a violeta vivo: `linear-gradient(90deg, #939393 0%, #7c3aed 100%)`
- Luminosidade: 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. Os [códigos de cor explicados](https://gradiently.design/pt-pt/guide/color-codes-explained) tratam de HEX, RGB, HSL e OKLCH.

## Cores quentes e frias

As cores também têm temperatura. Os vermelhos, laranjas e amarelos parecem quentes; os azuis, verdes e violetas parecem frios. As cores quentes tendem a parecer mais próximas e enérgicas, as frias mais distantes e calmas. A temperatura é relativa, porém: um violeta com muito 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 ambas costuma deixar uma temperatura liderar.

O guia sobre [cores quentes e frias](https://gradiently.design/pt-pt/guide/warm-and-cool-colors) vai mais longe, incluindo como misturar temperaturas num só gradiente.

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

Dispõe os matizes num círculo e algumas relações parecem equilibradas de forma fiável. São as harmonias de cor. Não são regras, mas são bons pontos de partida quando tens dúvidas. O guia sobre o [círculo cromático](https://gradiently.design/pt-pt/guide/color-wheel) explica como lê-las.

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

As cinco harmonias que vais encontrar com mais frequência.

- Azul monocromático: `linear-gradient(135deg, #1e3a8a 0%, #3b82f6 55%, #bfdbfe 100%)`
- Análoga: azul, verde-azulado, 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. Os pares complementares precisam de uma cor de ponto médio, ou a mistura fica cinzenta.

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

O 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 muito diferentes e ainda assim ser difícil de ler, porque as duas cores podem ter luminosidade parecida. Muitas pessoas com deficiência de visão das cores não as conseguem separar de todo.

### Só contraste de matiz

- Vermelho sobre verde de luminosidade semelhante
- Azul sobre roxo
- Laranja sobre rosa
- Desaparece quando convertido para tons de cinzento

### Contraste de luminosidade

- Quase branco sobre azul-marinho profundo
- Quase preto sobre amarelo pálido
- Tinta escura sobre um pastel claro
- Continua a ler-se em tons de cinzento

O teste dos tons de cinzento é a verificação mais rápida: passa o teu design a cinzento e vê se as palavras continuam a destacar-se. Para o texto, as Diretrizes de Acessibilidade para o Conteúdo da Web fixam rácios de contraste mínimos, 4,5:1 para texto corrente e 3:1 para texto grande. O guia sobre [contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) explica como os medir.

## Proporção: quanto de cada cor

As mesmas cinco cores podem parecer calmas ou caóticas consoante a quantidade que usas de cada uma. Um bom ponto de partida é uma cor dominante a cobrir a maior parte do espaço, uma ou duas cores de apoio e um pequeno destaque para aquilo que queres que se note. A [regra 60-30-10](https://gradiently.design/pt-pt/guide/60-30-10-rule) é a versão comum desta ideia.

- Dominante: azul-marinho: #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 significam as cores

As cores têm 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 avançar; o vermelho pode significar perigo, sorte ou saldos. Trata o significado como uma pergunta sobre o teu público e a tua categoria e não como um dicionário fixo. A [psicologia das cores](https://gradiently.design/pt-pt/guide/color-psychology) separa o que se sustenta do que não se sustenta, e o [significado das cores pelo mundo](https://gradiently.design/pt-pt/guide/color-meanings-around-the-world) mostra o quanto diferem.

## Pôr a teoria da cor a trabalhar

1. **Começa por uma cor** Escolhe a cor que mais importa: a cor da tua marca, ou uma tirada de uma foto. [Tirar uma paleta de uma imagem](https://gradiently.design/pt-pt/guide/color-palette-from-image) ajuda.
2. **Escolhe uma harmonia** Decide se a paleta deve ser calma (monocromática ou análoga) ou enérgica (complementar ou tríade).
3. **Constrói uma gama de luminosidade** Acrescenta uma versão muito escura e uma muito clara para texto e fundos. A maioria das paletas falha por falta destas.
4. **Atribui proporções** Decide que cor domina, qual apoia e qual é o destaque.
5. **Testa o contraste e o contexto** Verifica o contraste do texto, faz o teste dos tons de cinzento e vê a paleta numa composição real, não só como amostras.

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

## FAQ

### O que é a teoria da cor?

A teoria da cor é um conjunto de ideias práticas sobre como as cores se relacionam entre si, 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?

O matiz, a família da cor; a saturação, a sua intensidade ou o quão cinzenta é; e a luminosidade, o quão perto está 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, o matiz ou a luminosidade?

A luminosidade. O texto precisa de uma diferença clara de luminosidade em relação ao fundo, e é por isso que um design legível continua a funcionar quando convertido para tons de cinzento.

### As cores têm significados universais?

Não. As associações de cor são aprendidas e diferem entre culturas, categorias e contextos, por isso verifica-as com o teu público.