Resumindo
- 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.
Nesta página
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.
É 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 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.
Cores quentes e frias 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 explica como lê-las.
| Harmonia | Onde ficam as cores | Como ela transmite |
|---|---|---|
| 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 | Alto contraste, enérgica |
| Complementar dividida | Um matiz mais os dois ao lado do seu oposto | Viva, mas menos tensa |
| Tríade | Três matizes igualmente espaçados | Divertida, equilibrada, ousada |
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 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 é a versão comum dessa ideia.
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 separa o que se sustenta do que não se sustenta, e significado das cores pelo mundo 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 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 transforma esses passos em um método completo.
Perguntas frequentes
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.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
