Color Systems — Part 2

Posted: 24 Mar 2014 05:30 AM PDT

How do you describe color? What values can you measure to understand its properties? How do you ensure the color you see is the same one produced by a printer or computer monitor?

Last week I started a look at color and color systems. I walked through how our eyes see color and the difference between additive and subtractive color systems. I closed with some history of the CIE Color Model, which attempts to map the colors in the visible spectrum.

Today I want to continue the discussion by taking a look at the Munsell Color System. Munsell’s system forms the basis of the familiar HSL and HSB color spaces we find in graphics editors.

Munsell Color System

Albert Henry Munsell was a 19th century American artist and professor of art. Munsell wanted to find a way to organize color in a meaningful and practical way. He invented tools to take the measurements he wanted and developed a guide for choosing complementary colors in artistic work.

Munsell’s system divides color into three dimensions, which you can see in the image above and described below.

Hue — is measured by degrees around a horizontal circle.
Chroma — is measured radially from the center of the circle. The further from the center the more pure the hue.
Value — runs perpendicular through the center of the circle. The lowest point is black and the highest point is white with shades of gray at all points between.

You might recognize the system as hue, saturation, and lightness or hue, saturation, and brightness. The values in Munsell’s system are different, though. Munsell’s hue circle is divided into 10 equal divisions, chroma is measured from 1–15, and value is on a scale from 1–11. The basic dimensions are in place and the system is internationally accepted and used by the U.S. Bureau of Standards.

In Munsell’s system there are 5 primary colors, red, yellow, green, blue, and purple. There are also 5 intermediary colors between the primaries, red-yellow, yellow-green, and so on. Colors of equal chroma and value and at opposite ends of a hue circle are complementary. Adding them creates a neutral gray (the center of the circle) of the same value.

Munsell envisioned all the possible hue circles forming a sphere. It doesn’t quite work out that way. Some hues have more perceptible differences in chroma, meaning the circles bulge in some places. The sphere Munsell envisioned is more asymmetrical due to these differences in chroma.

HSB/HSL Color Model

This brings us to the more familiar hue, saturation, brightness (HSB) or hue, saturation, lightness (HSL) models. Both are variations of the same model. They’re similar to Munsell’s color model and are used to define colors in graphics programs. In my experience HSB tends to show up more in graphics editors.

Both models also match well with the way we perceive color.

Hue — defines the color itself with the hue circle divided into 360 degrees.
Saturation — like Munsell’s chroma, it measures the intensity of color from 0% (a neutral gray) to 100% (fully saturated or pure hue).
Lightness/Brightness — is the amount of illumination (luminosity) from 0% (no light) to 100% (full light). A value of 0% appears black and a value of 100% appears white washing out the hue.

In both models hue is the same and is measured the same way. The differences in the two models is that lightness is a measure of the amount of white where brightness is a measure of the amount of light. Where lightness can only be a shade of gray, brightness can be varying values of any color.

Because of the difference in how lightness and brightness are defined and measured, saturation needs to be different to scale. What each is measuring is essentially the same. What’s different is the way they’re measured.

HSV or hue, saturation, value is another model you may have seen. It’s the same as the HSB system, where value has the same meaning as brightness.

Converting from HSB/L to RGB and CMY(K)

HSB/L separate the luminance from the chroma (or color information). That can be very useful in a graphics editor to lighten or darken parts of an image. It’s also a useful way to understand color. We need put the luminance back when converting to something we can use in code like rgb().

You won’t need to do the math in practice. There are a number of tools available to do it for you. The conversions involve more math than I want to cover here, and probably more than you wan to do there, so I’ll point you to a few tools.

If I’m not mistaken, there’s no way to directly go from HSB/L to CMY(K) and that any conversion first goes through RGB or another color space. I think Photoshop goes through CIELAB to get from HSB to RGB.

Also, if I’m not mistaken, these conversions aren’t perfect. Converting from color model to color model or color space to color space doesn’t result in the exact same color at both ends.

Here’s more info about the math for anyone interested.

Other Color Systems

There are more color systems than the ones I’ve touched on above. I’ll briefly mention 3 of them below.

Ostwald System — Friedrich Wilhelm Ostwald was a chemist and a modern founder of physical chemistry. His color system is based on dominant wavelength (hue), purity (saturation), and luminance (brightness).

Ostwald was concerned with color harmony after noticing that some color combinations were more pleasant than others. The guiding principles of his color theory were that color could be characterized by specifying hue and the amount of white and the amount of black.

Natural Color System (NCS) — A proprietary color model published by the Scandinavian Color Institute. The system uses printed reference cards to match colors. It’s based on the 6 elementary color percepts of human vision, white, black, red, yellow, green, and blue. All other colors can be defined in terms of these 6 colors being present in varying amounts.

The Natural Color System describes color sensations as perceived in the upper brain, in comparison to RGB, which describes in them in the lower brain at the cone level. NCS is better suited to describe how we truly perceive and describe color and is likely where the natural part of the name comes from.

Pantone Matching System (PMS) — Like NCS, the pantone matching system is proprietary. Pantone is a commercial printing company I’m sure you’ve heard of. The idea behind their system is to make it easy for designers to color match specific colors for production.

The Pantone Matching System is a standardized system for reproducing colors so manufacturers in different locations can produce the same colors by matching against the pantone specifications.

Pantone’s colors are produced using 15 different pigments (including black and white), which are then mixed in varying amounts. A subset of pantone colors can be created through the CMY(K) process, but most can’t.

Closing Thoughts

As I mentioned last week, please forgive any errors in science in this or the previous post. My aim with both was to help answer a question about the difference between additive and subtractive colors and to dig in a little deeper about how color works.

The more I dig into the subject of color systems the more technical it gets and I wanted to keep things lighter on the technical side if possible.

I’ve done my best to provide additional resources if you’re interested in learning more (or checking how well I stayed true to the science).

Do we as web designers need to know all these color models? Probably not. If all your work is on the web, then you aren’t going to work with the subtractive CMY(K) system or ever use Pantone colors in production. However, like anything else related to design, it only makes sense to gain some understanding of these different color systems to increase your understanding of how color works.

Download a free sample from my book Design Fundamentals.

The post Color Systems — Part 2 appeared first on Vanseo Design.