Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser
Learn

The current revision of CSS, CSS3 (at the time of this writing), introduces a new way to specify colors using HSL colors.

HSL stands for Hue, Saturation, and Lightness. Specifically, this is what each means:

  1. Hue - the technical term that describes what we understand as "color." In HSL, hue is represented on a color wheel. It can take on values between 0 and 360.

  2. Saturation - the amount of gray in a given color. In HSL, saturation is specified using a percentage between 0% and 100%. The percentage 0% represents a shade of gray, whereas 100% represents full saturation.

  3. Lightness - the amount of white in a given color. Similar to saturation, lightness is specified using a percentage between 0% and 100%. The percentage 0% represents black, whereas 100% represents white. 50% is normal.

You can use HSL colors in your CSS like this:

h1 { color: hsl(182, 20%, 50%); }

Notice that using HSL is very similar to using RGB.

Note: Because HSL is a part of CSS3, older browsers may not support it. In a later exercise, you'll learn how to work around support issues for colors.

Report a Bug
If you see a bug or any other issue with this page, please report it here.