Color Theory 101

Continuing on from the previous article in this series on color, The Psychology of Color, let’s take a closer look at color temperature, chromatic values, saturation, and the basic theory behind how colors are produced, both in print and on the web.

Key Takeaways

• Understanding color temperature is essential in design, as warm colors (red to yellow) are associated with heat and motion, while cool colors (green to blue) are calming and tend to recede, making them ideal for backgrounds.
• The chromatic value of colors, or their lightness or darkness, can create different psychological connections with users. By adding white to a color, a tint is created, while adding black produces a shade.
• The saturation or intensity of a color describes its strength or purity. Bright, vivid colors stand out, while colors with added gray become dull and muted. Understanding the relationship between value and saturation can help create depth and contrast in design.

Color Temperature

One attribute that exists across the entire spectrum is the notion of color temperature. Which color faucet gives you hot water? What color do you associate with ice? Why? The answers are obvious, and are enforced by both culture and nature.

Warm colors are the colors from red to yellow, including orange, pink, brown, and burgundy. Due to their association with the sun and fire, warm colors represent both heat and motion. When placed near a cool color, a warm color will tend to pop out and dominate dominate.

Cool colors are the colors from green to blue, and can include some shades of violet. Violet is the intermediary between red and blue, so a cooler violet is, as you probably guessed, one that’s closer to blue, while a reddish violet can feel warm. Cool colors are calming, and can reduce tension. In a design, cool colors tend to recede, making them great for backgrounds and larger elements on a page, since they won’t overpower your content.

Chromatic Value

The measure of the lightness or darkness of a color is known as its chromatic value. Adding white to a color creates a tint of that color. Likewise, a shade is produced by adding black to a given color. Figure 1, “Chromatic value” to the left illustrates this distinction.

As with colors themselves, the chromatic value of colors you’re using can impact upon the psychological connection users will have to the content. One use of chromatic value might be to accent the time of day that customers associate with a company or organization. If you were designing a website that’s all about nightlife or concerts, for instance, you’d probably want to go with dark shades and limit your use of light tints. Tints tend to be associated with daylight, springtime, and childhood. Think: sunrise, baby clothes, and Care Bears. These light pastel colors can be used in professional, sophisticated, grown-up ways, too, as anyone who’s ever spent time in a hospital can attest. This is because tints are soothing colors that provide personality to sterile environments without startling the ill or making babies cry. Color designers are generally uninspired by colors such as “Hospital Green,” but if you’re working on a website for a day spa, tints would be a great foundation for your color palette.

Saturation

The saturation or intensity of a color is described as the strength or purity of that color. It’s obvious that intense, vivid colors stand out. Even though cool colors tend to recede, a vivid blue will draw more attention to itself than a dull orange. When we add gray (black and white) to a color, it becomes dull and muted. Like an office with beige walls, or an overcast winter morning, these colors are less exciting or appealing as bright, vivid colors. On the bright side—no pun intended—dull colors help to reduce tension, giving compositions a meditative, dreamy mood

The relationship between value and saturation is illustrated in Figure 2, “Value and saturation chart”.

Fig. 2, “Value and saturation chart”

The Color Wheel

To take our foundational knowledge of color any further, we’ll need to gain a grounding in some of the more technical concepts associated with the subject, such as how colors are formed and how they can be categorized.

The colors displayed on your computer screen (that is, the colors we’ll be using in our website designs) are based on an additive color model. In an additive color model, colors are displayed in percentages of red, green, and blue (RGB) light. If we turn all three of these colors on full blast, we’ll have white light. If we turn red and green all the way up, but switch off blue, we have yellow.

If you’ve ever owned a color printer, you might be familiar with the acronym CMYK (cyan, magenta, yellow, and black). Your ink-jet printer, laser printer, and industrial four-color printing press all create images using cyan, magenta, yellow, and black inks or toners. This process uses a subtractive color model; by combining colors in this color model, we come close to achieving a grayish black. There’s no way of producing black combining just cyan, magenta, and yellow. This is why they’re always supplemented with black—the K in CMYK. Take a look at Figure 3, “RGB additive color model (left) and the CMYK subtractive color model (right)” for a better idea of how additive and subtractive color models work.

Fig. 3, RGB additive color model (left) and the CMYK subtractive color model (right)

Regardless of whether you’re designing for print or the Web, the lessons of traditional color theory are key to helping us classify colors and group them together. Recorded studies of color classification date back to the third century BC and the works of Aristotle. Since then, many other great artists and philosophers have contributed to our knowledge of how colors work, including Isaac Newton, Johann Wolfgang von Goethe, and Johannes Itten. The works of these individuals, in the 17th, 18th, and 19th centuries respectively, provide the foundations on which much of our understanding of color lies. All three theorists explained colors in relation to a color wheel, using red, yellow, and blue as the primary colors. The color wheel is a simple but effective diagram developed to present the concepts and terminology of color theory. The traditional artists’ wheel is a circle divided into 12 slices, as Figure 4, “The traditional red, yellow, and blue artists’ color wheel” indicates. Each slice is either a primary color, a secondary color, or a tertiary color.

Fig. 4, The traditional red, yellow, and blue artists’ color wheel

Primary colors

The primary colors of the traditional color wheel are red, yellow, and blue. These hues form an equilateral triangle on the color wheel, and commencing from a primary color, every fourth color represents another primary color.

Secondary colors

By mixing two primary colors, we create secondary colors, indicated here by the small gray triangles. The secondary colors are orange, green, and purple.

Tertiary colors

There’s a total of six tertiary colors: vermilion (red-orange), marigold (yellow-orange), chartreuse (yellow-green), aquamarine (blue-green), violet (blue-purple), and magenta (red-purple). As you might already have guessed, mixing a primary color with an adjacent secondary color forms the tertiary colors.

The Principles of Beautiful Web Design

This article is from Jason Beaird’s The Principles of Beautiful Web Design book (second edition is out now!). Be sure to lookout for further articles from the book here on Design Festival.

Frequently Asked Questions about Color Theory