In the past I’ve covered how to create colors on web pages, how to compensate for color blindness, different color spaces, gamma, and which CSS color system to use when. In this entry I’ll address color theory.

This can only be the most basic introduction to color: over the last 1000 years writers with far greater skill than I have explored the topic in much more depth than I can express here. However, I would warn readers to be very careful about reading too deeply into the “meanings” of color:

Colors tend to be strongly cultural, and thus regional. For example, you may have someone tell you that “purple is associated with royalty”, which is true, at least in the West: historically, a natural purple was extremely difficult to extract, being derived from a tiny gland in sea snails, and therefore reserved for the very wealthy and powerful. However in some Eastern cultures, purple is the color of mourning. Similarly, white is associated in the west with purity and peace, but in the East (particularly Japan) it is associated with death and funerals. When we make a website, it is international by its very nature. Don’t allow anyone to tell you what a color “means”.

Color choices may be as individual and unique as food pairings, but they usually follow a certain logic: just as most of us wouldn’t eat pickles and fried chicken with ice cream, we would look askance at anyone who claimed “I really like these two colors today, so I’m going to paint my house with them.” There are many considerations that should be made in regards to color: what other hues will be present, how it works environmentally, the product or theme to be communicated, etc.

While there will always be an opportunity for “edgy” color choices, it is usually best to stick to established, proven, mathematical systems to determine harmonious color choices, the most popular of which is the color circle.

There are many variants of the color circle (or wheel), the very first of which was proposed by Sir Isaac Newton. The most common color circle consists of the three primary colors (red, yellow and blue) separated from each other by 120 degrees. (Other variations use red, green and blue as their primary colors). “Secondary” colors are generated by graduations between these primary colors: blue to red produces purple, red to yellow produces orange, and yellow to blue creates green. “Tertiary” colors are still-finer graduations between the secondary and primary colors. Colors lighten as they near the centre of the wheel, and darken as they reach the edge.

With our color circle created, it is easy to create great color combinations by a simple application of geometry:

A monochromatic color scheme, shown at the very top of this article, is created from colors in the same hue, from light to dark, in a line from the center of the circle. They work very well together as harmonious choices, but do not have a great deal of contrast.

“Neutral” and “analogous” colors are chosen from an arc, usually 90 – 180°, within the color circle. Again, they tend to work well together, but like monochromatic choices they do not exhibit high contrast.

“Complementary” colors are a misnomer: immediately opposite each other on the wheel, and the same distance from the centre, they rarely work well together. However, they are usually highly contrasting, and therefore useful for gaining attention.

“Splits” are triangular variations on the schemes above: most commonly, complementary. They tend to be popular as they are easy to use, and difficult to misuse.

“Triadic” or “triangle” color schemes are any three colors separated by 120 degrees and equidistant from the centre of the wheel. A “square” or “tetradic” color scheme is the same idea, but with four colors separated by 90 degrees from each other.  There is also a “rectangular” or “four tone” color scheme, which works exactly as the name suggests, along with five and six tone schemes.

As a general rule, the more colors you select, the more difficult it is to find a balance between them. It would be my advice to stick to and thoroughly learn the basic color schemes (with a possible selection of closely related, “backup” colors drawn from your chosen colors), especially at the beginning of your design career.

Whatever color system you use, the same general rules apply: choose one color as a dominant or leading color, a second for support, and a third, if needed, for accent, and use them consistently in those roles. colors chosen from the “active” or “warm” range will appear to “advance” – exhibit more visual weight and emphasis – when placed against “cool”, “passive” colors.  Of course, all of this assumes that we are presenting our color choices to people with “normal” sensitivity to color.

Next in the series, I’ll look at tools to help you make color choices, and share a few sources of inspiration.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.