How does Windows 7 calculate the color to use for taskbar "color hot-tracking"?

Question

This has intrigued me for quite some time.

Does anyone know the algorithm Windows 7 Aero uses to determine the colour to use as the hot-tracking hover highlight on taskbar buttons for currently-running apps?

It is definitely based on the icon of the app, but I can't see a specific pattern of where it's getting the colour value from.

It doesn't seem to be any of the following:

1. An average colour value from the entire icon, otherwise you would get brown all the time with multi-coloured icons like Chrome.
2. The colour used the most in the image, otherwise you'd get yellow for the SQL Server Management Studio icon (6th from left). Also, the Chrome icon used red, green and yellow in equal measure.
3. A colour located at certain pixel coordinates within the icon, because Chrome is red - indicating the top of the icon - and Notepad++ (2nd from right) is green - indicating the bottom of the icon.

I asked this question on ux.stackoverflow.com and it got closed as off-topic, but someone answered with the following:

---

As described by Raymond Chen in this MSDN blog article:

Some people ask how it's done. It's really nothing special. The code just looks for the predominant color in the icon. (And, since visual designers are sticklers for this sort of thing, black, white, and shades of gray are not considered "colors" for the purpose of this calculation.)

---

However I wasn't really satisfied with that answer because it doesn't explain how the "predominant" colour is calculated. Surely on the SQL Management Studio icon, the predominant colour, to my eyes at least, is yellow. Yet the highlight is green. I want to know, specifically, what the algorithm is.

Answer 1

From Welcome to the Windows 7 Desktop at exactly 35 minutes in:

It's a normalized color histogram across 27 different buckets, and we extract blacks, whites, alpha channels, and grays, and use the most dominant RGBV [sic] value...

I'm fairly certain the speaker meant to say "RGB", since "RGBV" doesn't seem to be a thing. The "normalized" part doesn't really matter; it's effectively counting how many pixels fall into each "bucket." Each pixel, therefore, is put into one of the 27 buckets (arranged in a three-dimensional array; the cube root of 27 is 3) based on the position of each of its channels' value. Windows determines for each color channel whether that color's intensity is in the bottom, middle, or top chunk of the range. It would appear that the ranges are about 0-60, 60-200, and 200-255. Completely transparent pixels are not included at all.

Windows then finds which bucket has the most pixels, ignoring the black, white, and gray ones (the buckets where all three channels were in the same third of the range). That explains the SQL Server Management Studio icon - much of what appears yellow to us actually gets dumped in the "white" bucket and is ignored.

If there are no pixels in any of the acceptable buckets, the program gets a light blue overlay regardless of the system color scheme. (See the command prompt.) If a program has no icon, it gets a white/translucent overlay even though the Windows default icon would otherwise produce a blue or green overlay.

There is nothing to stop multiple programs from having the same highlight color. The newest Chrome icon, for instance, gets the same yellow as Windows 8's Explorer.

If there are ties, there is a predetermined order that does not depend on the order of the colors in the image. This is probably just a result of the way the maximum is found - buckets that are checked earlier will continue to be the max even if a later one ties. It appears that yellow is one of the first buckets checked.

Once the winning bucket is discovered, the highlight color seems to be set to a color somewhere in the middle of the bucket's range.

Test cases (numbers provided are RGB value):

(255, 247, 209) → default highlight
(47, 0, 0) → default highlight
(60, 0, 0) → dark red
(66, 0, 0) → dark red
(165, 0, 0) → red
(128, 128, 128) → default highlight
(0, 148, 255) and (255, 0, 0) → red
(0, 255, 0) and (255, 216, 0) with same area → yellow
same but flipped → yellow
(255, 180, 180) → light red
(255, 210, 210) → default highlight
pure blue, pure yellow, pure red, and pure green with same area → yellow
(255, 61, 61) → red
(82, 0, 0) → dark red

Answer 2

It has already worked with HTML, a server-side language that crosses the hashtags and evaluates the code, then by changing the font color in a page several entries are written, each once to be sent to the HTC One-time, and because it's Hypertex The protocol lock transfer is again sent to the contact's server, in order to lock that the server is not behind the screen so that it can be answered by pressing the button.Also see the shadows of the 0077 cc that acts like a message or SMS on receiving messages or splitting on the wealth dilsideways. In this SMS, HTML and receive messages are the HTML message.

007,0077cc

006bb7

005fa3

00538

00477

3b66

That later, the tint percentage, monochrome color, and shadow text on the hashtag should be encoded

Answer 3

My guess would be that for each color, starting from the top, you get the R, G, and B values, and from them you take the highest and lowest of the three and compare them. The color with the biggest gap between the highest and lowest would be the brightest color in the image. Now in the case of, say, the Chrome icon, there might be several colors tied for biggest gap, but the red is on the top, so it's encountered first, and thus that's what dominates for that image. (I suppose you could test this by designing your own icon, like rotate the Chrome logo 120 degrees and see if the green or yellow dominates instead.)

Answer 4

From the way I understand it - The OS takes more than a few factors into account when determining the color.

1. Has a color already been assigned by the OS to this application? If so, skip to 7.
2. Is this color defined in the program code? If so, use the predefined color from the program. (Yes, there is a variable setting for windows programs that controls this, no, I do not know the exact variable name)
3. if 1=false (Meaning no predefined color), define the dominant color of the icon used. (For this, the colors Black, white and grey are ignored)
4. If 2 cannot define a single color that is used, and more dominant than the other colors used, define the average RBG value of the icon. If a defined color is achieved, use this. For the purpose of this, the colors White, Black, Grey and Brown are completely ignored.
5. If 3 results in one of the blacklisted colors (Black white or grey), randomly assign a color that most closely represents the average RBG value, without infringing upon the blacklist colors.
6. Upon successful assignment of the color is complete, store the color information in the registry for quicker color assignment later.
7. If the color assigned matches a color already used by another application currently open, offset the color by a random hue amount within 15% of the assigned color.
8. Display color.

This may very well be wrong, and is mostly speculation, but, this gives you a easy to understand method the OS could very well be using to determine the colors. It also explains how a program without a predefined color, and an icon using equal amounts of colors, isn't assigned white/brown/black, and why black, white and grey are never assigned. Also you should note, that programs that don't have an Icon (there are some still) show a transparent hot-tracking color, which simply causes the icon to be 'brighter' when hovered over.

Answer 5

Here is some VB code that averages the RGB colours of an image:

Function AverageRGB(ByRef P As PictureBox) As Long

Dim Count As Long
Dim Red As Long
Dim Green As Long
Dim Blue As Long
Dim Hexed As String
Dim X As Long
Dim Y As Long
Count = 0


For X = 0 To P.Width Step P.Width \ 32


    For Y = 0 To P.Height Step P.Height \ 32
        Hexed = Right("00000" & Hex(P.Point(X, Y)), 6)
        Red = Red + CLng("&h" & Right(Hexed, 2))
        Green = Green + CLng("&h" & Mid(Hexed, 3, 2))
        Blue = Blue + CLng("&h" & Left(Hexed, 2))
        Count = Count + 1
    Next

Next

AverageRGB = RGB(Red \ Count, Green \ Count, Blue \ Count)
End Function

It's not really optimized for use in an OS, but it should give you a basic idea -Source