Tutorial9 | The Best Tutorials and Resources. Free.

The mastery of color theory, relations and harmonies is one of the primary steps to uncovering the full beauty and potential of your images (in the realms of art, design and/or photography). Find out more in this simple, practical, colorful guide.

Color Models

Depending on your background and your purpose, you will view primary colors differently. There are three generally accepted models: RGB (red, green, blue), CMY (cyan, magenta, and yellow), and RYB (red, blue, yellow).

Primary color models can be divided into two categories: additive and subtractive.

The additive primary colors are obtained by light: red, green and blue (RGB). When combined, these colors create white. Scientists in the late 19th century established that color perception is best described in terms of the primary additive colors RGB because it is based on the human perception of colors.

The subtractive primary colors are obtained by the subtraction of light: cyan, magenta, and yellow (CMY). They form the basis of printing colors and combine to form black, the K in CMYK. The second set of subtractive primary colors is: red, yellow and blue (RYB). This model is primarily used in art and design education, particularly painting. According to Johannes Itten, a Swiss color and art theorist, the primary use of this color wheel is for mixing pigments.

Color Model Application:

RGB: Photography, video/film and design.

CMYK: Print design.

RYB: Art, painting and design.

Now that we’ve covered the various color models and their uses, we can proceed with confidence. We will be using the RGB color model.

RGB Color Model

Primary, Secondary, and Tertiary Colors

In the RGB (additive) color model, the Primary colors are: red, green, blue.

The Secondary colors: cyan, magenta and yellow, are formed by the sum of two primary colors of equal intensity.

Lastly we have (six) Tertiary colors, which are comprised of mixing half primary color and half secondary color: orange, yellow-green (lime), cyan-green, cyan-blue, blue-magenta (purple), red-magenta (pink).

The additive and subtractive sets of tertiary colors RGB and CMY are exactly the same, just on different points of the wheel.

“The color wheel not only helps understand the relationship of different colors but also the classification of colors. It also provides a quick reference to the primary, secondary and tertiary hues.” – Mark Boulton

Color Harmonies

Monochromatic

Monochrome selections are simply one color from the color wheel.

Complementary

Complementary color schemes use colors that are opposite each other on the color wheel.

Split-complementary

The split-complementary color scheme is a variation of the complementary color scheme. In addition to the base color, it uses two colors adjacent to its complement.

Analogous

Analogous color schemes use colors that are next to each other on the color wheel. Analogous schemes are often found in nature and are harmonious and pleasing to the eye.

Accented Analogic

Accented analogic color schemes are combinations of analogous and complementary color schemes. In addition to colors that are adjacent to each other, it uses a complementary accent at its opposite.

Triad

A triadic color scheme uses colors that are evenly spaced around the color wheel.

Tetrad (double complementary)

The tetradic or double complementary color scheme uses four colors arranged into two complementary pairs.

Square

The square color scheme is similar to the tetradic, but with all four colors evenly spaced around the color wheel.

Warm and Cool Colors

The color wheel can be divided into warm and cool colors. Warm colors are vivid and energetic, and tend to advance in space. Cool colors give an impression of calm, and create a soothing impression. White, black and grey are considered to be neutral.

Term Definitions

Let’s take a look at the meanings of a few color-related words. These words can often confuse and be erroneously substituted for one another. This following list of definitions will help us proceed unambiguously. All definitions are taken, of course, from The Merriam-Webster Dictionary.

Hue

The attribute of colors that permits them to be classed as red, yellow, green, blue, or any intermediate between any contiguous pair of these colors.

Saturation

A chromatic purity; freedom from dilution with white.

Brightness

The attribute of light-source colors by which emitted light is ordered continuously from light to dark in correlation with its intensity.

Tint

A variation of color produced by adding white to it and characterized by low saturation with relatively high lightness.

Tone

The color quality or value; a tint or shade of color; the color that appreciably modifies a hue or white or black.

Shade

A color produced by a pigment or dye mixture having some black in it.

Chroma

A quality of color combining hue and saturation.

Hue, Saturation and Brightness

Hue

In practical terms, hue refers to a specific tone of color. It is not another name for color as color can have saturation and brightness as well. For instance, colors with the same hue are distinguished with adjectives referring to their lightness and/or chroma, such as with “light green” or “pastel blue”.

Saturation

Saturation is the intensity of a hue from grey. At maximum saturation a color would contain no grey at all. At minimum saturation, a color would contain mostly grey.

Brightness

Brightness refers to how much white or black is contained within a color.

The image below (left) of Photoshop’s Color Picker shows the saturation and brightness of the cyan hue. The saturation is increased by dragging the picker horizontally towards the right of the box and decreased towards the left. Brightness is increased by dragging vertically towards the top of the box and decreased towards the bottom. The hundred percent mark of a hue’s saturation and brightness is the upper-right corner.

Examples for hue, saturation, and brightness are best shown in the hue/saturation adjustment layer. Each of the three is affected separately and the display sliders intuitively show the principles referenced above. See the example below (right).

Conclusion

Cognizance of colors and/or combinations that are pleasing, and savvy use of post-production tools are just two of the ways that comprehension of color theory, relations and harmonies is useful to us. We have already put this knowledge to use to improve and stylize images in How to Use Curves in Photoshop and Color Correction Basics in Photoshop.

We will continue to use color theory insofar as every photograph can be improved with the post-production tools within Photoshop, Lightroom, or other image-editing software. Specifically, a few adjustment tools where color theory knowledge helps include: Curves, Hue/Saturation, Color Balance, Channel Mixer, Selective Color—and the list goes on. The mastery of color theory, relations and harmonies is one of the primary steps to uncovering the full beauty and potential of your images.

Related Topics: color basics, color correction, color theory