HSL Colors

With RGB and hex colors, it's hard to guess what color a set of numbers gives, or how to change them to get a lighter or darker version of a color. HSL colors describe a color the way people think about it. HSL stands for hue, saturation and lightness:

  • Hue is the position on the color wheel, in degrees from 0 to 360: 0 is red, 120 green, 240 blue, and 360 is red again.
  • Saturation says how vivid the color is: 0% is gray, 100% is the most vivid version of the hue.
  • Lightness says how light the color is: 0% is always black, 100% always white, and 50% is the color itself, neither lightened nor darkened.
The color wheel: red at 0 degrees at the top, then clockwise yellow at 60, green at 120, cyan at 180 at the bottom, blue at 240 and magenta at 300 degrees.
h1 {
	color: hsl(180, 100%, 50%);
}

This heading would be cyan, a bright greenish blue: hue 180°, at the bottom of the wheel, full saturation and lightness 50%.

The great advantage of HSL: to get a lighter or darker version of a color, we change only the lightness. Our green headings, rgb(71, 105, 88), are about hsl(150, 19%, 35%) in HSL. With the same hue and saturation and a lightness of 20%, we get a darker version of the same green, and with 60% a lighter one:

hsl(150, 19%, 20%) hsl(150, 19%, 35%) hsl(150, 19%, 60%)

Instructions

In the rule for .title-background, change the value of background-color from black to hsl(150, 19%, 20%), a dark version of the heading green.

Start programming for free

By signing up, you agree to the Terms of Service and Privacy Policy.

Or sign up with:

Back

6/9

Next