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