Paleta de cores
Como construir uma paleta de cores para interfaces de produtos digitais
Cores básicas
Paleta neutra
As cores neutras são muito utilizadas na tipografia da interface e também em superfícies, sombras, divisórias, bordas e até na iconografia em alguns momentos.
Cores da marca
Cor primária
Em qualquer interface destacamos os principais componentes e elementos com a cor predominante da marca ou produto.
Por exemplo, se a cor principal da marca é azul, os botões, controles, fundos e ícones de destaque serão nessa cor.
Cor secundária
Além da cor principal, muitas marcas possuem uma segunda cor para contraste ou apoio da identidade visual.
Cores de suporte
Assim como um semáforo exibe cores básicas e de fácil compreensão, nas interfaces também podemos utilizá-las para o usuário entender o que elas significam.
Cor de erro/perigo
É muito comum em várias interfaces vermos o uso da cor vermelha para indicar uma mensagem de erro, um campo obrigatório não preenchido, um botão de excluir um item, etc.
Cor de alerta
Em momentos onde precisamos informar ao usuário de algo importante, podemos utilizar a cor amarela para destacar um balão de alerta, um campo inválido, etc.
Cor de sucesso
E como vemos em várias interfaces diariamente, é bastante comum o uso da cor verde para representar uma compra realizada, a finalização de um cadastro, entre outras situações.
Construindo uma paleta e cores
Conhecendo as principais cores que compõe todas as paletas de uma interface, vamos ver na prática como é construir essas escalas de cores.
Tudo começa com uma cor principal
Para criar todas as paletas partimos de uma cor central para criar tons mais claros e tons mais escuros.
Escala de cores
Utilizamos essa maior quantidade de tons das cores para criar as hierarquias de conteúdo, destacar elementos, criar sutileza para os elementos, criar as diferenças de superfícies e principalmente em momentos das interações do usuário ao utilizar os componentes.
Falando um pouquinho mais sobre essas interações, um bom exemplo da variedade de cores é quando o usuário passa o mouse por cima de um botão e ele fica mais claro, e quando clica, o componente fica mais escuro.
Quantidade de tons
A escala composta por 9 cores é uma das mais populares em várias styleguides. Essa escala que ficou muito famosa com o Material Design do Google. Mas não necessariamente essa quantidade seja obrigatória, mas quanto maior for a variedade, melhor será a possibilidade de combinação.
Clareando e escurecendo a cor principal
Existem diversas técnicas e ferramentas para criar essa escala de tons a partir de uma cor central.
Extraindo as cores manualmente
Você pode clarear/escurecer a cor manualmente diretamente no painel de cor da ferramenta de design.
Luz e brilho
você também pode usar a técnica de clarear ou escurecer alterando os valores de porcentagem de luz no padrão HSL e controle de brilho no padrão HSB de escala de cor.
Sobrepondo camadas
Ou também é possível sobrepor uma camada de branco/preto por cima e ir regulando a opacidade pra chegar nos tons desejados e depois pegar a cor resultante com o conta-gotas para pegar a cor sólida.
O legal essa técnica utilizando porcentagem é que você pode controlar a opacidade para mais ou para menos para chegar nos tons perfeitos.
Usando ferramentas
Uma ferramenta muito prática e fácil de usar diretamente de seu navegador é a Scale. Super recomendo utilizar:
O resultado
Ao construir sua paleta com os tons desejados, bastar organizá-las para ter um mapeamento de todas as cores do projeto. No exemplo a seguir temos as seguintes paletas:
Paleta neutra para as cores de textos, bordas, etc;
Primária como cor principal de uma marca;
Secundária como cor de apoio da marca;
Cores de erro, alerta e sucesso;
Cores básicas para usar quando necessário.
Continue lendo…
