CSS HSL Color
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 -
|
color: hsl(<hue>,<saturation> %,<lightness> %);
|
Now we will understand what is <hue>, <saturation>, and <lightness> as follows -
<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.
NOTE -
-
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.
hsla() Notation -
Similar to hsl() notation, but with an added alpha (opacity) value.
The hsla() function defines colors using the Hue-saturation-lightness-alpha model (HSLA).
Syntax -
|
hsla(<hue>, <saturation>%, <lightness>%, <alpha>);
|
