Last Updated:

Color in UI (Interface Design): Best Practices

Web development

The author's article came out multi-letter, we will briefly outline the main points, and the details can be read at the link.

Color theory doesn't work

In the introductory part, the author argues that color theory and color palette do not work. Instead, they are offered to learn how to modify one main color into many variations. Next comes the instruction on how to modify the color to achieve any goals in web design.

Dark and light variations

The author notes that many prominent interfaces use light and dark variations of the same color.

Web development 1

Look at the search bar: transparency or superimposing black on blue won't give you that color. This variation of the primary color was obtained in a different way.

Here's a screenshot of the Swell Grid app:

Web development design

There are many variations of one primary color.

Here's a simple example of button state:

The author asks the question: how to practically modify the color to get pleasant beautiful variations? He suggests looking for real-life examples and using the HSB color model, which is the most intuitive color model with a wide range of applications.

Real-world color variations

Look at the shadows: you can use them as a dark variation of the primary color.

Web development

In Sketch, with a color pipette, the author found out how the color is modified when a shadow falls on a coral wall (HSB palette):

Web development

Note that the brightness has become less. Another example:

Measurement of color with a pipette:

The author identified two important patterns:

  • the brightness has decreased;
  • saturation has increased.

Color modification rules

The author derived a rule: dark variations = saturation above + brightness below.

Here's what the color pipette shows in Facebook's search timeline:

The rule is confirmed: the saturation has increased, the brightness has become less. Now it is clear why such a color could not be obtained from the main overlay of translucent black: in the HSB color model, adding black is equivalent to reducing the brightness. And we need to reduce the brightness while increasing the saturation. Black does not add saturation to the color.

In the opposite direction, the modification rule also works: light variations = saturation below + brightness higher.

Following the lightening rule, we get an absolute white color:

The author comes to the conclusion that lightening is the addition of white or the addition of translucent white on top of the main one.

The most important thing

The most important idea of the article:

Dark color variations are obtained by reducing brightness and increasing saturation. Light variations - an increase in brightness and a decrease in saturation.

Using this rule alone, you can make amazing interfaces.

As for the colors themselves, the author draws attention to the term "perceived brightness" (luminosity).

Yellow and blue have a brightness of 100%, but which one is perceived as "brighter"? You're right if you chose yellow. Even if the brightness and saturation are at the same level, the luminosity of different colors ranges from 0 to 100.

Here are the same colors with an interval of 30 ° with a brightness and saturation of 100%.

And these are the same colors in the Luminosity blending mode with the gray color that was obtained in the end. This makes it possible to measure the luminosity of the original color. In Luminosity blending mode, light gray means high luminosity, dark gray means low luminosity.

The graph is even clearer:

The graph explains how the color of the shadow sometimes went up and sometimes down. Are there three bottom points and three top points on the chart? The lower dots are red, green, and blue. The upper points are cyan, magenta, and yellow. It's reminiscent of RGB and CMY.

If you do not pay attention to saturation and brightness, then changing the color to red (0 °), green (120 °) or blue (240 °) will reduce its luminosity. And changing the color to yellow (60°), magenta (180°) or cyan (300°), on the contrary, will increase.

The trick is to combine color change with the movement of saturation and brightness. If you want dark variations, move the color towards red (0°), green (120°) or blue (240°), depending on which one is closer to the original color, and vice versa - towards yellow (60 °), magenta (180 °) or cyan (300 °), if you want to get light variations (do not forget to change the brightness and saturation).

That is why the color of the shadow on the coral wall went down - closer to the red (0 °), which is the closest lowest point to 21 °.

And that's why the color of the shadow on the wall of the color of the sea wave went up – closer to the blue (240°), which is the closest lowest point to 194°.

Inference

The author proposes to create a clean interface by modifying the main color into darker and lighter ones and not bother with anything else. Memorable web-design is based on nuances.

Dark variations:

  • brightness decreases;
  • saturation increases;
  • the color moves towards the nearest lowest point (red, green, or blue).

Light variations:

  • brightness increases;
  • saturation decreases;
  • the color moves towards the nearest top point (cyan, magenta, or yellow).

Here is the interface the author sketched using only one color: