A feature I didn’t even know existed much less had a name: Color hot-track


I hadn't even noticed this until somebody pointed it out: When you hover your mouse over a button in the Windows 7 taskbar which corresponds to a running application, the taskbar button lights up in a color that matches the colors in the icon itself. (And even more subtly, the lighting effect is centered on the mouse.)

This feature even has a name: Color hot-track. (Gentlemen, start your photocopiers.)

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.)

Comments (38)
  1. Anonymous says:

    In case the developer of that feature is reading this:

    Please don't make the glow align on the y axis when the taskbar is on the left or right side. It makes it usually impossible to read the windowtext while hovering. Simply use the x axis, no matter where the taskbar is.

  2. Anonymous says:

    You sure that you have never mentioned this before? It feels like you have.

  3. Anonymous says:

    Strange.  It's so subtle that I've seen it hundreds (thousands?) of times without noticing.  I like it.

  4. Anonymous says:

    "It's really nothing special." Which doesn't answer exactly how desaturated a color has to be before it counts as a "gray" and is ignored, or how similar two pixels have to be to count as the same color rather than two separate ones. Or whether there's an API function to do this or if it has to loop through every pixel itself.

    I think you have a different definition of "how it's done" from people who think it's a question worth asking, since what you said is plainly obvious.

  5. Anonymous says:

    I'm curious what the details are of selecting the "predominant color". Some of them are more obvious than others.  For example, Excel (being almost all green/white) gets "hot-tracked" to a light green.  OTOH Chrome, which is composed of red, green, yellow, and to a lesser extent blue, gets a sort of pink-ish color. I don't see much other reason for choosing the red over the green/yellow in this particular instance. I speculate/assume that all other things being equal, colors closer to the top of the icon are given priority over the others?

  6. Google Chrome hot-tracks the mouse on it's tabs with a highlight (but not an icon-specific color).

    I mention this, because the Windows TaskBar always used to be implemented with the Tab Common Control, so a browser's tab bar and the Windows TaskBar are similar concepts.

  7. Dan Bugglin says:

    @Random832 I believe Google Chrome also uses an algorithm for figuring out the predominant color in a favicon for calculating the accent color for thumbnails on the new tab page.  Since it's open source you can go in and check it out.  Basically I think they look for the largest block (in pixel count) of contiguous near-solid color and use that color.  Though they don't exclude gray or black IIRC.

    @rbirkby Sadly it doesn't seem to do this on XP, I do like the effect on my Win 7 PC.

  8. Anonymous says:

    I noticed that feature a few days ago. I think that the algorithm can just sum up the RGB parts and then map the result values to a 0..255 range. It's easy to implement and it will skip the "black, white, and shades of gray" automatically. I'm curious if this is at least close to the implementation.

  9. Anonymous says:

    I hope that processing is all done in a separate thread that can be scheduled on one of the idle CPU cores.  I'm still using XP in classic mode with most of the pretty animations + effects turned off and the GUI just flies on my modern PC.  

  10. Anonymous says:

    @Mc

    I'm using Windows 7 with Aero and most of the pretty animations + effects turned on and the GUI just flies on my modern PC.

  11. Anonymous says:

    @Mc Using classic (or basic) mode is a false economy. It disables the desktop window manager, reducing the amount of hardware acceleration.

  12. Anonymous says:

    @MC : Well, I guess they're using some cache to avoid having to calculate it on every mouse hover. Unless the app icon change, you basically have to do it once for each app… Which isn't really that much computation.

  13. Anonymous says:

    @MC Since the effect requires full Aero to be enabled, I feel pretty safe in suggesting that this is farmed out to the video card, and the CPU is almost not involved at all.

  14. Anonymous says:

    I actually did notice this effect, and I wondered how it picked the color.  I noticed for some icons that were predominantly one color, with a little splash of another, the glow would match the brighter color.  Now I know why.

    It's a nice touch.

  15. Anonymous says:

    Raymond should read Long Zheng's blog where it was mentioned ages ago. Instead of fancy features, I would have preferred if the developer who worked on this would reduce the white glow on the button so white text would have been more readable on the taskbar: img811.imageshack.us/…/formoverfunction.png. Or worked to mske the taskbar more configurable like 7 Taskbar Tweaker allows.

  16. Anonymous says:

    @IA: Why would you do this sort of calculation in RGB? Surely converting to HSL and doing something based purely of the hue would be a better idea.

  17. Anonymous says:

    I noticed Chrome handles this quite beautifully in 256 colors.  It's no longer subtle, but it is mesmerizing.  While I haven't actually tried, I suspect that Aero requires more than 256 colors, and so the Win7 color hot-track won't work.

  18. Anonymous says:

    So it picks the color like Ubuntu Unity picks the button background color of icons on the side launcher?  Or like IE9 picks the accent colors from the favicons for its new tab page?

    I believe we have a Design Trend(TM).

  19. Anonymous says:

    @Mc: it's undoubtedly implemented by a shader, your CPU isn't involved at all. (Well, it sends the shader to the GPU I guess, so it's involved a teeny bit.)

  20. Anonymous says:

    @Karellen: the only reason is because I'm not that skilled in other color spaces. You are probably right.

  21. Anonymous says:

    "And even more subtly, the lighting effect is centered on the mouse."

    Interesting comment; for me that was far less subtle. I noticed the fact that the effect followed the mouse long ago, but never noticed that the color changed until you pointed it out here.

  22. Anonymous says:

    Animations may not slow down the PC, but they slow down the user. If a window draws instantaneously but requires half a second to completely show at a stable position, the user brain will pause that time.

    The worst animations I've ever seen are the popup menu scrolling animations of Windows 98. Moving text is inconsciously followed by the eye, at the expense of much brain power, giving headaches after a few minutes.

  23. @Mc: when I first ran Windows XP, I did it in an AMD Athlon 500 with 256 MB of RAM and an nVidia TNT2 with 32 MB of VRAM. Back then, the fashion was stripping XP of the all-new visual styles, because "it made it slower". I *measured* performance with styles enabled and disabled, and found no difference, except for the translucent selection rectangle. Long story short, I have been happily running XP with all visual styles and animations enabled since then. Oh, and the selection rectangle started working smoothly as soon as I upgraded to a Sempron 2400+ more than six years ago.

    Contrary to what they say out there, I find that Microsoft usually does its homework tuning Windows for performance and CPU usage.

  24. Anonymous says:

    @Mason – True true. This has always been a problem. I don't use yahoo but Zune and Adobe Reader are the culprits here. They have bright colours that get in my eye more often than I'd like. But otherwise too, it was one of the first fancy features that caught my eye. I remember literally drool over the new taskbar for the first 5 minutes. Windows 7 seemed that new and fresh at launch.

  25. Anonymous says:

    Yeah, I've noticed that ever since I installed Windows 7.  I tend to notice it the most when it glitches and the hot-track highlighting *stays* on a button even when I move the mouse cursor off the taskbar.

    This is particularly annoying when the button in question belongs to Yahoo Messenger.  The dominant color there is a yellow-orange color that's close enough to the orange that Windows highlights it in when someone sends me a message that it's hard to tell the difference.

  26. Anonymous says:

    Wow, those sure are some photocopiers all right.

    (Now think back to five-odd years ago, when all the "cool" Linux themes were trying to look just like a certain other competing desktop OS.  I hope the Windows design team are suitably proud of having inspired such flattering imitation!)

  27. Anonymous says:

    Just wanted to chime in to say I'd always wondered about how they computed that glow color, but never enough to actually find out. Thanks.

  28. Anonymous says:

    Huh.  It's one of the first things I noticed.

    I imagine they just have a bucketing algorithm.  Talk of GPU shaders and spinning off new threads seems to like massively overcomplicating the task of counting 1024 pixels (32×32 icons), once.

    Looking at the results, I really doubt it's a hue-only HSL algorithm.

  29. Anonymous says:

    It's pretty neat but can anyone explain why SQL Server Management Studio gets a green highlight, given that there is barely any green in the app itself?

  30. Anonymous says:

    Seems someone forgot all features start out with minus 100 points. Heads will roll:-)

  31. Anonymous says:

    I doubt a GPU shader is involved. The circular shine and button background are both visible as grayscale bitmaps within the Aero theme's resource and presumably just get recoloured by the CPU. Calculating the colour to use is not complex either. (I don't know the exact algorithm, but whatever it's doing won't be much more than averaging a thousand or so numbers.)

    As Less Complicates says, the number of pixels and nature of the calculations involved here are so trivial that using a GPU would be overkill. If the GPU is involved at all, I'd say it's more likely for convenience (e.g. the rest of the code was already set up to use the GPU for other reasons) and not because using the CPU would be too slow.

    Not every nail needs a sledgehammer. :-)

  32. Anonymous says:

    SQL Management Studio gets the green from the green dots that go from the yellow database symbol to the grey and brown hammer/wrench.

  33. DWalker59 says:

    @Grijan:  "it" depends on what kind of performance you are measuring.  The time that it takes Windows to close a window is less if the closing is not animated.  Similarly, it takes less time to move an icon if that movement is not animated.  Redrawing a taskbar icon, for example, in its new (final) location takes less time than animating its slide from its current position to its new position (as when you close a taskbar icon in the middle of other open icons).  

    So I claim that "performance" is, by definition, faster if animations are turned off.  No matter how much CPU and video processing power you have, you can't get around this fact of physics.  

    The system also FEELS faster to me if icons and other things snap into place instantly instead of looking like they are moving around sluggishly.

  34. Anonymous says:

    I like The Dock effect better, it's nicer for your eyes without flashing colors. I thought we left <blink> years ago.

  35. Anonymous says:

    @Steve: SQL MS 2005 seems to have a more white-yellow color than green… I don't use 2008 so I can't comment if you are using that.

  36. Anonymous says:

    @Rangoric/Drak:

    Yes I see there are a few green dots there but it's hardly the predominant color on the icon…on Windows 7 with SQL Server 2008 SSMs the highlight is green for only a few green pixels. Ah but I'm only nitpicking, it's really not important  – I wonder though out of interest how do they define "predominant"?

  37. Anonymous says:

    @Steve:

    I think the green color comes about because the RGB values for yellow contain a lot of green also.  When averaged together with the green dots it's enough to push the dominant color to a more pure green.

Comments are closed.