Color mixing systems

Color mixing can generally be divided into two approaches. Additive and Subtractive.

An Additive Color involves adding colors together to result in white.

A good rule of thumb is that any emissive light source, stage lights, monitors, tvs, and so on, can be considered a form of additive light. You may notice at a concert or stage play how many of the lights above the stage are different colors, but the subject on the stage seems to be standing in perfectly white light. This is because all the different parts of the spectrum are adding up to white.

This is why, when looking at a computer screen like you are now, you're probably seeing things display using an additive (RGB) color space (Even if you are editing an image in another color mode the color information will be converted to RGB upon display).

Subtractive Color involves removing brightness as colors are combined.

Subtractive is what you'll be familiar with if you've used traditional mediums like oil or water paints, where the more pigment you add to your canvas the darker or murkier the result is. You may not be able to get to black with simple color paints, but black is generally seen as the "cumulative" target.

It's an important concept to keep in mind if you ever wish to print an image because, while you may have made it in an additive space on your computer, you can only print in the real world with subtractive inks.

Note: You may wonder how you can get a brighter pink or cyan out of the subtractive model like on the right. Red, Yellow, and Blue are the traditional way of showing subtractive colors, but in reality Cyan, Magenta, and Yellow are used in actual professional color mixing. This model is explained further down the page.

Additive (left) and "ideal" subtractive colors, of equal brightness, arranged in wheel form.

Color labels

There are many labels for colors, but I'm not referring to variations of more familiar colors, as violet is to purple or teal is to blue. These names are useful for non-technical speech or paint cans in the store, but they present a problem. That problem is that if you were to use the phrase "teal", you're dependant on the person, or perhaps program, that you're talking to knowing the exact numerical values of that phrase. If you have agreed on a system before hand, then there can be no interpretive errors, but if you haven't then you are relying on your opinion/system matching the other. This is why those same paint cans in the store might be using a list defined by Pantone or Glidden even if they are not manufactured by those brands.

This is also the reason that, if you're getting into web design, it is not recommended that you use simple labels like "lightblue" or "darkred" for colors when making a page because different browsers might display different colors.

Primary colors are the base colors which can combine into the rest of the palette.

The most basic colors in any scheme are the primary colors. In an additive color mix these will typically be Red, Green, and Blue, but in a subtractive space they might become Red, Yellow, and Blue (or slightly different shades of those three).

Secondary colors are the sum of two primary colors.

The term "secondary color" refers to the colors that are produced when one or more of the primary colors are combined (in even amounts). This means that to get yellow (in an additive space) we need to combine red and green in the same amounts. To get a green in a subtractive space we'd combine yellow and blue. We can vary the amounts and still get a near yellow, but it will not be a "pure" yellow.

For instance, examine the color of the two circles to the left, and consider that they exist in an additive space on your monitor. The left circle is a "full" yellow meaning it has full green and red but no blue. The right circle has full red and no blue, but only 90% of the possible green. It's no longer a "pure" secondary color and is on its way to becoming a tertiary color.

Tertiary colors are the sum of a Primary and Secondary color.

Tertiary colors are of course what falls between the newly made colors and their neighbors. This proces can go further down with each division, but then results in colors fairly close to existing shades.

The three previous phrases are quite important because they cover the major points of rotation that you can make use of on a color wheel. That doesn't mean there isn't a plethora of terminology to describes groups of colors.

Colors that are opposite each other on a wheel like this are said to be "complementary" from one another. They can come in pairs, the two exact opposite colors, or they can come in schemes where you take a set of colors from a general area.

Complementary colors are colors whose hue values are as far away from each other as can be.

You can think of complementary coloring as a form of contrast, but with using colors of different hue instead of different light and dark values. For instance, in an additive sapce, the primary red and the secondary blue/green. Some colors offer more "contrast" than others however. Depending on your color space and model, complimentary tertiary colors typically offer a little less difference in hue than primary or secondary complimentary colors.

"Color", Hue, Saturation, & Brightness

Now the wheels you've seen above show how colors of equal brightness are mixed, but what if we want to change their brightness? What if we want to change their saturation? What does that even mean?

Keep in mind this; the word "color" doesn't actually describe much in and of itself. Especially in the digital domain the word "color" is more of an umbrella term for the individual parts of that color.

It doesn't matter if you are using an RGB or CMYK model, it's important to remember that RGB, HSB, or CMYK only refers to how the color is *measured*. Images are still always composed of a Hue, a Saturation, and a Brightness.

How wheels are represented

It's important to note how the graphs, diagrams, and color circles you see in various tutorials may illustarte the same exact information in completely different ways.

For instance, we have been using the circular direction (360 degrees for instance) to represent the hue of a wheel, but we can also use the directionm towards and away from the center to give information.