Principles of Color and the Color Wheel

The first color wheel has been around for more than 300 years and was developed by Sir Isaac Newton, according to ColourLovers. 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.

A basic color wheel features 12 colors that can be combined in a variety of ways to create a number of different effects. Colors can complement one another, or even create chaos. Colors are also divided into categories of warm and cool. Warm colors are vivid and energetic and fall on the wheel from red to orange and yellow-green. Cool colors, which range from violet to blue and green, are considered calming and soothing. White, black and gray are neutral and take on the properties of surrounding colors.

Expanded color wheels build on this design and add equal variants of color around the wheel. Some wheels also include tints, shades and tones of each color. A tint is a variant of a color made by adding white to lighten it. Shades are a darkening of each hue accomplished by adding black to a color. Adding gray to a color creates a different tone.

Types of Color

The basic principle of the color wheel starts with three primary colors – red, yellow and blue. The colors are placed equidistant on the wheel. Primary colors are the basis for all other color and any color can be made using a combination of primary colors.

Secondary colors are made by mixing two primary colors from the color wheel. The results – orange, green and violet – are centered between the colors mixed to make them on the wheel.

The last group of hues, tertiary colors, is made from mixing a primary and secondary color. Each color has a two word name, such as red-orange, blue-purple or blue-green. Tertiary colors rest between the colors used to form each on the color wheel.

Color schemes are generally created by selecting and combining two, three or four colors in a palette. Each color scheme can be made from a pure hue, tint, shade or tone. Match hue to hue, tint to tint and so on for the best color combinations.

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.

More Color Schemes

In addition to the basic types of color schemes noted above, there are a handful of others that are widely used.

One of the most popular, and modern, color schemes is the monochromatic look, such as that used by Dark Crimson Productions. Each hue used in the palette is a tint, tone or shade of a single color. The look results in an organized and direct feel.

Neutral schemes use shades of only browns and tans. You can “neutralize” any color by mixing it with its complement.

Achromatic schemes are created by using shades of black, white and gray. Achromatic schemes have a stark feel and can benefit from small pops of color.

Color can be tricky

Although it may seem pretty simple, color is about more than just making pairs on the color wheel. Color can create a mood and dictate the identity of your website. Think about how you are using each color — as a background, for accent, for text — and play with different schemes. Think about how tints and shades can add impact and drama in the right places.

Also consider how each color will work in its surroundings. Each hue can take on the properties of its neighbors in certain combinations, almost creating a new hue. Look at the green above, the color is exactly the same in each block but appears different because of the surrounding colors.