📝 CSS-Tricks 242: The Absolute Joy of hsl()

View this newsletter on the web.

[Robin]: hsl() is my new favorite design tool. Okay, so it’s not entirely new — hsl() has been around for a while — but I’ve caught myself using this new color format lately and, from now on, I’ll be avoiding writing CSS like this:

.element { color: #b91313; }

And instead I’m going to start writing something like this instead:

.element { color: hsla(0, 81%, 40%, 1); }

Why’s that? Well, the nifty thing about hsl() is that once you get used to the syntax it’s relatively easy to read and understand which values do what. While we’re at it, here’s a more modern syntax for it (note the lack of commas, and using the forward slash for alpha if you need it):

.element { background: hsl(0 81% 40%); background: hsl(0 81% 40% / 1); }

This color format makes it straightforward to manipulate colors logically and programmatically: Let’s break down what hsl() means:

  • Hue: that’s your red/blue/yellow/green etc.
  • Saturation: the gray-ness of that color (so gray-ish red, or red-ish red).
  • Lightness: the brightness of that color.
  • Alpha: the opacity.

This means that when you want to pick a new color you don’t have to use the color picker at all, you can tweak these values in your text editor and understand what each of these numbers are. It’s pretty neat.

The other day I used it to compare two colors in a visual diff UI and make sure that they look good together. All I had to do was change the hue of these colors and it worked immediately. Didn’t have to open up a design tool, or fiddle around with a bunch of options.

I love that the color picker now includes color accessibility right here as I’m editing things so I don’t need to go to an external website or tool. See there how the contrast ratio is 2.08? That’s not good enough for accessibility and so I should think about changing the color right away.

But clicking through each of the different color formats is also incredibly handy because it means I don’t need another tool to convert them either. I can see a hex value, quickly switch to hsl, and then change the value to immediately get a better color than the one I had before.

Bonus tip: you can use CSS custom properties to just charge parts of an hsl() value.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s