How to use HSL and HSLa Colors in CSS

Learn how to use HSL and HSLa colors in CSS and what makes them different from RGB/RGBa and Hex.

HSL and HSLa are color methods in CSS that you can use as alternatives to Hex or RGB/RGBa to apply more real-world colors to your website.

HSL vs. HSLa:

• HSL stands for Hue Saturation Lightness
• HSLa stands for Hue Saturation Lightness Alpha

HSLa is an extension of HSL, with an Alpha channel that you can use to specify transparency values (or opacity). HSL and HSLa are different in the same way that RGB and RGBa are different from each other.

HSL/HSLa usage

To use HSL and HSLa, CSS provides two color functions hsl() and hsla().

Basic HSL usage:

div {
    background-color:hsl(0, 100%, 50%); /* Red */
}

Basic HSLa usage:

div {
    background-color:hsla(0, 100%, 50%, 0.6);
}

Is HSL better than Hex and RGB?

You’re probably wondering if HSL is better than RGB and Hex. There must be a reason HSL was added to the CSS language, right?

It’s hard to say that HSL is better than Hex and RGB (although some will make that point). It depends on what you want to do.

The idea behind HSL is to provide an intuitive color format that mimics the real world. HSL allows you to adjust light and darkness on a color to change the representation of the color without changing the color itself.

Hex and RGB can’t do that.

For example, if you look at the colors in your room right now, the way you perceive those exact colors are the result of light coming from things like:

• Windows
• Lamps
• Candles
• A combination of light sources

Let’s say you only have natural light coming in through your windows right now.

Now go ahead and pull down your curtains. This will remove lightness from your room and change the perception of every color in your room.

The colors of every item in your room now looks like darker versions of those colors compared to before you pulled down the curtains.

However, and this is the main point:

Removing lightness doesn’t change the actual color of things in your room, it changes the perception from a lighter to a darker version of those colors.

Now if you take a picture of your room before and after pulling down the curtains, and then grab those before/after color values in RGB format, those colors of the before/after would be two different colors. The same goes for Hex colors.

HSL, however, won’t give you two different colors, but the same color with different Lightness values (the L in HSL).

So let’s say you have a brown walnut colored table in your room. Now you take one picture with the curtains pulled up, and one with the curtains pulled down.

The Hex and RGB values of those before/after pictures would be two different color values, respectively.

The HSL values of those before/after pictures would be the same color, but with different Lightness values.

Some will argue that:

• Hex and RGB are more machine-readable
• HSL is more human-readable

While the above is probably true for most who already understand and have experience with all three color methods, your experience could be different.

I always say that people do best what they do most. So if you have years of experience using Hex or RGB and zero experience with HSL, then you will probably find HSL harder to read initially.

To summarize what makes HSL different:

• HSL allows you to change the lightness and darkness of colors without changing the colors themselves.
• RGB and Hex can’t change the lightness and darkness of colors without also changing the colors themselves.