Visualizing Color

As designers, having a proper understanding of how colors relate to one another has a tremendous impact on our work. Here is a quick history of how our predecessors thought about color, and how we should think about it today.

Newtonian Color Wheel

Isaac Newton is credited with the development of the first color wheel in 1666. The color wheel pictured below, circulated in Europe in the late 17th century by an author known as C.B., is based on Newton’s beliefs about color.

It divides the spectrum into 7 pure colors, arranged according to wavelength, with complementary colors arranged opposite one another. The text accompanying this chart indicated to painters that colors adjacent to one another on the wheel were not visually harmonious. They recognized that the opposing complements created the best color combinations. This understanding of complementary colors is the basis of modern color schemes.

While this model provides a good foundation, it only accounts for pure colors, which is just one aspect of a color system.

Harris’s Shaded Color Wheel

In the late 18th century, Moses Harris elaborated on the Newtonian color wheel by charting not only pure colors, but the various shades of those colors as well. If we consider the Newtonian wheel to be a one-dimensional representation of color, then Harris’s wheel introduces a second dimension.

Harris’s color wheel is obviously much more comprehensive than its Newtonian counterpart. However, Harris’s shortfall was a lack of understanding about luminosity, and its distinctness from saturation. As a result, there were certain colors missing from Harris’s catalog.

Runge’s Color Sphere

A breakthrough occurred in 1810 when Philipp Runge portrayed color not as a one-dimensional or two-dimensional color wheel, but as a three-dimensional sphere. Runge was the first to organize colors according to hue, saturation, and value. Unlike Harris, he recognized that luminosity and saturation were unique quantities, and must be plotted on separate axes.

The HSV Cone

Runge’s system of hue, saturation, and value is how you and I should think about color today. The HSV model was formalized by Alvy Ray Smith in 1978 while creating SuperPaint for Xerox, one of the earliest computer graphics applications. While computer screens actually function by mixing red, green, and blue light, RGB is a technical system rather than an artistic model.

Hue, saturation, and value is a more practical model than RGB because it reflects how we typically talk about color. We often use terms like “darker,” “lighter,” and “shades,” which refer to the value component of the HSV model. We talk about a color being “rich” or “washed out,” the equivalent to saturation. And we talk about various colors such as orange, purple, or green, which is hue.

The most descriptive visualization of the HSV model is actually a cone rather than a sphere, as pictured here.

In Photoshop’s color picker, there are individual sliders for for each of these three quantities. Hue is represented in degrees, ranging from 0 to 360, while both saturation and value (called “brightness” in Photoshop), are percentages ranging from 0 to 100.

The Value of Enlightenment

I have found that visualizing color as a cone-shaped model comprised of hue, saturation, and value has helped me make better color decisions in my work. It provides a framework, and prevents me from being overwhelmed by Photoshop’s seemingly unlimited sea of colors. I hope that it is helpful to you as well!

Credits

A big thanks to Sarah Lowengard for the invaluable research in her book The Creation of Color in Eighteenth Century Europe, from which much of my knowledge on this topic was gained.