Bora lá!

Combinar cores é uma das atividades mais difíceis mas também uma das mais interessantes quando estamos desenvolvendo nossos designs. Por meio das cores podemos evocar sensações, direcionar intenções e até mesmo influenciar decisões de compra.

Sabemos que nem sempre é fácil criar uma paleta de cores, e é por isso que nesse curso veremos várias formas de montar combinações coerentes e que possam agregar valor aos seus projetos.

Mas antes de entrarmos na parte prática e divertida, precisamos entender que trabalhar com cores em design digital é um pouco diferente do que trabalhar com cores no offline.

No ambiente digital você pode trabalhar com dois modelos de cores: RGB e HSB. Você provavelmente já está familiarizado com o modelo RGB (Red, Green, Blue), porque ele está presente em todos os monitores digitais e é por conta dele que você consegue ver o que está escrito aqui.

Já o HSB é o mais utilizado quando o assunto é interface! Porque ele permite ter um controle maior na cor, saturação e brilho (Hue, Saturation, Brightness).

Na imagem a seguir podemos ver como o controle do HSB é feito no Sketch App, mas em qualquer outro app você encontrará as mesmas funcionalidades.

Nas próximas aulas criaremos um framework de cores e utilizaremos o modelo HSB + opacidade para criar diferentes tipos de paletas de cores. Esse framework foi desenvolvido pelo designer Rahul Chakraborty e pode ser conferido em inglês aqui.

Alguns termos para você se familiarizar:

  • Hue é cor (azul, rosa, amarelo, etc.).
  • Chroma é a pureza de uma cor (um croma alto não tem preto, branco ou cinza adicionado).
  • Saturation é quanto de uma cor está presente. Baixa saturação significa menos cor presente e ela ficar mais próxima do branco;
  • Brightness se refere a quão clara ou escura uma cor é;
  • Opacity está relacionada a quão transparente ou opaca uma cor é (transparência alta tem opacidade baixa).
  • Tones são criados quando adicionamos cinza à uma cor tornando ela mais dura que a cor original.
  • Shades são criadas quando adicionamos preto à uma cor tornando a cor mais escura.
  • Tints são criados quando adicionamos branco à uma cor tornando-a mais clara que a original.

Na imagem acima nós temos o framework completo utilizando a técnica que aprenderemos nas próximas aulas. Também temos a exemplificação da listagem sobre os termos que você precisa conhecer.

Até a próxima aula!

⚠️ 👨🏻‍🏫

Se surgir alguma dúvida e você for inscrito no Plano Topzera, basta responder esse email para receber meu suporte em até 24 horas de segunda à sexta.

@willianmatiola
Grande abraço!
Willian Matiola, Co-Fundador da UI Lab
Instagram: @willianmatiola

uilab

Tv. Germano Magrin, 100 Ed. Pathernon Sala 501, Caixa Postal 136, Criciúma
Brazil - CNPJ 24.667.130/1000-40