Advanced Sass : online course

Sass color basics: hue, saturation, lightness

Sure, you know what RGB stands for. But how about hue, saturation and lightness? Here's a short guide to help you understand what they are, so we can later use them to programmatically modify color. While this article doesn't contain any Sass code at all, its information is essential to effectively working with Sass' color functions. Let's talk about the RGB color model and the HSL "color cylinder".

RGB color model & HSL

The RGB color model mixes red, green and blue light to display a broad array of colors. Take some red, add some green and blue, and you'll end up with the pink color of the Sass logo you see on your screen. This model is used by most media that display websites: computer and hand-held color displays, projectors and LED displays.

If you want to define colors as RGB in CSS, you use the rgb() functional notation. It takes three arguments —one for each color— ranging from 0 through 255. That's an arbitrary range, and it turns working with RGB values into a guessing game. The HSL representation of an RGB color is easier to process for humans. Its values can be mapped to a color cylinder, making it easier to visualize the outcome. The hsl() functional notation takes three arguments: hue as a number of degrees (0 through 359), and both saturation & lightness as percentages.

Hue

Hue is what we often consider color in its most basic form. It can be represented in a wheel like above, starting with red at 0°, passing through green at 120° and blue at 240°. By going from one color to the next, a gamut of colors in between ensues. To reproduce all colors in this wheel in CSS, you would use hsl(0, 100%, 50%) for red, and only change the first argument to get to the next color, resulting in a maximum of 360 different colors (we'll get to the other two arguments later).

Saturation

Saturation controls the "grayness" of a color. At 100%, a color is fully saturated and at 0% it's a neutral gray. If you set the second argument to 0%, e.g. hsl(0, 0%, 50%), you're going to get a gray color no matter what value you use for hue. In the above example, we have a color going from hsl(0, 100%, 50%) to hsl(0, 0%, 50%).

Lightness

Lightness controls the, well, lightness of a color. At 0% it's going to be pitch black and at 100% a bright white. That's why we used 50% in the examples above: it's where the lightness is neutral.

The HSL cylinder

Combine all of the above, and you end up with a three dimensional representation of a color wheel (image courtesy of Wikipedia). The position of a point on each axis can be set using the arguments passed to the hsl() functional notation. And contrary to using rgb(), quite predictably so. hsl(180, 80%, 75%) is going to be cyan (180° on the first wheel), slightly grayish (80% away from a full gray) and halfway between this slightly grayish cyan and white (because 75% is halfway between 50% and 100%).

So, what about Sass?

There's much more to color theory, and there are more models than RGB and HSL (Google at your own risk, there's a lot to digest). This article aims to expose the basics of the hsl() notation, which is underused because many of us think it's complicated. Turns out, it's one of the most easy ways for humans to visualize a color!

Sass has a bunch of built-in functions that allow us to programmatically work with color, which is great for automating color schemes for themes, and much more. I've put all of this to good use in a screencast on the adjust-hue() Sass function. It generates evenly distributed, unique colors for a variable number of color swatches. It's a free lecture from the "In the Real World" section of the Advanced Sass online course.

The above is part of the Advanced Sass online course, which helps you turn your Sass up to eleven. You can become a Sass expert too!