CSS HSL Colors

CSS HSL Colors

HSL stands for -    
  1.  Hue ("which color"), 
  2. Saturation ("how much color"), and 
  3. 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.
  • 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>);