How to clamp the lightness of a relative color in CSS

Let’s say we have a color in a CSS variable.

--custom-color: #226622;

Let’s say we don’t have any control over this color (maybe it came from user input?), but we’d like to use it.

But we only want to use it if it’s not too dark or too light. If it’s too dark or too light, we would rather modify the color so it’s less dark or less light.

This can be achieved with the relative color syntax, the hsl() function and clamp() function.

Let’s say we want to keep the color lightness between 40% and 80%:

To clamp the lightness of our custom color between those values, do this:

--custom-color: #226622;
--min-lightness: 40;
--max-lightness: 80;

background-color: hsl(from var(--custom-color) h s clamp(var(--min-lightness), l, var(--max-lightness)));

/* Use @supports to add in support for old syntax that requires % units to
 be specified in lightness calculations. This is required for
 Safari >= 16.4+ and < 18.0 */
@supports (color: hsl(from red h s calc(l - 20%))) {
  background-color: hsl(from var(--custom-color) h s clamp(calc(var(--min-lightness) * 1%), l, calc(var(--max-lightness) * 1%)));
}

(Thanks to MDN for giving us the right @support rule to make this work in Safari.)

#Demo

Check out the demo on CodePen.

#Disclaimer

I’m not saying it’s necessarily a good idea to use this technique in your project. The “lightness” in the HSL coordinates of a color in the RGB color space is not a perfect representation of a perceived color lightness. But maybe it’s good enough for your use case?

I just wanted to show off a cool CSS feature.