Widely available Useful for design systems and palette generation where color relationships matter more than literal channel values.

HSL

Note: The hsla() functional notation is an alias for hsl(). They are exactly equivalent. It is recommended to use hsl().

The hsl() functional notation expresses a color in the sRGB color space according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.

ColorFunctionsStyling

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.color.hsl
1
12
1
3.1
18
2
CSS type
hsl.alpha parameter

Alpha parameter
65
79
52
12.1
65
12.2
hsl.mixed type parameters

Mix `<percentage>` and `<number>` in parameters
121
121
122
18
121
18
hsl.space separated parameters

Space-separated parameters
65
79
52
12.1
65
12.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.primary {
  color: hsl(220, 80%, 50%);
}
.overlay {
  background: hsl(0 0% 0% / 0.5);
}

Live demo

Hue shift

CSS Colorphase. change demo.

PreviewFullscreen

saturation. change

CSS saturation. change demo.

PreviewFullscreen

opacity with

CSS opacity with demo.

PreviewFullscreen

Use cases

  • Palette tuning

    Adjust lightness or saturation systematically when building semantic color sets.

  • Theme variation

    Create hover, active, and muted states from a base hue with more readable intent.

Cautions

  • HSL can be intuitive, but perceived brightness still varies across hues, so numerical lightness is not a full contrast guarantee.
  • Token naming and documentation remain important even when the color function is readable.

Accessibility

  • Use HSL to support systematic palettes, but always verify the resulting contrast in real UI contexts.

Related links