Color-born Mind: humanized HSL model

For visual designers, RGB, CMYK or whatever is as familiar as the right-hand person. But if only in the way of mental arithmetic, do not use the Photoshop color Picker or any similar tool, you can quickly say "Begonia red" corresponding to the RGB color value? If you add a little orange in, increase the brightness a little, the color value is how much?

It's hard to answer, isn't it? Faced with these problems, visual designers/front-end engineers usually can only open Photoshop, enter the color value of the current colors, bring up new colors on the color board, and then copy the color values to replace the current color.

Life is very short, so wasted large chunks of time, you reconciled?

So let's explore if there is a better solution.

A love and hate RGB

RGB is based on the principle of color mixing design, is a hardware-oriented model, it describes the display of the electronic gun in red red, green, blue blue Three-color light-emitting method on the color. Red green and blue three shades of brightness are the maximum (255), the screen reproduce the color is the brightest white, are 0, the result is black.

If you want to draw the "Begonia red" just mentioned, we should turn the red light to the brightest, the brightness of green to about 1/5, and then the brightness of blue to about 1/3, the following figure:

Similarly, to get just said "add some orange in, then a little more light" color, we have to turn the green light 1 time times more, and then dim the blue a little, the following figure:

Despite the need for the color, but we do things with "orange" or "increase brightness" is not really related. This color rendering method is completely incompatible with our intuitive sense of colour. Can you stand it? Stop pretending to be a visual designer, the stage lighting division is your real identity!

What is the HSL color model?

HSL also used 3 components to describe the color, and RGB use of the three colors, HSL color is expressed in the way: H (hue) hue, S (saturation) saturation, and L (lightness) brightness. Sounds as complicated as that? You'll find out later how friendly HSL is compared to the "anti-human" RGB model.

The HSL H (Hue) component represents the range of colors that the human eye can perceive, and these colors are distributed on a planar hue ring, and the range is the center angle of 0° to 360°, and each angle can represent a color. The significance of the hue value is that we can change the color by rotating the hue loop without changing the light sense. In practical applications, we need to remember the six main colors on the Hue ring as the basic reference: 360°/0° red, 60° yellow, 120° green, 180° Green, 240° Blue, 300° Magenta, which are arranged in the hue ring at the interval of the 60° center angle, as shown below:

The HSL s (saturation) component, which refers to the saturation of the color, describes the change in color purity under the same hue and lightness with a value of 0% to 100%. The larger the number, the less gray the color, the more vivid the color, presenting a change from rational (grayscale) to perceptual (solid color), as shown below:

HSL L (Lightness) component, refers to the lightness of color, the role is to control the color changes in light and shade. It also uses a range of 0% to 100% values. The smaller the number, the darker the color, the closer it is to the black, the greater the number, the brighter the color, the closer to the white.

What can HSL bring for us?

Let's do a HSL based toner practice. Think of the "Begonia red" mentioned at the beginning, which should be a sexy and delicate color between magenta and red. We can assume that the angle on the Hue ring H is 330°, saturation is high, and the degree of visibility is moderate, what color is that?

We want the color should be closer to the red point, let us turn hue H to 350 °, now much better.

By changing the hue value H, we realize the shift of hue from magenta to Begonia red. The big feeling is close, but still a little bit gloomy, not yet sexy ...

Now we can make this color more vivid by increasing the saturation s.

With a 20% increase in saturation, the color looks a lot brighter.

Or wrong. Begonia Red is a girl's color, should be more tender, transparent, not so enthusiastic. We need to find that subtle feeling by adding brightness L.

Put the color slightly brighter 10%, we finally got the desired color:

Similarly, in the face of the "add orange to go in, and then a little more light" such a rude request, we can only through mental arithmetic to roughly determine the hue ring phase and lightness value. Here we need to increase the H 25°,l by 5%:

That's it! Now let's revisit the whole palette process.

In the process of using HSL palette, we do not need to open the color picker, and do not need to understand the complex light mixing principle, this is a natural, perceptual, easy to understand the process.

In contrast, the RGB rendering method appears to be very clumsy and incomprehensible.

Our understanding of color is often this: "What color is this?" What's the depth? How are the shades? "This recognition is based on the senses of the human body and is not based on the physical properties of the reflected light." Compared with RGB color model, the HSL color model is very friendly to the color expression, which accords with the human perception of color.

The HSL color model was born in the last century and has been widely used in many fields. But the different color model has different suitable scene, in the GUI design domain, the HSL color model's reasonable application can make the color processing work more humanized, will help to establish the harmonious man-machine interaction relations, promotes the product experience. When you like me in RGB in the different space struggling, may wish to change a way of thinking. Maybe HSL is the key to solving your problem.

Attachment: Application of HSL color model in industry

Internet: CSS3 began to support HSL, with the help of human HSL model, web designers can more intuitively define the color required, and can easily control the color changes in the Web page.

E-Office: The color Picker in Microsoft office supports the HSL color model, which allows users to simply deploy a coordinated color and apply it directly to an electronic document.

Digital Darkroom: The HSL palette in Adobe Photoshop Lightroom software makes the digital photographer's color game more vivid and intuitive.

Software skin: In the Software graphics interface design application HSL color, and set a simple transformation rules, you can achieve friendly and easy to use the skin function.

Video surveillance/motion capture: HSL the brightness l component of color model is independent of color information, easy to identify and analyze, H and S component is similar to human visual perception, so it is very suitable for image application related to visual perception, such as image understanding and pattern recognition.

Medical imaging: With the advantage of the HSL color model, medical imaging experts can restore medical image information in a better way or make accurate and intuitive chromatographic analysis of biological samples.

(This article originates from Tencent CDC Blog, please indicate the source when reprint)