Color Combinations

In addition to understanding color meanings and perceptions, it helps with mixing and matching colors to know the relationship of adjacent, complementary, and clashing colors.

The subject is more fully explained in this Color Basics article from About.com.

Below are samples of the different color styles you can choose for your website.   Remember, it’s not about your favorite colors, it’s about appealing to your target audience.

Here’s a great color chart that lets you choose your own color combinations.

Monochromatic

Single color used in varying shades.  The scheme preferred by the older target audience.

It gives a clean look to a website and is often soothing, pleasing to the eye.  It is perceived as calming, especially blue or green hues.   However, it can also be perceived a dull and boring by younger visitors.


Analogous

Colors that are adjacent to each other on the color wheel.

One color is used as the dominant color.   Other shades are used to enrich the scheme.

This scheme is  similar to Monochromatic but it offers more variation and a richer feel.


Complimentary

High contrast colors – Usually using a combination of two shades next to each other on the color wheel and the opposite of one of them.

When you mix warm colors with cool colors you create a pleasing to the eye effect with an energetic target zone.  Use the target zone color sparing but to draw the eye to something important or interesting on the site.


Split Complimentary

More nuances then complementary.   Retains strong visual contrast but using more subtle combinations.  This scheme is a little harder to balance the colors.

Using a single warm color against a range of cool colors puts the emphasis on the warm color and vise versa.  Be careful using desaturated warm colors (browns or dull yellows) as it may ruin the scheme.


Triadic

High contrast variation of harmonizing colors.  Colors may skip two or three zones on the color wheel and are generally not muted.  These colors are not recommended for the older target audience.

Triadic colors give an energetic feel to the website.  Pick one color as the dominant color or your visitors will get frustrated.  Use the most vibrant color as a “hotspot” to draw attention to information.


Tetradic – Double Complimentary

This scheme offers more color variety but is also the hardest to balance.  Using the Triadic scheme, pick colors that would create a triangle on the color wheel.  Use a lighter shade of one of the colors for best results.  Pick one color for the dominant color.

Avoid pure colors in equal amounts.  This scheme is not well received by your older target audience.