Color Theory Tips

Color Theory Tips – Give Your Site Design a Facelift

 

This is a follow-up from the Color Psychology and How it Affects Your Site article. Using color on your site is a great way to show individuality and creativity, however too much color can have a negative or unwanted effect.

In this article I will cover color theory, harmony and basic rules on how to use color.  It is important to understand how different colors work together to create harmonies so you can choose a good color theme for your site.

What is Color Theory and Harmony?

Color Theory: is developing aesthetically pleasing color relationships.

Color Harmony: is a successful color relationship that can be applied to an infinite number of color combinations.

Basic Color Theory

The following section will give a quick overview of basic color theory.

Primary Colors

The primary colors are:

• Red
• Blue
• Yellow

Secondary Colors 

Secondary colors are created when two primary colors are mixed together (creating a new color).

The secondary colors are:

• Purple/Violet (Red + Blue)
• Orange (Red + Yellow)
• Green (Blue + Yellow)

Tertiary Colors

Tertiary colors are created when one of the following happens:

1. One primary and one secondary color are mixed together.
2. Two secondary color are mixed together

The tertiary colors are:

• Red-Orange
• Yellow-Orange
• Yellow-Green
• Blue-Green
• Blue-Violet/Purple
• Red-Violet/Purple

Color Harmonies

Color harmonies consist of similar hues or contrasting ones that are soothing to the eye.

Color harmonies are usually subjective to personal preference; however there are some guiding principles that help make effective decisions about color usage.

A color by itself can elicit an emotional and physical response. The nature of this response can be altered by placing it in context with one or more colors. Perception of a color shifts dynamically when aligned with other colors.

You can vary color combinations to product color relationships (harmonies) that are allied or contrasting and therefore can affect the viewer’s impression.

Color Harmonies 

• Complementary
• Split Complementary
• Double Complementary
• Analogous
• Triadic
• Monochromatic

Complementary: These are color pairs that are directly opposite to each other. These harmonies represent the most contrasting relationships. Using complementary colors cause a visual vibration and will engage the eye.

Example of complementary color schemes for your website:

Split Complementary: A split complementary is three colors (one color accompanied by 2 other) that are equally spaced from the first color’s complement. This harmony tones down the harsh contrast of a complementary harmony, providing a more sophisticated relationship.

Example of  split complementary color schemes for your website:

Double Complementary: The combination of two pairs of complementary. When using a double complementary harmony, avoid using equal amounts of all four colors (use one color as the main color and accent with the other 3 colors). This will make the scheme less jarring.

Example of  double complementary color schemes for your website:

Analogous: These are combinations (two or more colors) that are equally spaced from each other on the color wheel. These colors in a analogous harmony have similar light wave lengths (so they are easier on the eye).

Example of  analogous color schemes for your website:

Triadic: Triadic harmonies are combinations of any three colors that are spaced evenly around the color wheel. This is one of the most commonly used color harmonies. Triadic harmonies work best when using secondary and tertiary colors, primary colors can result in gaudy relationships. A triad with two colors that share a common primary (example: Green and purple share blue.) can produce a more pleasing result.

Example of  triadic color schemes for your website:

Monochromatic: These color schemes are made up of  shades and tints of one color (Example: Green). Monochromatic schemes use one hue and a variety of saturations and lightness to form a relationship of similar colors. Monochromatic color schemes work well for website design.

Example of  monochromatic color schemes for your website:

Color Tools (Resources)

Here are some great color tools and resources to help you color scheme.

Color Wheel: Anyone working with color should have a good color wheel. There are many different versions of the color wheel (including both digital and physical). I believe the most useful one is the twelve – step color wheel. (Add color wheel graphic download).

Websites: There are many color websites however I personally use and recommend the following (these are also great for color inspiration).

• Colourlovers
• Kuler (Adobe)
• Color Scheme Designer

Desktop Applications: There are many desktop application for color management and scheming. I personally like to use software from Pantone (industry leader in color management).

• Colormunki
• Pantone Color Manager Software

Now that you understand a little more about how colors work together, you can play around with the color combination of your site’s theme and make it even more appealing.