paint-brush
How to select colors and determine shades for different states: Hover, Active, Press, Disableby@alinahand
6,079 reads
6,079 reads

How to select colors and determine shades for different states: Hover, Active, Press, Disable

by AlinaOctober 21st, 2023
Read on Terminal Reader
Read this story w/o Javascript

Too Long; Didn't Read

The process of selecting colors for the interface can be complex, especially when considering various button states, fonts, and other UI elements.
featured image - How to select colors and determine shades for different states: Hover, Active, Press, Disable
Alina HackerNoon profile picture

The process of selecting colors for the interface can be complex, especially when considering various button states, fonts, and other UI elements. In this article, I will share my methods and principles that will help you successfully choose a color scheme for your project.


1. Defining the Primary Color

When designing a website, it's often necessary to choose a color scheme. Sometimes, the client already has a primary brand color. In this case, your task is to select additional colors and shades that will complement the primary color. Apart from the main color, additional colors are used on the site for various purposes such as indicating error states, links, illustrations, icons, or for use in graphics and dashboards.


2. Using Color Harmony

To ensure that colors harmonize well, it is beneficial to use various color harmony schemes such as monochromatic, complementary, triangular, and others. They can help create a harmonious color palette that complements the project's primary color. We currently live in a world where technology is rapidly advancing, and there are special services that easily generate a color scheme. For example, I use color.adobe.com.


Here's how I do it:


one. Select the desired scheme from the dropdown list.

one

two. Enter the required color value in the field indicated as the base color

two


three. Determine which colors suit you needs.

four. Transfer them to your workspace, in my case, using Figma.


3. Selecting of tones


Next, we need to determine the shades for each of the selected colors. To select shades for the chosen colors, you can use specific services that can assist in this process. There are two ways to determine shades for your colors:


The first method involves a more complex formula :

  1. Choose your header color (not necessarily black).
  2. Switch to the HLS mode.
  3. Skip the first cell, decrease the value by 2 for the second cell, and increase it by 5 for the third cell.

the first method


The second method is to use the service (easy and fast)

colors.dopely.top


one. Enter the value of the color you want.

one

two. Select shades and the number of steps (I used 5).

two

three. Choose tints and the number of steps.

three

four. As a result, for one color, I created the following table

P = Primary,

P 60 = this is our primary color,

from P 10 to P 50 = these are the light tones we collected in Tints,

from P 60 to P 100 = these are the dark shades we collected in the Shades panel.

four


Repeat the same process for other colors and text and error states!



4. Checking Color Accessibility

It's important to ensure that the chosen colors are accessible to all users, including those with limited abilities. There are guidelines, such as the Web Content Accessibility Guidelines (WCAG), that can be followed when creating an interface. To check the accessibility of your colors, you can use specific tools such as plugins or web services that will verify the contrast and accessibility of the selected colors.


Figma plugin – Contrast

Web service – Coolors

checking color accessibility

5. Defining colors for different interface states

In the final stage of designing the color palette for your web project, it's necessary to determine the number of steps required for specific element states. Typically, we identify four key states:


  • Enabled (calm and normal state of the element)
  • Hover (mouseover)
  • Active (clicking on a button or another control)
  • Disabled (blocked element)

states


To determine the number of steps, we use the color panel, where we fix our main color value (prime). Then, we count the number of steps for the hover and active states. After that, we test different states for accessibility to ensure that our buttons and the text within them are easily readable.


For instance, the IBM guidelines describe the following approach: the hover state is one and a half steps from the initial color, while the active state is two steps from the main color. Similarly, the selected state will be one step further from the main color. This method allows us to define the color palette and ensure its accessibility for a broad audience, including users with limited abilities. The same approach is applied to texts, where hover and active states are identified.



Hover states

If your main color is between black and 70 – you should go up a half step to lighter shades.

hover



If your main color is between 60 and white you should go down a half step to darker tones.



hover




Press / Active states

For values from 100 to 70, the active state becomes two full steps lighter

For values from 60 to 10 the active state becomes two full steps darker

active / press



Selected states

For values from 100 to 70, the selected state becomes one step lighter

selected

For values from 60 to 10, the selected state becomes one step darker

selected




It's also important to test your designs and texts to ensure they are readable and displayed correctly. After completing the work, make sure that the different interface states and texts look and function properly.

Remember these are tips based on my experience, you can add your own steps, change the sequence, but don't forget to do accessibility testing so that the contrast of your text and different interface states can be read well by any user.


The right choice of a color scheme plays a key role in creating a user-friendly and appealing user interface. By following these simple steps and using available tools, you will be able to select and optimize colors for your project.


I hope you enjoyed my article. If you have any questions or need further information, please feel free to leave a comment.