Um humilde guia sobre paleta de cores

Sempre que começo um projeto, seja pessoal ou de trabalho, passo um bom tempo escolhendo cores.

Normalmente fico pulando entre o Coolors, o Adobe Color e o Color Hunt até achar algo que combine com a ideia. Funciona, mas conforme o projeto vai tomando forma, a paleta começa a parecer de outra pessoa. Quando isso acontece, eu paro e monto uma paleta do zero, usando alguns conceitos que fui aprendendo pelo caminho.

Hoje vamos fazer isso juntos, criando a paleta de cores de uma landing page simples. Antes, vale pensar um pouco no que considerar na hora de escolher as cores.

Psicologia das cores

Assim como as notas de uma escala musical, as cores conseguem passar emoções e influenciam bastante o que a gente pensa e sente.

O vermelho, por exemplo, costuma ser associado à paixão e à energia, e também pode transmitir perigo ou desejo. Já o azul é ligado à calma e passa uma sensação de paz e tranquilidade.

Ou seja, dá para usar as cores de forma estratégica para criar um clima e comunicar mensagens específicas nas nossas aplicações.

Círculo cromático

Se você trabalha com cores, seja em pintura, decoração, moda ou, no meu caso, web design, o círculo cromático é uma ferramenta básica. Ele é uma representação gráfica das cores, organizada de um jeito que deixa claro como elas se relacionam.

Ele tem 12 cores principais:

• Três cores primárias: vermelho, azul e amarelo
• Três cores secundárias: verde, laranja e roxo
• Seis cores terciárias: amarelo-alaranjado, vermelho-alaranjado, vermelho-púrpura, azul-púrpura, azul-esverdeado e amarelo-esverdeado

Aí vem a pergunta: "tá, mas como eu uso isso na prática?". Vamos ver algumas combinações.

Cores complementares

As cores que ficam em lados opostos do círculo cromático são chamadas de complementares. Lado a lado, elas criam um contraste forte, o que ajuda a destacar os elementos mais importantes da aplicação.

Tríade

Uma variação das complementares é a tríade, também chamada de cores complementares decompostas. Em vez de pegar duas cores em lados opostos, a tríade usa três cores igualmente espaçadas no círculo.

Cores análogas

Cores análogas são as que ficam lado a lado no círculo cromático. Elas combinam naturalmente entre si e deixam o visual mais suave.

Propriedades das cores

A gente percebe cada cor como uma combinação de três propriedades: matiz, brilho e saturação.

Matiz (hue) é a característica principal da cor, o que faz a gente chamar uma cor de vermelho, verde, azul e assim por diante.

Brilho é a intensidade da luz refletida por uma superfície. Uma cor com muito brilho parece clara, e uma com pouco brilho parece escura.

Saturação é a pureza da cor, ou seja, o quanto ela se aproxima da cor pura do espectro visível. Uma cor bem saturada parece viva e intensa, enquanto uma cor pouco saturada fica pálida e meio sem graça.

Juntas, essas três propriedades definem a aparência de qualquer cor.

LaLhama Colchões

Com esses conceitos em mente, vamos montar a paleta de uma marca fictícia de colchões chamada "LaLhama".

Eu costumo começar escolhendo uma única cor para representar a marca e o que quero que as pessoas sintam. Para a LaLhama, escolhi um azul mais clarinho, delicado e amigável. Segundo a psicologia das cores, ele traz uma sensação de proteção, tranquilidade e limpeza, que é bem o que uma marca de colchões quer passar.

Com a cor da marca definida, preciso de uma segunda cor que faça contraste e ajude a criar pontos de foco na página. Olhando o círculo cromático, fui para o lado oposto do azul e escolhi um laranja meio amarronzado, meio esquisito.

Gerando os tons

Nas aplicações, é comum precisar de vários tons da mesma cor para situações diferentes, como as caixinhas de informação que apareceram algumas vezes neste post.

Eu defino esses tons assim:

1. Crio nove quadrados lado a lado, numerados de 100 a 900, e coloco a cor escolhida na posição central (500).

2. Usando as propriedades das cores, defino o tom mais claro e o mais escuro. Para o mais claro, aumento um pouco o brilho e diminuo bastante a saturação. Para o mais escuro, faço o contrário: diminuo bastante o brilho e ajusto um pouco a saturação. A matiz fica igual, porque é ela que define a cor.

3. Com as duas pontas definidas, preencho os tons do meio ajustando a saturação e o brilho aos poucos, até a transição ficar natural.

4. Repito o processo com a cor secundária e pronto, temos todas as variações que vamos usar.

Fechando a paleta

No fim, a LaLhama ficou com um azul claro como cor principal, um laranja como cor de destaque e um punhado de cores de suporte, cada uma com sua escala de tons. Nada disso saiu de um gerador de paletas, e cada escolha tem um motivo.

Quer ver essa paleta aplicada? Montei a landing page da LaLhama usando exatamente essas escalas de azul e laranja.

Da próxima vez que uma paleta pronta parecer genérica demais, tenta partir de uma cor só e construir o resto com o círculo cromático. Dá mais trabalho, mas o resultado fica com a cara do projeto.