CSS HSL
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.Syntax
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 |
Example
.blue {
background-color: hsl(240, 100%, 50%);
}