Design para programadores - Cores

Design é uma área que muitos programadores acabam por ter bastante dificuldade em lidar, em alguns casos, a pessoa pode achar que não leva jeito para isso, que ela não tem criatividade, que ela não sabe desenhar (mesmo que essas áreas não tenham tanto assim em comum), que ela funciona melhor com lógica e números, enfim, diversos motivos diferentes, eu mesmo nunca me considerei como tendo uma grande veia artistica, entretanto existem coisas sim que podemos aprender sobre design (muitas na verdade), e inclusive utilizar lógica para lidar com isso, em favor de pelo menos não entregar algo que não sangre aos olhos dos usuários, ou pelo menos entender melhor o trabalho entregue a nós pelos designers com quem trabalhamos.

Algo que a área de design tem em comum com a de programação é que eles também seguem princípios e padrões por lá, e um dos princípais pílares do design visual seriam as cores, sendo isso que iremos explorar hoje.

O circulo cromático

Quando passamos pelo ensino básico, nas aulas de artes, certamente você já deve ter tido uma aula sobre as cores, aprendendo que existem as cores primárias, as secundárias - formadas pela combinação entre as primárias, e, dependendo, até mesmo as cores terciárias - formadas pela combinação entre as primárias e as secundárias - em diante.

Dessa forma, se organizarmos como essas cores se relacionam na forma de um circulo, conseguimos o circulo cromático, algo como:

Organizando elas dessa forma podemos utilizar essas relações entre as cores para formar as nossas paletas de cores. Aqui uma dica seria manter a quantidade de cores entre 1 e 3, isso desconsiderando as variantes de uma cor em específico, por exemplo se escolhermos azul, verde e roxo, as nossas 3 cores seriam essas, mas poderíamos ter azul escuro e verde claro na paleta também, de fato, paletas monocromáticas são baseadas em pegar uma cor, e derivar variações dela.

Vale lembrar que diferentes sistema de representação de cores vão mapear para circulos cromáticos diferentes, visto que eles são só sistemas de coordenadas para que o computador possa representar as cores, e é por isso que nós temos sistemas diferentes no CSS como: RGB, HSL, Hexadecimal, e etc. O circulo apresentado anteriormente segue a ideia de que as cores primárias são: Azul, Amarelo, e Vermelho, entretanto no computador, as cores são representadas pelo sistema RBG, então as cores primárias seriam: Vermelho, Azul, e Verde, por isso o circulo cromático usado pelo CSS seria algo próximo a esse daqui:

Montando uma paleta de cores

Decidir uma paleta de cores não é uma tarefa fácil, mas também não é algo totalmente abstrato onde nós precisamos sentir algo para conseguir criá-la. Existem inumeras técnicas para escolher quais cores vão fazer parte dela.

Paleta monocromática

A escolha mais simples é simplesmente pegar uma cor só, por exemplo a cor princípal da logo do sistema sendo trabalhado, e derivar o resto das variações dela utilizando cálculos, algo que podemos fazer graças a um dos sistemas de cores suportados pelo CSS: o HSL.

Derivando variações de uma cor

O HSL é um sistema onde dizemos qual cor nós queremos, informando o Hue, que significa qual cor no circulo cromático queremos usar por meio de um valor em graus, depois a Saturação, que seria o quanto daquela cor queremos aplicar (por isso que deixar a saturação em 0 deixa as fotos cinza no photoshop, e que dizemos que uma foto com cores muito fortes está muito saturada), e por fim a Luz, sendo o quão clara ou escura aquela cor vai ser (0 é preto e 100 é branco para qualquer cor). Ex:

div {
  background: hsl(0, 100%, 50%);
}

Nesse exemplo estamos representando o vermelho puro, pois 0 corresponde ao vermelho, estamos aplicando o máximo de vermelho possível com o 100% na saturação, e com 50% de luz estamos bem no meio entre preto e branco.

Um truque aqui é considerar saturação como inversamente proporcional a luz, então quanto mais escura uma cor, mais saturada ela deve ser, e quanto mais clara, menos saturada.

Assim é possível ir criando uma transição natural entre os tons, ao ponto de se colocar cada tom lado-a-lado é possível ver a formação de um degradê.

