If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

HSL color space

Uncover the magic of hue, saturation, and lightness (HSL) in color creation using the hue saturation wheel, where hue is defined by the angle and saturation is defined by the radius. Adjusting the lightness dimension creates lighter or darker shades of any color on the hue saturation wheel, effectively fine-tuning the final color to match your desired outcome.

Want to join the conversation?

Video transcript

- Although RGB triples are great for representing how we can generate colors, they aren't natural for artists to use. Instead, we use the concept of hue, saturation and lightness to find the exact color we need. On the hue saturation wheel, the angle around the circle defines the hue, and the radius defines the saturation. The position in this circle is then combined with the setting of the Lightness slider to define a final color. From now on I'm gonna call this Lightness slider the Lightness Dimension, since it only requires a single number to define, and this color, which is defined using these HSL settings, is also some position in the RGB color cube. That brings us to a key problem in this lesson. How does each HSL setting convert into a unique point in the RGB cube? First, let's think about how we can go from a 3D cube to a 2D circle. The trick is to think about where the grays are in our color cube. Anywhere in our color cube where the RGB values are equal, we get some shade of gray. For example, 20%, 20%, 20%, gives us this darker gray, and 80%, 80%, 80%, gives us this lighter gray. That means there's a line of gray within our RGB cube, meaning that there's only one dimension needed to describe all grays. So let's rotate the color cube so that we're looking directly down at the gray line. Does it look familiar? Mathematicians cheat a bit and deform this into a circle. There's some fancy math to make this stretching happen, but we'll ignore it here. And that's where the hue saturation wheel comes from. Finally, we can get to the Lightness Dimension. To do this, we pop back into 3D space by growing our circle into a cylinder. The Lightness Dimension defines what slice we take out of our color cylinder. A Lightness value of 50% takes a slice out of the middle, and to lighten the shade of any color on this wheel, we're moving up the Lightness Dimension to a higher slice, and to darken the color, we move down the Lightness Dimension to a lower slice. Okay, this is important, so let's pause here. In the next exercise, we'll challenge you to think about this model a little more. Take your time and have fun.