Get in touch

Send an email to: lammers@gmail.com.
Or find me online at: Github, X

HSL color in CSS

The hsl() function in CSS for setting HSL colors has 2 syntaxes available: Space-separated and comma-separated. It also allows to optionally provide an alpha value to define a HSLA color.

  • hsl(hue saturation lightness / alpha)
  • hsl(hue, saturation, lightness, alpha)

Hue is an angle in degrees, although other units like turn are supported as well. Saturation and lightness are both given as percentages. Alpha (optional) can be specified as either a percentage or number from 0 to 1

hsl(255deg 69% 42%);
hsl(255deg 69% 42% / 0.75);

hsl(255deg, 69%, 42%);
hsl(255deg, 69%, 42%, 0.75);

See MDN for more details