Unlike RGB and HEX, the HSL colour model is relatively easy for humans to wrap their heads around. Let’s try to build that intuition!
HSL—Hue, Saturation, Lightness.
Hue is a value from
360. If that reminds you of circles and degrees, you’re right!
The hues at 60 degree intervals are worth memorizing. Use a mnemonic, perhaps.
Red — Yellow — Green — Cyan — Blue — Magenta
The hues between these are graded gradually, as you’d expect.
Saturation is a percentage. It goes from “gray” (
0%) to “dull” to “vivid” (
Lightness is also a percentage. It goes from “black” (
0%) to “neutral” (
50%) to “white” (
Keep in mind that the neutral value of lightness is
50%. Moving to the left or right takes you towards black and white respectively.
##Saturation vs Lightness
I sometimes find the distinction between saturation and lightness tricky.
Note how low, medium, and high values of saturation and lightness combine:
Here’s an expanded version of this matrix:
When saturation is at exactly
0, the hue value becomes irrelevant and varying the lightness value gives you grayscale swatches!
When lightness is set to
0%, we get Black (
#000000) regardless of hue and saturation. Similarly, when lightness is set to
100%, we get White (
Hopefully this has left you with a better intuition of how the HSL parameters affect the color they represent! Consider taking a little quiz I built earlier to test your grasp.