HSL Clock

HSL is an intuitive way of understanding and using color (the h in hsl). There are 360deg, with each angle corresponding to a hue on the color wheel. If you can learn to read an analog clock, you can learn hsl()!

Value Scales


I am just editing the L in hsl() in this instance. I have set the hue to 0deg (red) and the saturation to 0% (no color saturation) and in each block I increment the lightness up by 10. The value moves from low key (black) to high key (white). Value is the foundation of contrast.

Lightness & Saturation

Let's add saturation to the mix. I have left the hue at 0deg (red) and the saturation is now maxed out at 100% (full color saturation) and in each block I continue increment the lightness up by 10. This is how a color is modified by lightness. In the middle, at 100% saturation and 50% lightness, you have the "reddest red" - great for mixing!

Lightness, Saturation, and Hue

Now, with the saturation at 100% and the Lightness incrementing up by 10%, I have set the hue to adjust angle by around 30deg each block. Notice how much harder it is to accurately perceive value when color information is added. Suddenly, we may make mistakes about which colors are "brighter."

Highlights, Midtones, Shadows to create shape

Now that you know how to create highlights, midtones, and shadows with any shade of gray or any color (adjusting for hue, saturation, and lightness) you can create the illusion of shape.