Isso é bem útil para gerar as variantes, mas também para conseguir variações de preto e branco, visto que uma técnica muito comum entre os designers é nunca usar preto ou branco puros, e sim versões mescladas com as cores sendo utilizadas para quando elas forem combinadas na interface, a composição final parecer mais harmoniosa.

Cores complementares

Aqui seria como aquele ditado: os opostos se atraem. Podemos combinar cores que são opostas uma da outra no circulo cromático, por exemplo vermelho e verde no sistema tradicional, ou azul e amarelo no RGB.

Vale lembrar que por essas cores serem completos opostos uma da outra, é interessante utilizar a técnica mencionada na seção anterior para combinar cores com valores de saturação e luz diferentes, dessa forma a diferença entre elas vai ser amenizada, evitando combinações famosas por agredirem os olhos. Caso as saturações sejam iguais, o efeito tende a ser o contrário, fazendo as cores colidirem ao invés de se combinarem na interface, causando desconforto em quem vê.

Essa combinação é particularmente útil para formar paletas com duas cores, e pode ser formada a partir de qualquer cor, pois considerando que o círculo tem 360 graus, podemos pegar qualquer valor de Hue, e adicionar mais 180, afinal metade de 360 é 180, dessa forma parando no exato oposto dessa cor no círculo cromático.

Tríade e Quadrado em diante

Seguindo o aumento na quantidade de Hues escolhidas, caso você queira formar uma paleta de 3 cores, uma opção é seguir a lógica das cores complementares, e dividir os 360 graus por 3, obtendo 120, dessa forma começando com 1 cor e ir somando 120 até ter as 3 cores.

Essa é uma abordagem onde você consegue as 3 cores primárias se começar por uma delas, ou as 3 secundárias caso começa por uma secundárias.

Se você tiver 4, pode formar um quadrado, se ir somando de 90 em 90 graus, de fato, se você pegou a lógica até aqui pode escalar isso para quantas cores você tiver na sua paleta simplesmente dividindo 360 (o circulo todo), pela quantidade de cores que você tiver.

Cores análogas

Outra forma de lidar com várias cores de uma vez só, seria utilizar os vizinhos no circulo para formar a sua paleta, voltando as aulas de arte, nós aprendemos sobre esse tipo de agrupamento quando pensamos nas cores quentes e nas cores frias.

Nesse modelo, o tamanho do pulo funciona bem seria somar ou subtrair 30 graus de cada vez, e ele funciona bem pois cada cor seria o próximo passo no circulo, assim sendo uma combinação natural para os nossos olhos.

Aplicando a paleta

Agora que já montamos a nossa paleta de cores, podemos aplicar ela no nosso projeto seguindo uma técnica conhecida como princípio 60-30-10, nesse modelo nós escolhemos uma cor primária, uma cor secundária, e uma cor de acento (normalmente chamada de accent). Por isso que paletas de até 3 cores são preferíveis, mas caso você tenha 4 ou mais, você pode dividir as cores que sobrarem entre as cores secundárias e de acento.

Nesse tópico vai ser necessário um pouco mais de sensibilidade para aplicar a técnica, pois não existe bem uma forma de calcular os valores, mas depois de um pouco de treino com esse princípio em mente, as coisas tendem a ficar mais fáceis, até porque você não precisa dividir perfeitamente.

A cor primária vai ser a cor predominante na sua interface, a princípal, ela vai ser a cor mais aparente quando se olhar para a tela, e por isso você deveria utilizar ela em cerca de 60% da sua interface.

A cor secundária seria a cor utilizada para dar contraste a cor primária, e enquanto ela ainda vai ser bem perceptível na tela, deve ser utilizada com parcimonia, em cerca de 30% das coisas.

Já a cor de acento seria a cor que você utiliza para os detalhes, e deve ser utilizada com ainda mais cuidado que as secundárias, estando presente em apenas 10% da tela.

(Não deixe de conferir o artigo original desta imagem no [uxmisfit.com]

Conclusão

Espero que tenha gostado do artigo de hoje, não se esqueça de compartilhar com aquele seu amigo que sofre para escolher uma paleta de cor, e até a próxima.

Links que podem te interessar

• [Usando cores na prática do uxmisfit.com]- Princípio 60-30-10 no UX Planet
• Adobe Color - Um site que cria paletas de cores
• Um guia em mais detalhes para designers
• Sobre criar shades via HSL
• HSL no MDN
• Sobre sistemas de cores

Ass: Suporte cansado...