Using the complementary color of the phone accent color in your WP7 app

I’m building a Windows Phone app where I want to compare 2 objects to each other visually by showing graphs on how good each of the objects is performing. because I like to use the accent color in my apps I was thinking of what would be a good second color for the other graph. Since I’m not a designer I did some research on colors and found out that every color has a complementary color that is exactly the opposite color of your primary color. (Probably some basic design knowledge I didn’t know that.

Calculating this color is done by simple math. Your primary color + the complementary color should add up to hex value FFFFFF (white) so if you just remove the R G and B values of your color from the max value 255 you’ll end up with your complementary color.

So how to do this in your windows phone project? Let me first show you the results and after that I’ll explain how I created a resource you can use in blend to bind to your complementary color. Below are screenshots of a sample app (download at the end of this post) that displays the phone accent color and its complementary color. I’ve taken screenshots of every color so you can see what the results look like. The first rectangle shows the phone accent color while the second shows it’s complementary color.

complementary1 complementary2 complementary3 complementary4 complementary5 complementary6 complementary7 complementary8 complementary9 complementary10

So let’s see how to use this color in code. I’ve created a class calles “Resources” and I’ve added 2 public static properties in it. 1 called ComplementaryColor and 1 called ComplementaryColorBrush. You’ll use the Brush property mostly when binding but if you would like to have the color it’s also available.

public class Resources
{
    private static Color _complementaryColor = new Color()
    {
  
        R = (byte)(255 - ((Color)Application.Current.Resources["PhoneAccentColor"]).R),
        G = (byte)(255 - ((Color)Application.Current.Resources["PhoneAccentColor"]).G),
        B = (byte)(255 - ((Color)Application.Current.Resources["PhoneAccentColor"]).B),
        A = ((Color)Application.Current.Resources["PhoneAccentColor"]).A
    };
  
    private static Brush _complementaryColorBrush = new SolidColorBrush(_complementaryColor);
  
    public static Color ComplementaryColor
    {
        get
        {
            return _complementaryColor;
        }
    }
  
    public static Brush ComplementaryColorBrush
    {
        get
        {
            return _complementaryColorBrush;
        }
    }
}

The calculations of the complementary color is done by subtracting the R G and B values from the max of 255 and they are stored in a new Color property. this color is then used in our ComplementaryColorBrush.

To use these properties in blend we’ll just add this class as a resource in the App.xaml file:

<Application.Resources>
    <ResourceDictionary>
        <resources:Resources x:Key="Resources" d:IsDataSource="True"/>
    </ResourceDictionary>
</Application.Resources>

When we build our project and open up Expression blend we can now use this color by selecting the rectangle and going into the databinding menu for the fill property and then selecting the ComplementaryColorBrush.