Thread: Color Theory 101 , The basics of color as it applies to design.

Step one: The Color Wheel

There are three types of colors or HUEs, primary, secondary, and tertiary (or intermediate). The Primary Colors are Red, Yellow, and Blue. The Secondary colors are Orange, Green, and Purple/Violet. The Tertiary colors are Red-Orange, Yellow-Orange, Yellow-Green, Blue-Green, and so on and so forth. *Do not worry about RGB and CMYK. It has no effect on color theory.

If you will look at the chart above you will see a solid triangle that connects the primary colors and a dotted triangle that connects the secondary colors. There is also a circle that connects all the colors.

"Oh, yes" you will say, "I know that". All the same it is very important to start with these basics everyone knows to get to the next step.


Step two: Neutrals

There are four neutrals. Black, gray, white, and brown. We will begin with the achromatic neutrals or those without color.

Black is the absence of color. In art terms it is referred to as a SHADE.
White is the presence of all color found in pure light. It is referred to as a TINT.
Gray is what you get when you blend black and white without adding any color. It is referred to as a TONE.

Remember those names, shade, tint, and tone. They are what gives you your shadows and highlights that create depth and interest as you blend them with your color/hues.

Brown is the only neutral color/chrome. It is the result of blending two complimentary colors or colors opposite to each other on the color wheel. This will be important as we discuss Color Schemes.


Step three: Color Schemes

There are multiple color schemes/combinations that can be used to create a cohesive whole in design. Learn them and memorize them. Once you know them by heart then you will also know how manipulate them to suit yourself. As we say in design, "you have to know the rules to break them".

* Achromatic: Using only black, gray, and white. Without color.
* Neutral: Using brown, black, gray, and white. Usually has brown as it's main focus.
* Monochromatic: Using a single color/hue with any neutral.
* Primary: Using red, yellow, and blue with any neutrals.
* Secondary: Using orange, green, and purple with any neutrals.
* Complimentary: Using any two colors directly opposite each other on the color wheel along with any neutrals.

Now you need to be careful when using complimentary color schemes. Since complimentary colors are used to create browns if the colors are placed right next to each other it can result in the eye blending them and give a "muddy" feel. It is best to use achromatics with complimentary color schemes to separate them and prevent this from happening (unless you are trying for an "earthy" feel).

Those are the easy ones. Now we get into my favorites.

* Split Complimentary: Any color with the colors on either side of it's compliment. For example, Violet with Yellow-Orange and Yellow-Green.
* Analogous: Any 3 or 4 colors next to each other on the wheel (following the circle). Under analogous we have the additional types of:

1. Warm: Any combination of colors made of red, orange, and yellow.
2. Cool: Any combination of colors made of green, blue, and purple/violet.

* Tertiary: Created by taking the triangle found in the color wheel belonging to the primary or secondary color schemes and shifting it by one space to a tertiary combination. It's more complicated but gives great results.

Step 4: Color Selection

Color and color combinations can be created using the above. Where it gets interesting is in your color selection. This is where the use of shade, tint, and tones comes in. Take a look at this Photoshop color selection chart.

On the right side of the chart is the pure saturation of color involved, in this case red. On the left side is the pure shade (bottom) and pure tint (top) with all the tones (gray) in between. As you move up and down across the chart you will get different saturations, tints, tones, and shades of red. By varying your infusion of the achromatic you can create the shadows and highlights of your colors within the color scheme.


Step 5: Summary

In summary I have this chart that Stormraven made after a long discussion we had on color theory one day that she has so kindly donated to the tutorial. Feel free to download the image if you need to just do not repost it on the net without her permission.