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.
- HSL and HSV
- Visual Perception and the HSV Color System (PDF)
- The Hue, Saturation, Value (HSV) Color Model
- Hue – Saturation – Luminance
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.
- Color Systems (Wolfram Alpha)
- HSV to RGB color conversion
- Color conversion (RGB / CMYK / HSV / YUV /)
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.
- Color: from Spectrum to XYZ and beyond
- Math behind colorspace conversions, RGB-HSL
- RGB to HSV & HSV to RGB
- Converting to RGB
- Colour Space Conversions (PDF)
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.
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.
- Comprehensive Guide to Color Settings, Color Profiles and Proofing
- Color Gamut in Smartphones: Why Bigger isn’t Always Better
- Color Wheels • Color Systems
- Color Models
- Color Models
Download a free sample from my book, Design Fundamentals.
Your articles are very interesting, indeed. I used them to learn for a university course on colours. I surely appreciate your effort on this matter 🙂
Thanks Beniamin. I’m glad I could help.
Just FYI, at the simplest level you can go between RGB and CMY by inverting the hue angle (i.e. (H + 180) mod 360), inverting the values, and then reassigning the color channels as R->C, G->M, B->Y.
So on the computer monitor, inverting Red makes it Cyan which on the computer is made using the Green and Blue channels. But we’ve reassigned G to Magenta and B to Yellow.
In CMY, RED is made with MAGENTA and YELLOW.
For another example, on our RGB computer screen we have Yellow, which is made with Red and Green in RGB. We invert Yellow and it becomes Blue. But in CMY we’ve re-assigned the RGB Blue to… YELLOW!
As for values/lightness: with CMY less ink/dye means a lighter image, and more ink/dye means a darker image, the opposite of how it is on an additive computer monitor, thus we invert values.
Film (transparency) is CMY, but printing is CMYK (K for “Key”) the black K is used to help contrast, but again, it is an invert of Luminance, as a higher luminance means a lower amount of black ink.
Thus in essence, the CMY color model is the NEGATIVE of the RGB model.
However in practice for a good color match you want to use a LUT (Look Up Table) which was created using measured data of the output space (i.e. a spectrophotometer reading a collection of test patches of a printed page).
Among other things, gamma or transfer curves are vastly different between the various mediums, something I left out of the simplified discussion I mentioned above.
ALSO there is the issue of the interaction of dyes or inks. In film, the three dye layers are stacked on top of each other, and thus there is a great deal of interaction which along with film’s gamma makes it far from a linear association with the RGB data, in fact each color channel has a different gamma/transfer curve.
ICC uses an intermediate color model/color space, though that is not strictly necessary. The ICC did this as part of their color management system to make going from “any” space to “any” space somewhat consistent and computationally similar. Some drawbacks include a loss of precision, not to mention perceptual shifts (Which is why the options “absolute”, “perceptual”, “black point compensation” etc. exist in the color transform dialogs.)
So, this long-winded reply is simply to mentione in passing that It is definitely possible (even preferable) to go direct from RGB to CMYK using a LUT, as opposed to the ICC method of an intermediate space.
That was helpful. I had no idea you could do that moving between RGB and CMY, but now I see how it works. It’s interesting all the ways we come up with to make something look a certain color in a certain medium.
By the way, I combined your comments into one and used the corrected last paragraphs. You may not have been able to edit your original comment, but I could.