The Fundamentals of Color: Hue, Saturation, And Lightness

Posted: 20 May 2013 05:30 AM PDT

If you can remember as far back as January, one of my goals for 2013 was to learn more about color and share some of what I learn with you. I’ve talked before about how I feel my skills working with color are lacking and I said at some point this year I would grab a few books about color with the hopes of changing that.

One birthday, a somewhat generous brother, and quality service from Amazon later, and an assortment of books (including a few specifically about color) are here waiting to be read. Thanks David.

I’ve finished reading one of the color books, Design Elements: Color Fundamentals, and thought I should start sharing. I want to start with how we describe colors in part because it’s the beginning and in part because it led to some clarity in how I understand color.

Diagram of the Munsell Color System showing hue, saturation (chroma), and lightness (value)

How We Describe Color

There are 3 primary ways to describe a color and since the book added it, I’ll add a 4th way to describe color as well.

Hue — another word for color
Saturation (chroma) — the intensity or purity of a hue
Lightness (value) — the relative degree of black or white mixed with a given hue
Temperature — the perceived warmth or coolness of a color

Let’s dig a little deeper into each.

Hues are colors and what hue we see is dependent on the wavelength of light being reflected or produced. I doubt I need to tell you what a color is and since color and hue are synonymous you should know what a hue is as well. One thing I will remind you about is we all perceive color differently. The hue you see may not be the same hue I see.

Saturation refers to how pure or intense a given hue is. 100% saturation means there’s no addition of gray to the hue. The color is completely pure. At the other extreme a hue with 0% saturation appears as a medium gray. The more saturated (closer to 100%) a color is, the more vivid or brighter it appears. Desaturated colors, on the other hand, appear duller.

How saturated a hue appears also depends to a degree on what colors it’s next to. A 50% saturated hue placed next to a 25% saturated hue will appear more vivid than were the same hue placed next to a 75% saturated hue.

Lightness measures the relative degree of black or white that’s been mixed with a given hue. Adding white makes the color lighter (creates tints) and adding black makes it darker (creates shades). The effect of lightness or value is relative to other values in the composition. You can make a color seem lighter by placing it next to a darker color.

The greater the difference in value between elements, the greater the contrast between them. Because of this, lightness is a good way to show contrast and indicate hierarchy among elements. About 7 steps of lightness is the maximum variation the human eye can discern. Beyond that it becomes hard to distinguish the differences.

Temperature is the perceived warmth or coolness of a color. Warm colors are red, orange, and yellow, while cool colors are green, blue, and violet. Somewhere in the green and violet spectrums the temperature changes between warm and cool.

How the eye recognizes color temperature can change based on the source of light. For example the actual temperature of a computer monitor can affect the perceived color temperature.

Warmer colors tend to advance into the foreground of a composition while cooler colors recede into the background. Also like saturation and lightness, temperature can be relative. Place a warm color against a warmer one and the initial color will appear cooler than if it were placed against a cool color.

Color Harmony

In working with color our goal is to choose a palette of pleasing color combinations (except for those times when a displeasing combination complements the message better). We’re trying to achieve some kind of color harmony.

Color harmony can be subjective. What works for your eye may not work for mine. Principles of color theory aim to reduce the subjectivity by offering guidelines that help us find pairings and groupings of colors more likely to work well.

For example one of the main principles holds that the eye is always seeking balance and equilibrium in color that lead it to arrive at neutral combinations like when a hue is combined with it’s opposite or complement. It’s one reason we often see after-images of a different color (but with the same saturation and lightness) when staring at any one color for too long.

Color theory doesn’t always lead to predictable results. Sometimes theory and practice don’t quite mesh, which means we need to develop our eyes for color and experiment with different combinations of hue, saturation, and lightness.

The Disconnect in Color Theory and Color Practice

Like I said above, something clicked for me in reading Color Fundamentals. We describe color in terms of hue, saturation, and lightness (HSL), yet we typically set color values on the web using hex values and to a lesser extent RGB values. Wouldn’t it make more sense to work with the system that better describes color?

Note: HSL is not the same as HSB (hue, saturation, brightness) or HSV (hue, saturation, value) found in most color tools.

Hex and RGB are really two versions of the same thing. Each provides 256 possible values for how much red, green, or blue is in a given color. HSL works differently. There’s no easy way to glance at something like rgb(63, 69, 146) or it’s hex equivalent #3f4592 and easily know it’s 40% saturated or hsl(236, 40, 41).

If you’d like to see the math involved in making the conversion have a look at any or all of the links below

Why is that? Why is there a disconnect in how we attempt to understand color and how we attempt to use it? If anything HSL is the more intuitive system as it actually describes the colors we see and fits with color theory.

I realize color skills come from developing a critical eye for colors and asking questions about why something works or doesn’t work. And it’s about answering those questions as you observe the colors around you.

It just seems like it would be easier if both the theory and the practice spoke the same language. Now that I’ve come to this realization, I’ve decided to make a commitment to using HSL values as much as possible in my code. The stumbling block is IE8 and below, which don’t accept hsl() or rgb(). They need hexadecimal values. That’s ok though, since SASS can make the conversion. You can use hsl() in SASS and have the html output be a hexadecimal value.

To go along with my commitment I’ve started building a simple color tool to help me learn and study. It’s not something you’d want to use in its present state to choose a color palette, but it lets you play around with hue, saturation, and lightness values to see how each affects one particular color and the colors around it. I’ll share the tool later in the week.

For awhile I’ve suspected the mathematical relationships between colors could offer a guide for working with them and I’ve often looked for those relationships in the hex values of colors. My hope for using hsl() more and playing around with my simple color tool is they’ll help me connect the theory to the colors I use in design a little better than they’re connected for me now.

Keep this disconnect in how we learn about and describe color and how we use it in mind. The realization has given me a greater understanding for how to better study color and it’s why I wanted to start this conversation with the basics of how we describe color. I’ll have more posts about color coming soon, starting later in the week when I talk about the simple tool I created to help me.

The post The Fundamentals of Color: Hue, Saturation, And Lightness appeared first on Vanseo Design.