How to Use Color Theory to Create Color Schemes

As a designer with an extensive art background, I find it easier to pick color schemes using concepts of color theory that all artists learn and use every single day in their work. The use and practice of color theory for designers can drastically help their designs become more professional and color schemes feel more natural. In what ways can you use color theory to help you select and improve upon your color schemes? Let’s walk through color theory 101 and talk about how you can use it to develop great color schemes for your next design project.

Primary, Secondary, and Tertiary Colors

colorwheel

These are basic classifications of the colors on the color wheel. As a quick rundown, the primary colors are yellow, red, and blue; the secondary colors are orange, green, and purple; tertiary colors are the others such as yellow-orange or blue-green. They are named this way based on how they can be mixed. Primary colors can’t be mixed to get another color, meaning you can’t mix two colors to get red, you can’t mix two colors to get blue. Secondary colors are the ones you can mix two primary colors together to get, such as yellow and blue make green and red and yellow make orange. Tertiary colors are trickier in that you mix one primary color with one secondary color to get, such as yellow and green makes yellow-green and red and purple make red-purple, and are named starting with the primary color first.

While not used as often, you can create a color scheme based on these classifications. It is less common combining two primary color combinations as it is more common using tertiary color combinations. This is because often pairing two primary colors together is very jarring on the eyes. Below are two examples of the use of primary color combinations in design.

VR80 by Jasho Salazar on Dribbble. Uses yellow and red.

Underwater Restaurant by Chow Hon Lam on Dribbble. Uses yellow, red, and blue primarily.

Here are a couple of examples of secondary colors used as color schemes:

Sally the Sea Lion – Origami by Sam Longley on Dribbble. Uses orange and purple.

Take care of your designer self by Megan Clark on Dribbble. Uses green and purple.

Finally, a couple of examples of tertiary colors used in design:

Fire by Daniel Fishel on Dribbble. Uses yellow-green and red-orange.

ERL Booking System by Eski Mirza on Dribbble. Uses red-purple and blue-green.

Monochromatic using Tints and Shades

monochromatic

If you only want to use one color in your design, then you have the option of developing it into a monochromatic color scheme. This basically means that you can use all the tints and shades of one hue to create the color variants you need. Tints of a hue means adding white to the color, where shades of a color mean adding black to it.

The idea of adding white and black to it is easy when you are talking about paint, however this can be a challenge in a design program. For tints you can quickly see it by using the opacity of the shape, or for shades you can get the color you want, then start adding black to it in the color panel.

Here a few examples of monochromatic color schemes.

Pond Icons by Christopher Pond on Dribbble. Uses tints and shades of blue-green.

Avengers Projects Final by Jose Garza on Dribbble. Uses tints and shades of yellow.

San 2280 by Alexsandra Ortiz on Dribbble. Uses tints and shades of blue.

Analogous Colors

analogus

Analogous colors are those that are located next to, or adjacent to each other. These often include one primary, one secondary, and most of the tertiary colors in between. An example of an analogous color scheme includes yellow, yellow-orange, and orange.

In addition, there isn’t really a defined number that constitute an analogous color scheme. You could have just two colors, three colors, four colors, or even five colors that are all next to each other in a row for a color scheme. Also, you can span two different hues as well, such as red-orange, red, red-purple, and purple as a color scheme.

Here are a few examples of analogous color schemes used in design.

Bordo Bello by Mackey Saturday on Dribbble. Uses the analogous colors of orange, red-orange, red, and red-purple.

Sign Up Form by Graham McDonnell on Dribbble. Uses the analogous colors of blue, blue-green, green, and yellow-green.

Monster Kart by David L. Wehmeyer on Dribbble. Uses the analogous colors of yellow-green, yellow, yellow-orange, and orange.

Complementary Colors

complementary

Complementary colors are basically colors that are opposite of each other on the color wheel. Think some major sports teams. For instance, the Baltimore Ravens NFL football team uses purple and yellow in their branding. Yellow and purple are located opposite of each other on the color wheel. Christmas is another one with a popular complementary color scheme: red and green.

Complementary color schemes can get even more complicated when using opposites, such as yellow-orange and blue-purple (using directly opposite tertiary colors) or even using a couple that are opposite of one color: yellow, purple, and red-purple.

Below are a few examples of complementary color schemes.

Power covers (2 of 4) by Adam Johnson on Dribbble. Uses the complementary colors red and green.

Shielf Logo by Ronald Hagenstein on Dribbble. Uses the complementary colors blue and orange.

Tools to pick color schemes based on color theory

To make it all a little bit easier for you guys, there are a couple of tools online that can help you pick color schemes that use the basics of color theory explained above.

Color Scheme Designer

This one is my personal favorite. Color Scheme Designer lets you start working on your color scheme based on a lot of the color theory basics I went over above. They go into a few others I didn’t, but you can play around with color schemes or opt for random ones. For this designer with a heavy art background, this makes sense and helps me figure out what is missing in my color schemes.

Color Wizard

An in-page setup, Color Wizard lets you pick colors and start basing them off of the color theory basics above, a lot like Color Scheme Designer does above. You can start by picking a color, then choosing what color theory you want to use. It also easily provides the Hex code values for you as well.

In what ways do you develop your color schemes? Do you use color theory as well, or take inspiration from other things, such as pre-designed schemes or lifting colors from a photograph?

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote