Thinking in Color: the HSL Model and Munsell Color System

Having a deep understanding of the HSL color model and where it comes from will allow you to construct color instead of picking it. If you have a web or creative background, you are probably familiar with the Photoshop color picker or have read/dreamed about HSL notation in CSS3 endeavors. Even though HSL is associated with digital work, the conceptual backbone was created many decades prior and reaches far beyond the computer screen. Enter, the Munsell Color System:

The Color Formula: Hue, Saturation and Value

The first important thing to note is that while there are 3 separate elements, they are often labeled different things. There is a disconnect between the analog and digital models, even though they are conceptually similar. I will be using “hue, saturation and value” as labels intended to span both models.

• hue, color, or pure color: The base, untinted color: blue, green, yellow-green, and red fall in this category. In an HSL context, a hue is expressed by its location (in degrees) on the color wheel, 0-360°.
• saturation, chroma or colorfulness: The purity of color, or, where this particular hue stands between gray (absence of the hue) and full saturation of the hue (absence of gray). Expressed in HSL notation as 1-100%.
• value, lightness, luminosity, intensity or brightness: People use all of these terms to describe the same thing- where this particular hue stands between black and white. Is it a dark, light or medium green? Expressed in HSL notation as 1-100%.

For this reason you will see the following: HSL, HSV, HSB, HSI, + HVC used to describe the same color model. sometimes this is inaccurate, as the HSV model is actually slightly different, along with others. The same goes for misuse of the terms chroma/value/luminosity/intensity- each of these words has a home somewhere, with very specific intended use, but I have seen all of these used to discuss the same basic model.

The HSL color model is, simply put, a friendlier representation of the RGB color model. this is the Photoshop color picker using an HSL interface, but using the label brightness for value:

The Munsell Color System: from a world before HSL

So, in the early 1900s, this guy wanted to make a really solid system for communicating color. some people tried before him, but he fucking nailed it. He nailed it so hard, it’s pretty much the same conceptual backbone as the HSL model. His system uses the terms hue, chroma and value:

Notice the simplification in the upper left: the system contains a vertical scale for saturation and value, and a circle to navigate hue. This translates directly to HSL notation, which uses a 1-100% scale for saturation and value, and a range of 0-360° for hue.

Many different visualizations of the Munsell System have been made:

I even did one for a color theory project in college. and let me tell you, creating all of those colors in paint made me appreciate Photoshop in a whole new way:

So that’s about it. At the very root of all this label-confusion is one single system, made of three parts, that can be used to construct and communicate color. And color rules, so go play!