HSV (HSB) and HSL color space

RGB principle

The RGB color mode is a color standard in the industry. It obtains various colors by changing the three color channels of red (R), green (G), and blue (B) and superimposing them with each other. Yes, RGB represents the colors of the three channels of red, green and blue. This standard includes almost all the colors that human vision can perceive, and it is one of the most widely used color systems at present.
RGB is set based on the principle of color luminescence. When their lights are superimposed on each other, the colors are mixed, but the brightness is equal to the sum of the two brightness. The more mixed, the higher the brightness, that is, additive mixing.
Each of the three color channels of red, green, and blue is divided into 256 levels of brightness. When the three-color gray values are the same, gray tones with different gray values are produced, that is, when the three-color gray is 0, it is the darkest When the three-color gray scale is 255, it is the brightest white tone.

HSL principle

The HSL color mode is another color standard in the industry, which is obtained by changing the three color channels of hue (H), saturation (S), and lightness (L) and their superpositions. For the color, HSL is the color representing the three channels of hue, saturation, and lightness.

The H (hue) component of HSL represents the range of colors that the human eye can perceive. These colors are distributed on a flat hue ring. The value range is 0° to 360° central angle, and each angle can represent a Kinds of colors. The significance of the hue value is that we can change the color by rotating the hue ring without changing the light perception. In practical applications, we need to remember the six main colors on the hue circle as a basic reference: 360°/0°red, 60°yellow, 120°green, 180°cyan, 240°blue, 300°magenta, They are arranged on the hue circle at intervals of 60° central angle.
The S (saturation) component of HSL refers to the saturation of the color. It uses a value from 0% to 100% to describe the change of color purity under the same hue and lightness. The larger the value, the less gray in the color, and the more vivid the color, showing a change from gray to pure color.
The L (lightness) component of HSL refers to the lightness of the color, and its function is to control the change of color. It also uses a value range of 0% to 100%. The smaller the value, the darker the color, and the closer to black; the larger the value, the brighter the color, and the closer to white.

HSB (HSV) principle

HSB, also known as HSV, represents a color mode: In HSB mode, H (hues) represents hue, S (saturation) represents saturation, and B (brightness) represents brightness. The medium corresponding to HSB mode is the human eye.

Hue (H, hue): On the 0~360° standard color wheel, the hue is measured by position. In normal use, the hue is identified by the color name, such as red, green or orange. Black and white have no hue.
Saturation (S, saturation): indicates the purity of the color, when it is 0, it is gray. White, black, and other gray colors are not saturated. At maximum saturation, each hue has the purest shade. The value range is 0 to 100%.
Brightness (B, brightness or V, value): is the brightness of the color. When it is 0, it is black. Maximum brightness is the most vivid state of color. The value range is 0 to 100%.

The difference between HSB (HSV) and HSL

HSB and HSL are literally the same:

H refers to Hue, which is the name of the color, such as'red','blue', etc.
S refers to saturation, the purity of the color.
L (Lightness) and B (Brightness) are the brightness, the brightness of the color.

In terms of principle and performance, the H (hue) in HSL and HSB are exactly the same, but the S (saturation) of the two are different, and the L and B (lightness) are different.

The S in HSB controls the amount of white mixed into the pure color. The larger the value, the less white and the purer the color;
The B in HSB controls the amount of black mixed into the pure color. The larger the value, the less black and the higher the brightness.
The S in HSL has nothing to do with black and white, and saturation does not control the amount of black and white mixed in the color;
The L in HSL controls the mixed black and white colors in the pure color.

In actual application scenarios, the color picker of Photoshop and Affinity Designer. The two use HSB and HSL color models respectively. Both color pickers indicate saturation on the X axis. The farther to the right, the higher the saturation; the Y axis indicates the brightness, and the higher the brightness, the higher the brightness.
Insert picture description here
Photoshop's HSB color model color picker, as shown in the figure below, HSB's B (brightness) controls the amount of black mixed into a pure color. The higher the value, the greater the value, the less black, and the higher the color brightness.

As shown in the figure below, the S (saturation) of HSB controls the amount of white mixed into the pure color. The farther to the right, the larger the value, the less white, and the higher the color purity.
Insert picture description here
Affinity Designer's HSL color model color picker, as shown in the figure below, the Y-axis lightness axis, from bottom to top, the mixed black gradually decreases until there is no black or white at 50%, and the purity reaches the highest level. Continue to go up, the white mixed with pure color gradually increases, reaching the highest point is pure white with the highest brightness.
Insert picture description here
The biggest difference between HSL and HSB (HSV) is the understanding of white. HSL is white when L reaches the maximum, and it has nothing to do with saturation S. Therefore, it can be understood that the brightness L here actually refers to the amount of white. The more, the whiter, the brighter and whiter, more like natural light. HSB (HSV) is white when the saturation is lowest. The change of brightness B(V) will only change the relationship between light and dark when the color contrasts with the color. So the saturation S here can be understood as the amount of color, and when the amount of color is 0, it is naturally white. The higher the saturation, the more vivid the color.
Insert picture description here