Design & UX
Article

Color Theory 101

By Jason Beaird

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.

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.

A gradient of warm colors.

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.

Gradient of cool colors.

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

Figure 1.9, Chromatic value: gradient of a color from tint to pure to shade.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”.

A diagram illustrating the color value-saturation.
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.

Diagrams of the Additive RGB and Subtractive CMYK color models.
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.

Diagram of the traditional red, yellow, and blue color wheel.
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.

More:
  • http://aaronstone.co.cc/ Aaron Stone

    Wow. I always had a doubt about the additive and subtractive color models. Thanks for clearing that up. This website is truly really resourceful.

    Thank you once again =)

  • Egiova63

    A friend gave (it was a gift) me your book 3 years ago (I think), and the chapter about colors was very, very good. This article follows the same line. Well documented, more posts! Please…

  • http://twitter.com/ThomasDesign Thomas McGee

    This is a nice intro into color theory. These principles are very important to any design and are easily forgotten with the trends and changes constantly evolving the design industry. The color wheel breakdown was also a helpful reference. Thanks for the article!

  • http://www.facebook.com/sosensible John Douglas Farrar

    In your book on web design you talk about the scientific color wheel not working when you mix paints. If you will pardon my humor, I don’t plan to use physical paint to decorate web pages. :) Paints are made of base elements which may or may not have pure base colors scientifically. There may be an issue of both additive and subtractive color interaction in play also. So while you can find a use case where it appears the science of pure color theory doesn’t work would you tell what that has to do with RGB monitors? Not saying there is no point but rather that did not understand how what you were saying about paints applies to additive color mixing on monitors where we look at web pages.

  • http://maccrazy.com Mac Crazy

    Thanks Jason for the excellent article!

    Despite working in print and websites for years, I’ve never taken the plunge to get a good grounding in color. Now I’ve started to hit my color design limits.

    You articles on color have given me a way forward.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.