Color Wheel Theory and History

The first color wheel has been around for more than 300 years and was developed by Sir Isaac Newton. Other color charts, though, existed before that time. The basic design has evolved over time but the concept remains the same – almost any color combination from the wheel will work together.

All of the colors we can perceive are produced by the mixing of certain basis colors. There are three categories of colors:

Primary Colors (Red, Yellow, and Blue) are those that are not formed by the mixing of any other colors and can be said to be "pure" colors.
Secondary Colors (Orange, Green, and Violet) are those formed by the mixing of two or more primary colors.
Tertiary Colors (Red-Orange, Yellow-Orange, Yellow-Green, Blue-Green, Blue-Violet, and Red-Violet) are those produced by the mixing of two or more secondary colors.

The color wheel also visually illustrates color "temperature"--warm vs. cool--as vital psychological components in delivering a specific color's message:

Warm Colors (Red, Orange and Yellow) are associated with the warmth of fire and sun.
Cool Colors (Blue, Green, and Violet) connect in the mind's eye with the coolness of sea, sky, and foliage.
Colors are further broken down in terms of their properties: "Hue", "Saturation", and "Value":

Hue and Color are synonymous terms and can be used interchangeably. Hue is color in its purest form. The colors of the color wheel are hues.
Saturation and Chroma are synonymous terms and refer to the intensity of a color. Saturation is determined by how much or how little gray a color contains.
Value is the lightness or darkness of a color. Lightened values are called "Tints", darkened values are called "Shades", and medium values are called "Midtones".

 
     Hue (color)      Saturation (Chroma)      Value

According to color theory, harmonious color combinations use any two colors opposite each other on the color wheel, any three colors equally spaced around the color wheel forming a triangle, or any four colors forming a rectangle (actually, two pairs of colors opposite each other). The harmonious color combinations are called color schemes – sometimes the term 'color harmonies' is also used. Color schemes remain harmonious regardless of the rotation angle. Following are the "Classic Color Schemes."

Monochromatic Color Scheme
The monochromatic color scheme uses variations in lightness and saturation of a single color. This scheme looks clean and elegant. Monochromatic colors go well together, producing a soothing effect.

You can use it to establish an overall mood. The primary color can be integrated with neutral colors such as black, white, or gray. However, it can be difficult, when using this scheme, to highlight the most important elements.

Complementary Color Scheme
Colors from opposite positions on the color wheel are considered to be complementary. Red and green, yellow and violet and blue and yellow-orange are complementary colors.

Using complementary colors creates a high-drama, high-contrast look for your project, especially when the pure hue is used for each; banking giant ING showcases a complementary color scheme. A complementary color scheme is great for small pops of color to make items stand out but can be difficult to use. Avoid using a complementary scheme for large projects or as the basis for your website, also avoid text in complementary colors.

Several other types of complementary color schemes combine this two-color pairing with additional colors for four-hue palettes. The split complementary scheme uses a color, a complement and the two colors adjacent to it. A dual complementary scheme uses two colors side-by-side on the wheel and the pair of opposite colors. Further, the near complementary scheme uses a hue just to the right or left of the complement color on the wheel to form a color pair.


Analogous Color Scheme
Analogous color schemes use adjacent colors from the color wheel. The result is a visually pleasing and calming display of color. One of the colors in an analogous color scheme is used as a dominant hue. Select a second color to support the dominant hue and a third to use as an accent.

One idea behind this use of color comes from nature. Think of a field of grass, it is made up of many variants of green and yellow. This principle is applied on the website for the Yellow Bird Project, which appropriately uses a yellow scheme.


Triadic and Tetradic Color Schemes
Triadic color schemes, which use three colors equidistant from one another on the color wheel, are among the most popular used by designers. Triadic color schemes create a sense of equality and security, because of the use of varying hues.

Triadic color schemes also tend to be quite vibrant and should be used in a way that best uses this feature. Balance color by selecting a dominant hue and use the two other triadic colors as accents. Julie & Co. starts with purple for the borders and right rail and adds green and orange accents for photos and text.

A tetradic (or rectangle) color scheme, which uses a combination of four colors, is similar to the triadic because it is vibrant and should contain one dominant color. The arrangement of colors comes from two sets of complementary colors, meaning the four hues are not equally placed around the color wheel. A rectangular scheme may use a combination of red and green with red-orange and blue-green. Watch how warm and cool colors are used in this scheme to create the desired effect.

Much like the tetradic scheme, a square color scheme uses four colors, but colors are spaced evenly around the color wheel. Again, a single hue should be dominant with the others used as accents. Again, keep an eye on the use of warm and cool colors in this four-hue scheme.


Split Complementary Color Scheme
The split complementary scheme is a variation of the standard complementary scheme. It uses a color and the two colors adjacent to its complementary. This provides high contrast without the strong tension of the complementary scheme.