Color Theory / Color Schemes - Part 1 of Chapter 2 from Web Graphics for Non-Designers (5/6)

Selecting colors opposite each other on the color wheel creates a scheme of complementary colors. The opposite of the primary blue, as per the diagram below, is orange. For purple, the complementary is yellow, and so on. In each of the swatches below, the two tones on the left complement the two on the right.

Once you have mastered selecting complementary colors, it may be time to experiment with the double complement, that is, choosing two sets of complementary colors. Alternatively, consider the split complement that chooses a hue and two colors adjacent to its alternate. The diagram below shows an example of color positioning for a double complement (left) and split complement (right) on a color wheel:

Remember that simplicity is one of the key components of successful web design. There is nothing to be ashamed about using a scheme in which you have confidence, rather than striking out into fresh color ground simply for the sake of it.

Complementary color schemes can give sites a vibrant feel. Sites designed to appeal to children often use these themes to appear exciting and dynamic. Such choices also appeal to parents buying for their children, who understand that a lively environment can be a positive influence on a growing mind. A complementary scheme commonly used is the red and green combination invoked by retailers during the Christmas season. You should be conscious, though, of the way in which complementary colors can behave near each other. Color behavior is discussed at a later point in this chapter.

These combinations can also present a subdued feel if de-saturated hues are used. Also, be aware that the screen space devoted to your main colors can substantially alter your final effect. As an example, a page that is almost entirely monochromatic, but with a slight addition of titles or features in a bright complement can create a punchy effect without looking like it is an entertainment site for children.