Basic Color Theory in 5 Minutes

Apr 17, 2013 | Articles, Featured, Guide

Color theory is a part of design that transcends any particular discipline. It’s as important when decorating a house as it is when you design a website. Knowing how to apply color theory is an almost guaranteed way to make things look better and more professional. Here are some of the basic fundamentals of color, just enough to get you started.

The Basics of Color Theory

Color WheelThe color wheel that most of us have seen since we were in elementary school, was invented in the early 1700s by Sir Isaac Newton. It is still used today as the basis of color theory. It is comprised of the following:

Primary Colors

The three primary colors, red, blue and yellow, are spaced evenly around the color wheel. They are the most basic colors since they cannot be created by combining other colors, but they themselves can be mixed to create any other color. These are the atoms of the color world.

Secondary Colors

These colors are created by mixing together equal parts of two primary colors. Red and blue make purple, blue and yellow make green and red with yellow produce orange. Secondary colors are placed between the two colors that make them up on the color wheel.

Tertiary Colors

By now you should see a pattern emerging. Tertiary colors are composed of a primary color and one of the secondary colors next to it. An example is mixing blue and green to get blue-green. As before, these colors are placed between the two colors that make them up in the color wheel.

What About Black and White?

While you may think of black and white as colors, in reality they’re not. Each color in the color wheel can be darkened or lightened by adding black or white, making an ever wider variety of colors. For example red can become maroon with a little added black, or pink with a bit of white. They are not represented on the color wheel.

Color Schemes

You may ask yourself what good it does to know the color wheel. Besides for mixing paint, it doesn’t really solve anything just having a pretty circle with colors. But you can do amazing things with that little circle when you know how to use it. There are many ways to use the color wheel to make a great color scheme, but here are the four most basic.

Monochromatic

Monochromatic Color SchemeAs you might tell from the name, monochromatic color schemes use varying shades of just one color from the color wheel. It creates an effect very much like a black and white television or an old Game Boy. The website and painting below show examples of monochromatic color schemes in design.

This effect is often clean, subtle and conservative, but can also be very elegant. It’s important that the shades of color that you use can contrast each other enough, or else it can be hard to distinguish text or other details. Using white and/or black withing the design is also a good idea or it can become a little boring.

Monochromatic Website Monochromatic Painting

Complementary

Complementary Color SchemeComplementary color schemes are created from colors that are on directly opposite sides of the color wheel. For example red and green, or blue and orange.

Because they’re on opposite sides of the color wheel, complementary color schemes tend to have a lot of contrast, making it seem very lively. Sometimes it’s a good idea to use one color as the main color and the other as an accent color so that everything looks a bit more balanced. Also note that these combinations are typically bad for text. You don’t want to look at red text directly on a green background.

Complementary Website Complementary Room Design

Triadic

Triadic Color SchemeTriadic color schemes are made up of three colors. Each of the colors is equally distant from each other, such as the three primary colors, red, blue and yellow. They form a triangle within the color wheel.

Because of the number of colors involved, triadic colors require a bit of experience to form into a pleasing color scheme. When used well though, they can produce vibrant and sophisticated results that give the eye plenty to look at. Care should be taken to create balance so that it doesn’t look too excessive. Often a 60-30-10 guideline will keep things in check. Choose a main color and use that for 60% of your design. One of the other colors can be used for certain elements in 30% of the design. And the remaining color can be used as an accent for the last 10%.

Triadic Website Triadic Logo

Adjacent/Analogous

Adjacent Color SchemeAn adjacent color scheme, also known as an analogous color scheme, uses colors that are next to or near each other on the color wheel. An example would be blue-green, green and yellow-green.

Adjacent color schemes are often found in nature and there is a natural harmony to them so that they are easier to create than triadic color schemes. They are also very versatile and pleasing to the eye. Typically one color would serve as the dominant color with the other two acting as accent colors.

Adjacent Website Adjacent Flower

Expanding Your Horizons

There’s much more to learn about color besides what’s in this article. No single article, or even book, could cover it all. There’s more types of color schemes beyond the basic four such as tetradic, split complementary and neutral color schemes. There’s also many ways to use the color schemes you’ve learned here. Making colors lighter, darker and mixing them with neutral colors mean endless possibilities. Look around you and you’ll be amazed at how many things are made with color schemes. Just like most design, there’s no right or wrong way to go about it, but the more you learn, the easier it will be to find your own style and the more fun you can have.