Alternatives to RGB | UXPUB

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.

Alternatives to RGB

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

Alternatives to RGB

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.

Alternatives to RGB

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.

Alternatives to RGB

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.

Alternatives to RGB

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.

Alternatives to RGB

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.

Related links:

http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker (doesn’t work)

https://web.archive.org/web/20201112011026/http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker#4ccea6,36729e

https://jsfiddle.net/vis4/fsvVM/

https://bl.ocks.org/mbostock/3014589

https://en.wikipedia.org/wiki/HSL_and_HSV

https://en.wikipedia.org/wiki/CIELAB_color_space

https://en.wikipedia.org/wiki/CIELUV#Cylindrical_representation_.28CIELCH.29

https://en.wikipedia.org/wiki/Hash_function

Author: Clark Douglas

Leave a Reply

Your email address will not be published. Required fields are marked *