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

## 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 a 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 going to 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 is a line of gray within our RGB cube meaning that there's only one dimension needed to describe all Gray's 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's 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 are 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 will challenge you to think about this model a little more take your time and have fun