使用JavaScript改变颜色的亮度

在使用颜色时，我发现最常见的操作之一是改变它们的亮度组件。当你想为UI元素创建悬停效果或者想要动画颜色变化时，这特别有用。

为了实现这个目标，我们首先需要解析hsl()颜色字符串并分离其组件。这可以通过使用正则表达式和String.prototype.match()方法轻松完成。

一旦我们有了这些组件，我们可以修改亮度值并创建一个新的hsl()字符串。为了防止无效的亮度值，我们可以使用Math.max()和Math.min()确保值在有效范围内（在0和100之间）。

最后，我们可以使用模板字符串创建一个带有更新值的新的hsl()字符串。

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%)'