Table of contents
hsl() defines color using the HSL(A) model. It stands for hue, saturation and lightness.
H: Hue, this is a degree on the color wheel from 0 to 360. Red is a 0, yellow at 60, green at 120, cyan at 180, blue at 240 and magenta at 300.
S: Saturation, It is set from 0% to 100%, where 0% is a shade of grey and 100% is the full color vivid color.
L: Lightness, It is set from 0% to 100%, where 0% is black and 100% is white. Above 50% you add white to your color, bellow 50% you add black to your color.
A: Alpha (optional), the alpha channel set the opacity of the color, 0 is fully transparent and 1 is fully opaque.
color: hsl(`hue from 0 to 360`, `saturation from 0% to 100%`, `lightness from 0% to 100%` [`Alpha from 0% to1 100%`])