How does Windows 7 calculate the color to use for taskbar "color hot-tracking"?
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:
- An average colour value from the entire icon, otherwise you would get brown
all the timewith multi-coloured icons like Chrome. - 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.
- 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.
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