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 model

Introduction to another color selection model we use called HSL.

Want to join the conversation?

  • mr pink red style avatar for user Red Sun
    Are RGB and HSL two different ways of completely representing one color? Do you have to define both of them to get a color, or is saying the HSL enough to completely say any color you want?
    (13 votes)
    Default Khan Academy avatar avatar for user
  • female robot amelia style avatar for user Addison
    why don't they use the three primary colors instead of red, green, and yellow?
    (3 votes)
    Default Khan Academy avatar avatar for user
  • duskpin ultimate style avatar for user Anna Brown
    At , the video states that gray is made of the equal amount of all colors. Remembering this, how would create black and white?
    (3 votes)
    Default Khan Academy avatar avatar for user
  • leaf green style avatar for user Bert Fierens
    Is this color wheel in the HSL model also being used to represent CMYK?
    (2 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user Alyssa D.
    hears automaticity starts songs “Gray street” by Dave Mathews
    (3 votes)
    Default Khan Academy avatar avatar for user
  • hopper cool style avatar for user setuvimjam
    Does our eyes use the RGB OR the HSL color model.
    (2 votes)
    Default Khan Academy avatar avatar for user
    • blobby blue style avatar for user JujuArt
      Well, it's not really the same as pixels, but humans have 3 color-sensitive cones. One detects red, one for green, and one for blue, so basically, we use the RGB model, but we use specialized cells instead of pixels. Hope this helped!
      (1 vote)
  • starky sapling style avatar for user shantanuaryan67
    what is the difference in LIGHTNESS and VALUE (as in HSL and HSV respectively)
    (1 vote)
    Default Khan Academy avatar avatar for user
  • spunky sam blue style avatar for user conortimlin
    Are there other sorts of colour finding systems like, RGB, HSL, and CYMK?
    (0 votes)
    Default Khan Academy avatar avatar for user
    • leafers ultimate style avatar for user Bryan Ray
      YUV is the color system used in televisions. Y is the luminance signal; U and V are "chrominance." They carry portions of the color. This system was invented in order to make color television signals compatible with older black-and-white TV sets. Several variants of the YUV scheme exist (YIQ, YCbCr, YPbPr), and although they're not actually compatible mathematically, they're similar in function.

      LAB color is used in scientific applications where addressing colors that are outside of the human visual range might be important. It is very precise but not common.

      XYZ color, similar to RGB, is designed to simulate the behavior of our eyes. It's probably the oldest scientific color model, developed in the early 1930's.

      There are also color matching systems like Pantone, where exact colors can be produced by referring to them by name or number. This isn't properly a color model, but it's very commonly used by graphic artists to specify colors to be used in print.

      And there are variants on all of the color models mentioned. The Munsell system, for instance, is an early form of HSL. Munsell was a painter and art teacher in the early 1900's who wrote several books about color.
      (4 votes)
  • piceratops seedling style avatar for user juliana ridenhour
    This is the best class to take in life.
    (1 vote)
    Default Khan Academy avatar avatar for user
  • duskpin tree style avatar for user Zane Billings
    How do this and the RGB model compare to the CYMK model used in printing?
    (0 votes)
    Default Khan Academy avatar avatar for user

Video transcript

(metal clattering) - You've just seen how any color can be represented by blending together different amounts of three colors, red, green and blue. For example, the RGB value of this gold color is 100% red, slightly less green, and no blue, but as you may have noticed in the previous exercise, it's fairly difficult to find the correct RGB values to match a desired color. So artists have developed new ways to specify colors in a more intuitive way. One popular method they use is called HSL, short for hue, saturation, and lightness, similar to the HSV we saw earlier. Artists use a tool called a color wheel to pick the hue and saturation they like. Hue is what we normally call color, is based on the position around this wheel, such as this red. Saturation defines how pure a color is, and saturation is based on the distance from the center of this wheel. If we want to desaturate, we move inward, and if we want to saturate, we move outward. For example, to saturate this shade of red, we remove any contribution of green and blue, whereas to desaturate it, we instead increase the contribution of green and blue. Taken to the extreme, this trends towards grey because the three color contributions are equal. So at full desaturation, our red becomes achromatic, or colorless. If an artist wants to use a strong yellow, they first have to find the yellow hue they want. Then they move in the radial direction to saturate or desaturate it. Finally, there is lightness, which is adjusted using a separate slider. For example, we can take our yellow from very low lightness like this to a very high lightness like this. You can already see that this is a much more intuitive way of finding colors compared to using RGB values. Okay, let's pause here so you can get the hang of HSL color selection in the next exercise.