Design 101 – The Color Wheel

One of the most common comments from Silverlight and WPF developers is their lack of design sense. Over the next little while, I’ll be posting (interspersed with other topics) on some of the basics of color theory and how they can be applied to WPF and Silverlight.

To start with, let’s talk about one of the fundamental artifacts of color theory – the color wheel.

Color WheelOriginally conceived by Sir Isaac Newton, color wheel is a representation of the colors in the visual spectrum. In the representation, the three primary colors are placed equidistant from one another. The gaps between the the primary colors is then filled with with secondary and tertiary colors.

Now, already I’ve used three terms, only one of which I would expect you to be familiar with. Primary colors (red, blue and yellow) are something that we learned about in elementary school. Secondary colors (orange, green and violet) are created by combining the primary colors. Tertiary colors are those that are formed by combining primary colors with secondary colors.

So now that we have a color wheel, what good is it? Well, it helps identify harmonious colors. When selecting colors to use in a user interface, it is important so select colors that are, in combination, pleasing to the eye. Personally, I understand the challenge to this. As a person born without the color sense gene, I think that pink and lime green go well together. But apparently, I’m in the minority. :)

There are numerous theories about the combinations of colors that promote harmony. We’ll look at some of them in more detail in upcoming blog entries, but to give you a second, two of the most commonly used ones are complimentary and analogous. Complimentary colors are found opposite one another on the wheel. For example, red-green, yellow-violet, and blue-orange are all complimentary. These colors promote stability and contrast in the image.

Analogous colors are sets of three colors that are adjacent to one another on the color wheel. In images using analogous colors, one of the colors tends to be the dominant one. The result is an image that appears to be saturated in the dominant color with the other colors offering a subtle nuances of difference.