Choosing the Right Highlight Color for the ButtonSeven Control

Download source code

View sample

When you pick the colors, do not focus on the average color. Instead, pick one of the colors that is most visible, and make sure it’s highly saturated to make the highlight look good.

If the image has two or three different colors, pick the one that is on the background. For example if the icon shows a red house on a green grass background, pick green.

If you end up with many icons of the same color, it might be nice to recolor them a bit to get various colors and more pleasing look.

You will also have to set the opacity of the highlight color. I found that if I set the opacity to 0x7f, it looks best. You may want to experiment a little with different settings though.

Here’s an example:

<local:ButtonSeven Title="Links" ImageSource="images/links.png" TransitionColor="#7f3E8DDD" NavigateUri="http://www.nokola.com/links"/>

More Info About the Control

The highlight is created using a RadialGradientBrush, and movement of the highlight is done similarly to how the SaturationLight sample does it

Back to sample