Como selecionar cores e determinar tonalidades para diferentes estados: Passe o mouse, Ativo, Pressione, Desative

O processo de seleção de cores para a interface pode ser complexo, especialmente quando se considera vários estados de botões, fontes e outros elementos da interface do usuário. Neste artigo, compartilharei meus métodos e princípios que ajudarão você a escolher com sucesso um esquema de cores para o seu projeto.

1. Definindo a Cor Primária

Ao projetar um site, muitas vezes é necessário escolher um esquema de cores. Às vezes, o cliente já possui uma cor de marca primária. Nesse caso, sua tarefa é selecionar cores e tonalidades adicionais que complementem a cor primária. Além da cor principal, cores adicionais são utilizadas no site para diversos fins, como indicar estados de erro, links, ilustrações, ícones ou para uso em gráficos e painéis.

2. Usando Harmonia de Cores

Para garantir que as cores se harmonizem bem, é benéfico usar vários esquemas de harmonia de cores, como monocromático, complementar, triangular e outros. Eles podem ajudar a criar uma paleta de cores harmoniosa que complemente a cor primária do projeto. Atualmente vivemos em um mundo onde a tecnologia avança rapidamente e existem serviços especiais que geram facilmente um esquema de cores. Por exemplo, eu uso color.adobe.com.

Veja como eu faço isso:

um. Selecione o esquema desejado na lista suspensa.

dois. Insira o valor da cor necessária no campo indicado como cor base

três. Determine quais cores atendem às minhas necessidades.

quatro. Transfira-os para minha área de trabalho, no meu caso, usando Figma.

3. Seleção de tons

A seguir, precisamos determinar as tonalidades de cada uma das cores selecionadas. Para selecionar tonalidades para as cores escolhidas, você pode utilizar serviços específicos que podem auxiliar nesse processo. Existem duas maneiras de determinar tons para suas cores:

O primeiro método envolve uma fórmula mais complexa:

1. Escolha a cor do cabeçalho (não necessariamente preto).
2. Mude para o modo HLS.
3. Pule a primeira célula, diminua o valor em 2 para a segunda célula e aumente em 5 para a terceira célula.

O segundo método é usar o serviço (fácil e rápido)

cores.dopely.top

um. Insira o valor da cor desejada.

dois. Selecione as tonalidades e o número de etapas (usei 5).

três. Escolha as tonalidades e o número de etapas.

quatro . Como resultado, para uma cor, criei a seguinte tabela

P = Primário,

P 60 = esta é a nossa cor primária,

de P 10 a P 50 = esses são os tons claros que coletamos em Tints,

de P 60 a P 100 = esses são os tons escuros que coletamos no painel Shades.

4. Verificando a acessibilidade das cores

É importante garantir que as cores escolhidas sejam acessíveis a todos os usuários, inclusive aqueles com habilidades limitadas. Existem diretrizes, como as Diretrizes de Acessibilidade para Conteúdo da Web ( WCAG ), que podem ser seguidas ao criar uma interface. Para verificar a acessibilidade de suas cores, você pode utilizar ferramentas específicas como plugins ou serviços web que irão verificar o contraste e a acessibilidade das cores selecionadas.

Plug-in Figma – Contraste

Serviço Web – Coolors

5. Definindo cores para diferentes estados de interface

Na fase final de criação da paleta de cores do seu projeto web, é necessário determinar o número de etapas necessárias para estados de elementos específicos. Normalmente, identificamos quatro estados principais:

• Habilitado (estado calmo e normal do elemento)
• Passe o mouse (mouseover)
• Ativo (clicando em um botão ou outro controle)
• Desativado (elemento bloqueado)

Para determinar o número de etapas, utilizamos o painel de cores, onde fixamos nosso valor de cor principal (principal). Em seguida, contamos o número de etapas para os estados de foco e ativo. Depois disso, testamos diferentes estados de acessibilidade para garantir que nossos botões e o texto dentro deles sejam facilmente legíveis.

Por exemplo, as diretrizes da IBM descrevem a seguinte abordagem: o estado de foco está a um passo e meio da cor inicial, enquanto o estado ativo está a dois passos da cor principal. Da mesma forma, o estado selecionado estará um passo além da cor principal. Este método permite-nos definir a paleta de cores e garantir a sua acessibilidade a um público vasto, incluindo utilizadores com capacidades limitadas. A mesma abordagem é aplicada a textos, onde os estados de foco e ativos são identificados.

Estados de foco

Se a sua cor principal estiver entre o preto e o 70 – você deve subir meio passo para tons mais claros.

Se a sua cor principal estiver entre 60 e branco você deve descer meio passo para tons mais escuros.

Pressione / Estados ativos

Para valores de 100 a 70, o estado ativo torna-se dois passos completos mais leve

Para valores de 60 a 10, o estado ativo torna-se dois passos completos mais escuro

Estados selecionados

Para valores de 100 a 70, o estado selecionado fica um passo mais leve

Para valores de 60 a 10, o estado selecionado fica um passo mais escuro

Também é importante testar seus designs e textos para garantir que sejam legíveis e exibidos corretamente. Depois de concluir o trabalho, certifique-se de que os diferentes estados e textos da interface tenham aparência e funcionem corretamente.

A escolha certa de um esquema de cores desempenha um papel fundamental na criação de uma interface de usuário amigável e atraente. Seguindo estes passos simples e utilizando as ferramentas disponíveis, você poderá selecionar e otimizar cores para o seu projeto.

Espero que você tenha gostado do meu artigo. Se você tiver alguma dúvida ou precisar de mais informações, fique à vontade para deixar um comentário.