使用 JavaScript 更改 HSL 颜色的亮度

简介

在本实验中，我们将探索如何使用 JavaScript 更改 hsl() 颜色字符串的亮度。通过利用字符串操作、数组方法和数学函数，我们将学习如何修改亮度值，同时确保其保持在 0 到 100 的有效范围内。在开发需要根据用户交互进行动态颜色操作的 Web 应用程序时，这项技能会派上用场。

如何更改 HSL 颜色的亮度

要更改 hsl() 颜色字符串的亮度值，请执行以下步骤：

打开终端/SSH 并输入 node 以开始练习编码。
使用 String.prototype.match() 获取一个包含三个字符串的数组，这些字符串来自 hsl() 字符串中的数值。
结合使用 Array.prototype.map() 和 Number 将字符串转换为数值数组。
使用 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 + parseFloat(delta))
  );

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

然后，你可以使用一个增量值和一个 hsl() 字符串调用 changeLightness() 函数，以获取一个包含更新后亮度值的新 hsl() 字符串。例如：

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

更改颜色亮度

简介

如何更改 HSL 颜色的亮度

总结