CSS hsl() Notation


HSL stands for hue ("which color"), saturation ("how much color") and lightness ("how much white").

Hue is represented as an angle from 0° to 360° (without units), while saturation and lightness are represented as percentages.

p {
    color: hsl(240, 100%, 50%); /* Blue */

The HSL Color Wheel


color: hsl(<hue>, <saturation>%, <lightness>%);
<hue>specified in degrees around the color wheel (without units), where 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, 300° is magenta, and 360° is red
<saturation>specified in percentage where 0% is fully desaturated (grayscale) and 100% is fully saturated (vividly colored)
<lightness>specified in percentage where 0% is fully black and 100% is fully white


  • A saturation of 0% always produces a grayscale color; changing the hue has no effect.

  • A lightness of 0% always produces black, and 100% always produces white; changing the hue or saturation has no effect.