A versão curta
- 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.
Nesta página
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.
É 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 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.
O guia sobre cores quentes e frias 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 explica como lê-las.
| Harmonia | Onde ficam as cores | Que sensação dá |
|---|---|---|
| Monocromática | Um matiz em várias luminosidades | Calma, unificada, refinada |
| Análoga | Vizinhas no círculo | Harmoniosa, natural, fácil |
| Complementar | 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 | Três matizes igualmente espaçados | Brincalhona, equilibrada, ousada |
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 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 é a versão comum desta ideia.
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 separa o que se sustenta do que não se sustenta, e o significado das cores pelo mundo 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 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 transforma estes passos num método completo.
Perguntas frequentes
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.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
