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

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.

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

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 second method is to use the service (easy and fast)

colors.dopely.top

one. Enter the value of the color you want.

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

three. Choose tints and the number of steps.

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.

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

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)

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.

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

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

Selected states

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

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

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.

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.