Selection and definition of colors

R: 98

G: 152

B: 213

H: 212

S: 58

L: 61


Find your white and black colors.

The only rule here is not to use a completely white or black color.

Absolute black and white color can tire the eyes when reading or performing actions. White ( #FFF) has 100% color brightness, and black (#000) has 0%. This unevenness creates an intense contrast to which it is more difficult for human eyes to adapt when navigating and reading.

Avoid using pure black or white, especially in large areas. It is best to use a limited palette of shades of gray, which consists of neutral black colors with the addition of white shades, for example:



The color should be applied consistently throughout the user interface and correspond to the brand it represents.


The color should create a difference between the elements, with sufficient contrast between them.


Colors should be used purposefully to convey meaning in different ways, for example, by relationships between elements and degrees of hierarchy.

The use of semantic colors to highlight important information.

Semantic colors are the colors used to understand user information about success, error, warning.

Semantic colors use :

To highlight the vital status of the user interface, positive or warning information;

For checking text fields or controls, such as switches, checkboxes;

For quick visual feedback, such as a new message in the app.

Definition of primary colors.

The primary color is the first thing to decide on.

The primary color is most often displayed on screens and is used to indicate to users the main actions of the user interface (UI). Ideally, there should be from 1 to 3 primary colors that are easily associated with a specific brand or product.

Knowledge of your audience

The key to a good UX is understanding your audience.

Color plays an important role here, as the choice affects the feelings and emotions of the user when interacting with the product.

  1. Who is your target audience?
  2. How old are they?
  3. What is the specialization of your product?
  4. What emotions do you want your brand to evoke?

These questions can and should influence the choice, so you should not lose them by choosing the UI palette and discussing your choice with the team.