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%`])

HSL color wheel

H Hue - test

See the Pen hsl() test - Hue by Vincent Humeau (@vinceumo) on CodePen.

S Saturation - test

See the Pen hsl() test - Saturation by Vincent Humeau (@vinceumo) on CodePen.

L Lightness - test

See the Pen hsl() test - Lightness by Vincent Humeau (@vinceumo) on CodePen.

Resources