Understanding the HSL Function in CSS

June 7, 2023 by Chris Straw

What is HSL?

HSL stands for Hue, Saturation, and Lightness. It’s one of the many ways CSS allows us to define colors. Using HSL can help make your stylesheets more intuitive and easy to manage, as it gives you control over specific aspects of color.

Hue, Saturation, Lightness

Hue is a degree on the color wheel from 0 to 360. For instance, 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, with 100% being full saturation and 0% being a shade of gray. In other words, it defines the intensity of the color.
Lightness, also a percentage, describes how much white or black is mixed with the color. 0% lightness is black, 100% is white, and 50% is the normal color.

Using HSL in CSS

To use HSL in CSS, you’ll use the hsl() function, specifying your values for hue, saturation, and lightness in that order. Here’s a quick example:

div {
  background-color: hsl(120, 100%, 50%);
}

In this snippet, we’ve defined a color that is 120 degrees around the color wheel (which results in a green hue), at 100% saturation (making it a vivid, bright green), and 50% lightness (keeping it at a moderate brightness level).

The Power of HSL

The power of the HSL function is in its simplicity and control. Adjusting hue, saturation, and lightness independently gives you enormous flexibility when defining colors.

HSLA: Adding Transparency

In addition to HSL, CSS also provides the hsla() function. It works in the same way as hsl(), but with an added fourth parameter: alpha. The alpha parameter controls the transparency of the color, ranging from 0 (completely transparent) to 1 (completely opaque).

Useful Links

Convert Hex to HSL: https://colordesigner.io/convert/hextohsl

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl