Analyze HSL/HSB to obtain the Dominant Color of the image,

Analyze HSL/HSB to obtain the Dominant Color of the image,

The HSL/HSB values of colors have been studied a little over the past two days, this is mainly because the write program wants to obtain the most prominent color values in the image through an image (similar to the playing Bar background in Groove Music, it is used to retrieve the dominant color from the album cover, you can also obtain the main color from the desktop background as the theme color in the Windows 10 taskbar ).

I searched the internet and found no satisfactory solution. So I did a little research and the final result was okay.

At the beginning, I wanted to get it by analyzing ARGB. It could be a bit confusing, because there are many combinations of ARGB, and I don't know how the colors will come from the combination, so it wasn't long before I gave up.

Then I decided to use the HSL/HSB method to obtain the dominant tone. I only learned about this mode before, but I have not studied the meanings of H, S, and B. Then I learned a little bit, big gains: the RGB model is very simple for computers, but unfriendly for humans. After all, we are emotional animals, and the HSL/HSB model is very understandable, hue represents the color, ranging from 0 to °, representing a variety of colors (no white or black, we should know that white and black are not colors ~), Saturation indicates the Saturation. The value ranges from 0 to 1. If the Saturation is 0, the color is true. All colors change to Gray. Brightness/Lightness indicates the Brightness. The value ranges from 0 to 1, there is a difference between the two. If Brightness is 0, it is black (if there is no light, it is dark). If it is 1, it is the brightest color. When Lightness is 0, it is black, but it is white when it is 1 (I think we can think that the light intensity exceeds the limits of the light absorption by the object, and all the light is reflected back, so what you see is a piece of white, which is very harmful to your eyes, so do not stay outside when the sun is very good.) Lightness is 0.5, which corresponds to the state where Brightness is 1, so I think Lightness is a numerical extension of Brightness. We can only Copy two images on the Wiki to explain everything!

As for the specific Conversion Relationship Between HSB/HSL and ARGB, there will be no in-depth research, and there are all the formulas. Even if you study it in depth, after all, hair is precious ......

When I see that Hue is used to make another article on the internet, after all, Hue represents the color. At first, I thought that, when I get all the pixels of the image, I would like to figure out which color range the Hue has the most, then, the average color of the tone is good. The result shows that if the color of the image is not much better, if the color is complex, it is not easy to get the desired color, in addition, it is easy to mistakenly think of the background color of the image as the dominant color of the image. After thinking a lot of ways, I feel that it cannot satisfy all the situations. For example, sometimes the background color occupies a large area, sometimes very small, or the image is a color, or there are many colors. In this case, there may be many situations that need to be discussed by category. It is very complicated. The most important thing is that your own mathematics is really insufficient to support such complex operations, gao Shuxian has returned everything to the teacher. In that case, his hair is precious ....

Then I went through a sleep night and got up on the shuttle bus in the morning. Haha, I thought it was really complicated. I should not start with Hue, but from the other two values, Saturation and Brightness are very simple. How to define the dominant tone? It's easy to look at the color that we noticed at the first glance of an image. This color only needs to meet two conditions, with the highest saturation and the highest brightness, that is, the brightest color, note that there is also a small problem here, there is a problem of color preferences, just want to see the traffic lights, although the three colors are red, green, and yellow are solid color, their saturation and brightness are 1, however, red is the most important thing that attracts our attention. For different colors, I think the colors that each person first distinguishes may be different ...... So I will not solve this problem. The Great God can study it by myself. My practice is quite simple. I got the color with the highest saturation + brightness value (and may also involve the weight, I don't care about this, directly add), this set of colors may be a combination of many colors, it means that we may see a variety of colors at the first glance, then we get these colors, you can randomly take one or perform some operation. In my words, the average color is better. I think this is also good. Then the final result is the two top pictures. I am satisfied with it, and the white and black colors will be removed directly, unless there are only these two colors on the picture.

The above is my personal idea. Please try it out ......

Finally, let's talk about Microsoft. The method for obtaining the brightness in C # Is GetBrightness. The name should be in the HSB color mode. The result is dumpfounded after writing the code, all the pictures are white and white, so I realized that Microsoft may use the HSL model and wrote a small program to test it. Indeed, the Brightness of solid color is 0.5, the white Brightness is 1, and the NM is really a pitfall. Do you want to replace it with GetLightness ???

The final code is attached to directly develop the method (it was not long before I learned it with Meng Ge, but I needed to use it more often). In fact, the Code is not important. The important thing is the idea, if you have better ideas, please share them with me.

(For WPF, it is easy to use. UWP is still a little troublesome to get the image pixel)

 1 static class ExtensionMethod 2     { 3         public static double GetHue(this Color color) 4         { 5             return System.Drawing.Color.FromArgb(color.A, color.R, color.G, color.B).GetHue(); 6         } 7  8         public static double GetSaturation(this Color color) 9         {10             return System.Drawing.Color.FromArgb(color.A, color.R, color.G, color.B).GetSaturation();11         }12 13         public static double GetBrightness(this Color color)14         {15             return System.Drawing.Color.FromArgb(color.A, color.R, color.G, color.B).GetBrightness();16         }17 18         public async static Task<Color> GetMajorColorAsync(this BitmapImage bitmap)19         {20             var random = RandomAccessStreamReference.CreateFromUri(bitmap.UriSource);21             var stream = await random.OpenReadAsync();22             var decoder = await BitmapDecoder.CreateAsync(stream);23             var data = await decoder.GetPixelDataAsync();24             var bytes = data.DetachPixelData();25             var colors = new List<Color>();26             for (int i = 0; i < bytes.Length; i += 4)27             {28                 colors.Add(Color.FromArgb(bytes[i + 3], bytes[i + 2], bytes[i + 1], bytes[i]));29             }30             colors = colors.GroupBy(c => 1 - c.GetSaturation() + Math.Abs(0.5 - c.GetBrightness())).OrderBy(g => g.Key).FirstOrDefault().ToList();31             var color = Color.FromArgb(Convert.ToByte(colors.Average(c => c.A)), Convert.ToByte(colors.Average(c => c.R)), Convert.ToByte(colors.Average(c => c.G)), Convert.ToByte(colors.Average(c => c.B)));32             return color;33         }34     }

View Code

I finally finished writing. Make a little progress every day. Get √