Color Theory, The Color Wheel And Color Schemes

by Steven Bradley on February 9, 2010 - http://bit.ly/12fWc1S

Color is the most relative medium in art —Josef Albers

We all perceive light and color differently. What you see as red is different than what I see as red, though we’ll both call it red. How color affects us and how we react to it is also different

for each of us. Color is relative.

A good design should work in the absence of color. It should work when viewed in grayscale. However color is one of the first things someone will notice in your design and will go a long way in determining if your viewers think your design aesthetically pleasing.

Like everything else your choice in color should be subordinate to your concept and theme. Color should be used to enhance your design, but it shouldn’t be your design.

You can use color to create visual hierarchies and improve the overall balance in your designs.

Much can be said about color. Much more than can be said in a single post. As I’ve planned this post I’ve gone back and forth on whether to keep this a single post or expand it into several posts in order to cover more. In the end I’ve decided to split this conversation about color into two posts.

This first one will focus on color theory, color systems, the color wheel, and color schemes. Next time we’ll move into the meaning of color and thoughts on how you can use color to improve your designs.

Color Theory Color is light. Light is electromagnetic radiation and over a range of wavelengths it makes an impression on the human eye. This range of wavelengths is the visual spectrum.

When light hits an object some wavelengths are absorbed and others are reflected. We see the reflected wavelengths of light as color. When all the wavelengths in the visual spectrum are absorbed we see black and when all are reflected we see white. When some are absorbed and some are reflected we see different colors of the spectrum.

Color can be described in three ways. By name, By purity, and by value or lightness. We have several terms to help us describe colors in those three ways. As you read the terms below glance back at the image above.

Hue: When someone is talking about hue they are talking about the actual color of an object. Green is a hue as are red, yellow, blue, purple, etc.

Chroma: Refers to the purity of a hue in relation to gray. When there is no shade of gray in a color that color has a high chroma. Adding shades of gray to a hue reduces it’s chroma.

Saturation: is the degree of purity of a hue. It’s similar to chroma, though not quite the same thing. Pure hues are highly saturated. When gray is added the color becomes desaturated.

Intensity: The brightness or dullness of a color. Adding white or black to a color lowers it’s intensity. An intense and highly saturated color has a high chroma.

Value/Luminance: Is a measure of the amount of light reflected from a color and is basically how light or dark a hue is. Adding white to a hue makes it lighter and increases its value or luminance. Consequently adding black makes it darker and lowers the value or luminance.

Shade: The result of adding black to a hue to produce a darker hue

Tint: The result of adding white to a hue to produce a lighter hue Tone: In between black and white we have gray. A color tone is the result of adding

gray to a hue. Shades and tints are tones at the extremes.

When I have found the relationship of all the tones the result must be a living harmony of all the tones, a harmony not unlike that of a musical composition. —Henri Matisse

Color Systems Color systems refer to how we produce colors. When producing physical colors as in paint a subtractive system is used and when producing colors digitally as on a computer an additive system is used.

The colors you see on your computer screen may not end up being the same colors other see on their computer screens. The differences may be even more pronounced if your images end up in print. Color management can help make things more consistent, but understand there will likely always be some differences.

Subtractive Colors (CMYK) When we see colors in physical objects we’re seeing reflective light. When we see red it’s because all the other wavelengths of light have been absorbed and only the red is reflected. This is a subtractive system, because to produce color we’re removing all the wavelengths of light who’s color we don’t want to see.

As we add more colors to the system more light is absorbed and the overall color gets darker. Subtractive systems start with white and continue to add color until the result is black.

CMYK (Cyan, Magenta, Yellow, Black) is a subtractive system used to create colors for print.

Additive Colors (RGB) To create colors on a computer screen we have to add light since the light source comes from within instead of reflecting the light coming from outside the system. When there is no light we see black and we as we add more color (more wavelengths of light) we move toward white.

RGB (Red, Green, Blue) is an additive system used to create colors in digital media. Because additive systems are different from how we perceive color in nature our primary colors have

changed. Green (and not yellow) is now primary to the system instead of being a secondary product of blue and yellow.

The Color Wheel The color wheel is a visual representation of most everything we’ve talked about above. The original color wheel is credited to Sir Isaac Newton who joined the red and violet ends of the visual spectrum into a circle.

In the following images you can see how a color wheel is created. You start with the primary colors located at the corners of an equilateral triangle and then set a similar triangles rotated 180 degrees to create the secondary colors. In between these colors will be the tertiary colors.

Notice in the images below that the three primary colors here are red, yellow, and blue.

Now look at the color wheel below. You’ll notice it looks different than the one above. The primary colors here are red, green, and blue and you’ll also notice it shows various tints of colors until it reaches white in the center. This is an RGB color wheel of tints.

You can also find color wheels that show shades and tones. In fact there are a variety of color wheels and color triangles. Remember a color wheel is just a representation of color and there are different ways to express color relationships.

Color Schemes Color schemes come out of the color wheel and the different color schemes are different combinations of colors based on their relationship to each other.

In the images below I’ve lowered the saturation of all colors except those that might be part of the type of color scheme being described.

Monochromatic color schemes are based on different tones of the same color. Here tints of red of shown.

Analogous color schemes are based on colors adjacent to each other on the color wheel

Complementary color schemes are based on colors opposite each other on the color wheel

Triadic color schemes use three colors equally spaced around the color wheel

Tetradic/Quadratic color schemes are created by choosing colors at the corners of a rectangle inscribed on the color wheel

Split Complementary color schemes are created by choosing one color and then two more colors that are adjacent to the complementary of the initial color. Think of it as a combination of a complementary and analogous color scheme.

Additionally there are color schemes not entirely described by the color wheel.

Neutral color schemes include only colors not found on the color wheel (various tones of brown and gray)

Accented Neutral color schemes include neutral colors as above and one or more splashes of colors found on the color wheel.

One last type of color scheme we can talk about are those found in nature. As you might guess they are color schemes based on what you see occurring in nature. You might create a natural color scheme based on the colors you find in a photograph.

Summary This post has focused on the theory behind color, but there’s a lot more to cover such as the meaning we perceive in color as well as how to use color in your design for effect.

For now try to become familiar with the terms used to describe color as well as the various color schemes that come out of the color wheel.

We’ll pick up next time with more details about color schemes and when you might choose to use each.

Resources Throughout this post I’ve linked to a few articles that offer more thoughts and ideas about color. Below are some additional articles and series of articles on color theory.

Given the importance of color and how much there is to know about color you may want to spend some time looking through each of the links below. Much of what’s contained in the follow articles will be similar to what’s here, but each article will likely include some things I haven’t mentioned and increase your overall knowledge on the subject of color.

Basic color schemes – Introduction to Color Theory Color theory – Wikipedia Colour Theory – Dev.Opera Color Theory – Wrox Color Theory – Liquisoft Creating Consistently Colorful User Experiences: Part 1,

This past week, Cameron Chapman has written an excellent series of articles for Smashing Magazine about color, which I specifically wanted to call your attention to.

Color Theory for Designers, Part 1: The Meaning of Color Color Theory For Designers, Part 2: Understanding Concepts And Terminology Color Theory for Designer, Part 3: Creating Your Own Color Palettes