18 mar Teoria das cores: guia básico

Escolher combinações de cores adequadas e criar estéticas agradáveis e funcionais usando os princípios da teoria das cores é uma das funções do designer gráfico.

Resumidamente a teoria das cores se refere às diretrizes práticas de mistura de cores permitindo combinações harmoniosas e visualmente atraentes.

 

Por que você deve se preocupar com a teoria das cores?

A teoria das cores é uma mistura de ciência, psicologia e emoção – tornando a cor um aspecto incrivelmente poderoso do design.

Isaac Newton, no século XVII, começou com uma roda de cores baseada em como a luz refletia um espectro de cores. A teoria das cores e a roda de cores continuaram a evoluir, nos ensinando mais sobre a ciência por trás do porquê de certas cores se complementarem.

Com o tempo, a psicologia das cores também influenciou o design. Uma combinação de elementos culturais, históricos e emocionais pode determinar como os humanos se sentem quando veem cores diferentes. Vamos conhecer os conceitos básicos:

 

Cores primárias (padrão CMYK)

As cores primárias formam a base para todos os outros tons. Os humanos percebem três cores básicas: magenta, ciano e amarelo. Todas as outras cores que vemos consistem em uma combinação dessas três cores em quantidades variadas, brilhos, matizes e tons.

Aqui temos uma polêmica: tradicionalmente, considerávamos vermelho, azul e amarelo como as cores primárias, mas pesquisas mostraram que magenta, ciano e amarelo descrevem melhor nossa experiência com cores.

A imagem acima mostra as cores Ciano, Magenta, Amarelo e Preto (CMYK, em inglês) e é utilizada para produção de materiais impressos. Sua proposta é reproduzir, da maneira mais fiel possível, a maioria das cores do espectro visível e é por isso que é o esquema oficial do universo gráfico.

 

RGB e hexadecimal

Na web, usamos valores RGB (Red, Green, Blue) e hexadecimais para representar cores.

O sistema de cores RGB define todas as cores como uma combinação de três valores diferentes: um determinado tom de vermelho, outro de verde e outro de azul. Então:

• RGB (59, 89, 145) é igual ao azul do Facebook
• RGB (0, 0, 0) é igual a preto
• RGB (255, 255, 255) é igual a branco

 

O sistema de cores hexadecimais converte cada valor em uma representação hexadecimal (base 16), assim:

• #3b599b é igual ao azul do Facebook
• #000000 é igual a preto
• #ffffff é igual a branco

 

Cada dois caracteres representa um valor de cor, portanto, para o azul do Facebook, o tom vermelho é 3b, o verde é 59 e o 9b é azul.

 

Quente e frio

As cores têm temperatura e podem ser classificadas em quentes ou frias.

As cores quentes contêm maiores quantidades de vermelhos e amarelos. Elas podem invocar uma sensação de calor e paixão em um trabalho, como também podem passar agressividade e ousadia ​​– é por isso que o vermelho é frequentemente usado em mensagens de erro.

As cores frias contêm maiores quantidades de azul, representando climas frios, gelo, inverno, água, noite, morte e tristeza. Elas podem carregar conotações de solidão, frieza e medo. No lado mais positivo, as cores frias são menos agressivas e podem ser calmantes – pense em um céu azul ou águas azuis tranquilas em uma praia.

 

Luz e sombra

Variações de luz e sombra permitem que você crie esquemas de cores monocromáticos adicionando níveis de branco e preto a uma cor base.

Por exemplo, se sua cor base for #8dbdd8 (um azul claro) como visto na imagem abaixo, você pode criar um esquema monocromático escolhendo dois tons mais claros (à direita) e dois tons mais escuros (à esquerda).

 

Saturação

A saturação descreve a intensidade de uma cor. Aumentar a saturação torna a cor mais rica e escura, enquanto a redução da saturação faz com que pareça desbotada e mais clara. Quando dizemos “vermelho claro” ou “vermelho escuro”, estamos descrevendo mudanças na saturação.

 

A roda de cores

Cada fatia da roda representa uma família de cores que podem ser alcançadas com diferentes misturas de cores. Existem algumas fórmulas que são consideradas mais “seguras”, pois criam um efeito mais harmônico sem precisar de muito conhecimento. Veja abaixo:

 

1. Monocromático

Um esquema de cores monocromático consiste em vários tons, matizes e saturações de uma única cor base. Eles são muito coesos, mas correm o risco de se tornarem monótonos.

 

2. Complementar

Esquemas de cores complementares são baseados em duas cores de lados opostos da roda de cores. Como os dois tons serão muito diferentes, esse esquema pode ser bem impactante e perceptível.

 

3. Análogo

Esquemas de cores análogos apresentam cores que ficam próximas na roda de cores. Devido às semelhanças tonais, esses esquemas podem criar uma sensação muito coesa e unificada, sem a monotonia de um esquema monocromático.

 

4. Triádico

Para fazer um esquema de cores triádico, desenhe um triângulo equilátero na roda de cores e selecione as três cores nos pontos do triângulo. Essa tríade cria um esquema diversificado, porém equilibrado.

 

Criação e inspiração de paleta de cores

Há muitas ferramentas de seleção de cores e geradores de paletas que podem dar bastante inspiração. Ferramentas como Colordot permitem que você comece com uma cor principal ou algumas opções de cores e depois crie um esquema para você. Por outro lado, ferramentas como Coolors criam paletas com base no tipo de esquema de cores que você deseja. Eu costumo usar o Color Adobe.

O bom uso das cores pode evocar emoções e estabelecer a identidade da marca. Pense em marcas que você poderia reconhecer apenas pela cor como Coca-Cola, Starbucks, Facebook e Mcdonalds ou naquelas que usam composições como Microsoft, Google e Shell. Tudo vai depender do tipo de mensagem que você deseja passar.

…..

Fontes:
webflow.com e promtec.com.br

Foto principal:
Adhemas