CSS HSL & HSLA Colors

CSS HSL colors describe a color using hue, saturation, and lightness, while an optional alpha value can control the color's transparency.

HSL can make colors easier to understand and adjust because each component controls a recognizable characteristic of the color. Hue selects the base color, saturation controls its intensity, and lightness controls how light or dark it appears.

HSL Syntax

An HSL color is written with the hsl() color function. The three components represent hue, saturation, and lightness.

color: hsl(200 100% 40%);

Hue is commonly expressed as an angle from 0 through 360, while saturation and lightness are percentages.

Hue

Hue identifies the base color by its position around a color wheel. A full rotation contains 360 degrees.

color: hsl(0 100% 50%);     /* Red */
color: hsl(120 100% 50%);   /* Green */
color: hsl(240 100% 50%);   /* Blue */

Red begins at approximately 0deg, green at 120deg, and blue at 240deg. Because the hue scale forms a circle, 360deg returns to the same hue as 0deg.

CSS also allows hue angles to use units such as deg, grad, rad, and turn.

Saturation

Saturation controls the intensity of the color. A saturation of 100% produces the most saturated version of the selected hue, while 0% removes the hue and produces a shade of gray.

color: hsl(200 100% 40%);
color: hsl(200 50% 40%);
color: hsl(200 0% 40%);

Reducing saturation gradually removes color intensity without directly changing the hue or lightness values.

Lightness

Lightness controls how light or dark an HSL color appears. A lightness of 0% produces black, while 100% produces white.

color: hsl(200 100% 20%);
color: hsl(200 100% 40%);
color: hsl(200 100% 80%);

At intermediate values, the selected hue becomes progressively lighter as the lightness percentage increases.

HSL Alpha Transparency

An optional alpha value can be added after a slash to control the transparency of an HSL color.

background-color: hsl(200 100% 40% / 0.5);

An alpha value of 1 is fully opaque, while 0 is fully transparent. Values between them produce partial transparency.

background-color: hsl(200 100% 40% / 1);
background-color: hsl(200 100% 40% / 0.75);
background-color: hsl(200 100% 40% / 0.5);
background-color: hsl(200 100% 40% / 0);

Alpha can also be written as a percentage, with 100% representing fully opaque and 0% representing fully transparent.

Legacy HSLA Syntax

Older CSS commonly used the hsla() function with commas when an alpha value was included.

background-color: hsla(200, 100%, 40%, 0.5);

The hsla() function is still supported, but modern CSS allows alpha to be included directly in hsl() using slash syntax.

background-color: hsl(200 100% 40% / 0.5);

You may encounter both forms in existing stylesheets, so recognizing the older syntax remains useful.

HSL & HSLA Example

Use the Hue, Saturation, and Lightness sliders to create a color, then adjust Alpha to change its transparency. The current HSL color values update as the sliders move.

<style>
.color-example {
  background-color: hsl(200 100% 40% / 0.8);
  color: white;
}
</style>

<div class="color-example">HSL & HSLA Color</div>

Play in Editor

Hue changes the base color, saturation changes its intensity, lightness makes it lighter or darker, and alpha controls how transparent the resulting color appears.