In the past we’ve covered how to create colour in CSS, and how to compensate for colour blindness, different colour spaces, and gamma. In this entry I’ll address colour theory.

This can only be the most basic introduction to colour: over the last 1000 years writers with far greater skills 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 colour, which 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 colour 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 colour “means”.

Colour choices may be as individual and unique as food pairings, but they usually also 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 colours today, so I’m going to paint my house with them.” There are many considerations that should be made in regards to colour: what other colours will be present, how it works environmentally, the product or theme to be communicated, etc.

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

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

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

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

“Neutral” and “analogous” colours 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” colours 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” colour schemes are any three colours 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 colours 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 colours 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” colours drawn from your chosen colours), 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. Colours chosen from the “active” or “warm” range will appear to “advance” – exhibit more visual weight and emphasis – when placed against “cool”, “passive” colours.  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.