Alternatives to RGB | UXPUB

Posted on May 11, 2021May 11, 2021UI/UX

People know about color coding RGB, where through a mixture of red (Red), green (Green) and blue (Blue), the desired color is mixed and displayed on the screen. Printers and designers know about CMYK (Cyan, Magenta, Yellow, Key color), which is used for printing on white, and the last of the colors is responsible for black.

But these are not the only ways to encode color, for example, you can move away from mixing colors, as is done in the color system. HSVwhere Hue – color tone, Saturation – color saturation, i.e. the larger the parameter, the closer to the pure color, and the smaller, the closer to the neutral gray, and Value – the value that is responsible for the brightness, the higher, the lighter, the lower, the darker. This system is also called HSB, due to Brightness.

But now let s talk about the color system. Lab, which takes into account human perception and solves problems that cannot be easily solved in RGB. And a little about Lch…

Dirty gradients problem

If you build a gradient from one color to another in RGB, then with some colors it will turn out beautifully, and with some it will be completely ugly.

This is where the Lab color system helps, taking into account the color perception by human eyes.

To create such a beautiful gradient, go to the Lch and Lab color and gradient picker and select two colors between which you need to make a transition and the required number of steps, seven is usually enough.

Next, copy the colors next to the Lab column and transfer them to your editor, making a linear gradient from the selected number of steps. It turns out beauty.

The Lab system itself is quite complicated, but the point is that the lightness is specified in terms of L, and the color indicators in terms of coordinates a and b. Inside there are terrible formulas, because the system was made for people, not computers, but the result is very high. The main thing to remember is that in Lab you always get cool gradients, and use it wisely.

Change color without changing brightness and saturation

Very often you need to make elements of different colors, but with the same saturation and brightness, for this, in the color editor, the designer moves the color tone strip from the bottom, without touching the position of the circle at the top.

But how to do it automatically, because in the RGB system the value of each coordinate changes when you move the slider. Here radial color coding systems come to the rescue, where the color is specified by one coordinate, and not by several, for example, the already known HSV, as well as HSL. And the radial version Lab, which is called Lch…

Consider a real case

A task: for users of one role, light avatars with dark letters should be generated, and for the other role, dark ones with white letters.

Decision: copy one of the colors in the design, translate into Hsl (Hue, Saturation, Lightness). We use HSL because this standard is supported in CSS.

Now by changing the Hue, we can change the color while maintaining the lightness and saturation. For light background HSL: [0°–360°], 100%, 78%, and for the dark HSL: [0°–360°], 100%, 30%… The Hue parameter can be generated from the hash function of the title, or from the number of characters in the title.

Output

One should be aware of alternative color systems and use where needed.

Alternatives to RGB | UXPUB

Dirty gradients problem

Change color without changing brightness and saturation

Consider a real case

Output

Related links:

Leave a Reply Cancel reply