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

Now let's consider the color space of the HSL model.

Want to join the conversation?

  • hopper cool style avatar for user Hopper Is Me
    Ok, so now we just learned about the color wheel and the color cube. And now in this video now we learned the color cylinder. Are there any more color "things" like that?
    (11 votes)
    Default Khan Academy avatar avatar for user
    • leafers ultimate style avatar for user Bryan Ray
      There are some cones in some models. And the shape of the colors an actual imaging device is capable of displaying is a weird horseshoe shape. The cube and cylinder are the most important models for color science, though. Everything else fits inside them.
      (9 votes)
  • piceratops ultimate style avatar for user STORMBREAKER9
    At , how come RGB aren't natural for artists to use?
    (8 votes)
    Default Khan Academy avatar avatar for user
    • male robot donald style avatar for user Peter Vee
      It's possible for artists to use RGB to come up with colors, but it takes a lot of practice to remember how they relate to each other. RGB is counterintuitive to everything we learn about mixing paints to make colors. Instead of Blue and Yellow make Green, We have Red and Green make Yellow. So the HSL model is just a method that is easier for most people to learn and use.
      (6 votes)
  • leafers tree style avatar for user HumanBeanz
    I'm still a little confused, what's the difference between saturation and lightness? They do basically the same thing.
    (4 votes)
    Default Khan Academy avatar avatar for user
  • starky seedling style avatar for user Pasha Dmitrachkov
    Were those mathematicians artists? Or why did they decide to see color spatially?
    (2 votes)
    Default Khan Academy avatar avatar for user
    • duskpin ultimate style avatar for user Sydney
      They were likely computer programmers. Both math and color are huge parts of creating the displays you see today, and they are rarely mutually exclusive. Keeping track of masses of numbers and what they do can be confusing to even the most experienced mathematician, and the brain tends to absorb knowledge and comprehend what it's learned better when said knowledge is presented visually. So, to provide a better visual for what they were doing with numbers to help them create colors more easily and without so many numbers, they created all the tools you just learned about.
      (3 votes)
  • duskpin ultimate style avatar for user ░▒▓█???█▓▒░
    why artists don't use RGB colors
    (2 votes)
    Default Khan Academy avatar avatar for user
  • aqualine tree style avatar for user Jurgen Gjonçari
    In the color cylinder, if the light increases on top, shouldn't the whole top surface of the cylinder be completely white?
    If that is true, and supposing that's true for black too, isn't it enough for the top and bottom surfaces to be just dots? White and black respectively. In that case, I think that the shape would be a sphere, which is closer to the cube, meaning it's the same thing but smoother.
    (2 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user sheila.leta
    i jast realised that you can use a coler weel
    (1 vote)
    Default Khan Academy avatar avatar for user
  • primosaur seed style avatar for user Mehedi Rahman
    Can anyone tell me, What is the involvement of Gamma and Vibrant feature or functionality in RGB color cube or HLS color Cylinder?
    (1 vote)
    Default Khan Academy avatar avatar for user
  • starky sapling style avatar for user JunkPunk3456
    When will we learn about HEX?
    (1 vote)
    Default Khan Academy avatar avatar for user
  • duskpin ultimate style avatar for user TundrumMax
    at , why can I see a small ring around the middle?
    (1 vote)
    Default Khan Academy avatar avatar for user

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.