Como escolher a paleta de cores do meu projeto UI?

São tantas tonalidades, combinações e possibilidades, que muitas vezes escolher a paleta ideal para o seu projeto se torna uma tarefa um pouco difícil.

Para aqueles momentos em que nossa criatividade trava, tenho certeza que essas dicas vão te ajudar!

1. Escolha a cor principal

Pra começar a criar a sua paleta, primeiro escolha a cor principal. Tenha em mente que essa cor vai ser a de maior predominância no seu projeto. É legal dar preferência para cores mais vibrantes nesse momento.

Caso você já possua essa cor (o que é comum quando usamos o tom principal do logo da marca em que estamos trabalhando), pode partir dela.

2. Escolha a segunda cor

Duplique a cor escolhida e mude o modo de cor para HSB. Deixe o valor de S (Saturation) entre 5 e 10, e o valor de B (Brightness) entre 95 e 100. Com isso você tem um tom mais vivo e outro mais claro.

3. Por fim, a terceira e última cor

Duplique novamente a primeira cor. Adicione ou subtraia de 30 a 40 pontos mais ou menos de H (Hue) e adicione 5 pontos em B (Brightness).

4. Paleta pronta!

Depois de finalizar sua paleta, é hora de distribuir a porcentagem de cada cor. Para isso, divida as três cores selecionadas dentro da regra 60/30/10 (essa regra vem do design de interiores, sabia?), onde 60% corresponde à cor dominante, 30% à cor secundária e 10% à cor de destaque.

A cor principal deve ser usada na maior parte da sua interface, auxiliando na uniformidade do seu projeto.

A secundária serve para dar contraste. Por isso, o ideal é que seja um tom mais clarinho, para balancear o tom vivo predominante.

A terceira cor será utilizada em destaques no seu projeto, como botões, títulos, ícones, etc. E é por isso que ela deve aparecer numa porcentagem menor, para realçar e destacar as informações mais importantes.

Um bom exemplo disso é o site da Netflix. Repare que o tom grafite predomina em toda a interface, com os textos em branco, e que a cor vermelha só é usada para destacar algumas informações, como o tempo visto de um episódio, a seção que o usuário está, o número de notificações no menu, etc.

Imagina se os textos estivessem todos em vermelho? Não ia ser muito agradável, né?

Agora que você já conhece essas dicas, mãos à obra! E lembre-se sempre: não adianta escolher uma paleta que você simplesmente ache bonita, mas que não funcione para o seu usuário. É ele que deve se sentir confortável com sua escolha de cores e ter a melhor experiência possível.