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 */
}

Syntax

color: hsl(<hue>, <saturation>%, <lightness>%);

Value | Description | —— | —— |<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 |

Notes

• 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.