Change color lightness using JavaScript

One of the most common operations I've found myself performing when working with colors is changing their lightness component. This is particularly useful when you want to create a hover effect for a UI element, or when you want to animate a color change.

In order to accomplish this, we have to first parse the hsl() color string and separate its components. This can be easily done using a regular expression and the String.prototype.match() method.

Once we have the components, we can modify the lightness value and create a new hsl() string. In order to safeguard against invalid lightness values, we can use Math.max() and Math.min() to ensure the value is within the valid range (between 0 and 100).

Finally, we can use a template literal to create a new hsl() string with the updated value.

const changeLightness = (delta, hslStr) => {
  const [hue, saturation, lightness] = hslStr.match(/\d+/g).map(Number);

  const newLightness = Math.max(
    0,
    Math.min(100, lightness + Number.parseFloat(delta))
  );

  return `hsl(${hue}, ${saturation}%, ${newLightness}%)`;
};

changeLightness(10, 'hsl(330, 50%, 50%)'); // 'hsl(330, 50%, 60%)'
changeLightness(-10, 'hsl(330, 50%, 50%)'); // 'hsl(330, 50%, 40%)'
changeLightness(-100, 'hsl(330, 50%, 50%)'); // 'hsl(330, 50%, 0%)'
changeLightness(100, 'hsl(330, 50%, 50%)'); // 'hsl(330, 50%, 100%)'