The Color Wheel and Color Theory

By LaurenMarie

Color Wheel: Hue, Tint, Tone, Shade

Color is such a vast and variable element that it can be difficult to cover it fully in any one post. It can also be a little overwhelming when trying to implement it into your designs. Below are some sample color palettes, taken from classic color theory based combinations.

The color wheel is one of the first places I turn for color inspiration and guidance when choosing a color scheme. Color charts and pre-made palettes are nice, but the color wheel is simple and easy to understand and use.

Complementary Combinations

Complementary colors are easy to pick out; they are hues that are directly across from each other on the color wheel.

Complementary Colors: Red and Green

Red and Green
Red and green is one of the more difficult combinations to work with because it tends to remind everyone of Christmas. This is also a combination that is difficult for those with certain types of color blindness. To get away from the connotations with Christmas, try a darker shade of one color and a lighter tint of the other. Or use tints of both. This can have a very fresh, new feeling.

Complementary Colors: Yellow and Purple

Yellow and Purple
For a richer twist, try making the yellow more of a gold.

Complementary Colors: Blue and Orange

Blue and Orange
Blue and orange are a very bold combination.

Although I’ve only listed the primary color combinations, any color that is directly across from another on the color wheel is a complementary color. Notice how each cool color—blue, purple, green—has a corresponding, complementary warm color—yellow, red, orange.

Triad Combinations

Triad means three, and these are also easy to figure out—just pick a color from the color wheel and go to the other two colors that are exactly a third of the way around the wheel.

Color Triad: Primary Colors

Red, Yellow and Blue – The Primary Triad
These are the primary colors and generally coincide with children’s items (take a look at kids’ games, cartoons and toys).

Color Triad: Secondary Colors

Green, Purple and Orange – The Secondary Triad
These are secondary colors, created from the primary colors. The other colors along the wheel (tertiary colors) are blendings of the primary and secondary colors. The tertiary colors can also be combined into triad palettes.

Split Complementary

These are different than triads, although they, too, have three colors. For a split complementary, you take the two colors on either side of the color wheel from the direct complementary.

Split Complimentary: Green, Red-Orange and Red-Purple

Green, Red-Orange and Red-Purple
The direct complementary of green is red, but on either side of red we have red-orange and red-purple. A split complementary is half way between a full complementary and a triad.

Split Complimentary: Orange, Blue-Purple and Blue-Green

Orange, Blue-Purple and Blue-Green
You don’t always have to have a primary color in your palette!

Double Complementary

Be careful with choosing a double complementary color palette because too many colors can overwhelm the eye. Used strategically, though, this can be very effective.

Double Complimentary: Red, Green, Yellow and Purple

Red, Green, Yellow and Purple
Isn’t it interesting to observe that you can’t have a double complementary with all of the primary colors? The complementary of a primary is a secondary color.

Double Complimentary: Yellow-Orange, Blue-Purple, Blue-Green and Red-Orange

Yellow-Orange, Blue-Purple, Blue-Green and Red-Orange
Notice how this is similar in its base colors to the double complementary above, but has a different mood.

More color palette explorations on Creative Curio

Things to Remember or Expert Advice

For more complex color combinations that are still harmonious, create shades (adding black), tints (adding white) and tones (adding grey) to the classic combination hues listed above.

Most colors can have multiple meanings. What blue says to the viewer, for example, whether sad or peaceful, is influenced by the other elements of design and the message of the piece.

The neutral colors like grey, brown and even white can enhance the unity of the rest of the colors if you give them a slight hue. Instead of pure grey, for example, add a touch of blue for a cool appearance, or as a less stark option for white, mix in some yellow or orange.

The warm colors—yellow, orange and red—are good attention grabbing colors and can be effectively used to highlight important information. This would be a good way to use a double complimentary palette; make these brighter colors less prominent. It’s probably not a good idea to make the actual text yellow, though, but rather have some other sort of highlight—an arrow or background box—signal the need for attention.

Other Color Resources

This has been the seventh and final installment in Real World Examples of the elements of design. Previously covered have been line, shape, space, scale, texture, value and color (part 1).