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

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

To page 1To page 2To page 3To page 4current pageTo page 6
[previous] [next]

Web Graphics for Non-Designers, Chapter 2: Using Color

Complementary

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.

Complementary colors

Complementary swatches:

Complementary Color Swatch Example

Complementary Color Swatch Example

Complementary Color Swatch Example

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:

Double Complement Example

Split Complement Example

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.

Example: fusion.com.au

Screenshot:

fusion.com.au

Complementary Color Swatch Example

Fusion are new media developers. Their site presents a bold and confident appearance with a striking complementary combination.

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.


To page 1To page 2To page 3To page 4current pageTo page 6
[previous] [next]

Created: December 2, 2002
Revised: December 2, 2002

URL: http://webreference.com/authoring/languages/html/definitive/1/5.html