Original link: https://www.ixiqin.com/2022/08/01/how-to-determine-if-a-color-is-what-color/
When you see this title, you may be a little confused: “What color is a color?” This question is so nonsensical. But if I use it the other way around, you might be able to understand – how do humans tell if a color is red instead of green?
Back when I was a child, everyone should have heard of three primary colors. Different people may remember it differently, some people remember it as red, green and blue (the three primary colors of light), and some people remember it as red, green and yellow ( the three primary colors of art ). The result is different, but it doesn’t matter. The two primary colors tell you that – a color can be made from three other colors.
This means that each color corresponds to three coordinates. Whether they are RGB or others, they are all confirmed by the color code of the three colors to confirm which specific color is. Our monitors are also manufactured that way.
But there is a problem with primary colors – too many variables. Assuming we have 3 different outcomes in each dimension, the three primary colors can spell out 27 different combinations. If we divide into 10 orders in each dimension, the result is 1000 different dimensions. According to 0 ~ 255 of RGB, a total of 256 levels, a total of 16,777,216 combinations can be formed. If you want to construct a set of rules for judgment, it is very difficult.
Therefore, a different coordinate system would be a better solution – try the HSL description method.
HSL is a new dimensional coordinate that converts RGB three-dimensional coordinates into Hue, Saturation, Lightness (English: Hue, Saturation, Lightness).
When we change to a new coordinate system, the coordinates we define the color change from the past three dimensions to the coordinates that can be positioned with only the hue (Hue) coordinate. After all, if a blue is not saturated, it doesn’t make it a blue; similarly, a blue is not as bright, but still blue.
By converting from the RGB coordinate system to the HSL coordinate system, we reduce the past 16,777,216 combinations to 360 orders. From the past three-dimensional coordinate system, it has become a new one-dimensional coordinate system.
In this way, we can easily subdivide our different colors and write rules better. For example, Hue is orange at 15 to 45; yellow at 45 to 75; green at 75 to 105, and so on.
It will also be simpler when we write the code. We only need to calculate the specific Hue value to get the corresponding color name.
RGB to HSL algorithm
The following algorithm is from Wikipedia
https://ift.tt/VCFfGqn
Let ( r , g , b ) be the red, green, and blue coordinates of a color, respectively, whose values are real numbers between 0 and 1. Let max be equivalent to the largest of r , g and b . Let min equal the smallest of these values. To find the value of ( h , s , l ) in HSL space, where h ∈ [0, 360) degrees is the hue angle of the angle, and s , l ∈ [0,1] are the saturation and lightness, computed as :
The value of h is usually normalized to lie between 0 and 360°. And h =0 is used when max = min (defined in grey) instead of leaving h undefined.
RGB to HSL Sample Code
function rgbToHsl(r, g, b) { r /= 255, g /= 255, b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, l = (max + min) / 2; if (max == min) { h = s = 0; // achromatic } else { var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return [h, s, l];}
This article is reprinted from: https://www.ixiqin.com/2022/08/01/how-to-determine-if-a-color-is-what-color/
This site is for inclusion only, and the copyright belongs to the original author.