如何修改HSL颜色？实现指定颜色渐变的方法咨询

原来的代码依赖HSB色彩模型的色相值（hue）调整颜色，这种方式只能在色相环上切换，没法直接实现两个任意十六进制颜色的平滑过渡。要实现从#00809C到#142E76的渐变，我们可以改用RGB颜色的线性插值生成中间色，具体修改如下：

1. 转译目标颜色为RGB格式
   先把两个十六进制颜色转成RGB值，方便后续计算：

• #00809C → rgb(0, 128, 156)
• #142E76 → rgb(20, 46, 118)

2. 修改模板函数，替换色相参数为进度值
   把原函数的hue参数换成0~1之间的进度值（0对应起始色，1对应结束色），通过线性插值计算当前进度对应的颜色：

// 定义起始色和结束色的RGB值
const startColor = { r: 0, g: 128, b: 156 };
const endColor = { r: 20, g: 46, b: 118 };

const gradateLineTemplate = (deg: number, progress: number) => {
  // 线性插值计算当前进度的RGB值
  const r = Math.round(startColor.r + (endColor.r - startColor.r) * progress);
  const g = Math.round(startColor.g + (endColor.g - startColor.g) * progress);
  const b = Math.round(startColor.b + (endColor.b - startColor.b) * progress);
  
  // 生成颜色字符串，替换原有的hue变量
  const lineColor = `rgb(${r}, ${g}, ${b})`;
  
  return `<line data-deg="${deg}" class="active" style="--deg: ${deg}deg; stroke: ${lineColor}" x1="300" y1="30" x2="300" y2="70" />`;
};

3. 调用函数时传入对应进度值
   假设你要生成totalLines条线条，遍历生成第i条线（从0开始计数）时，传入的进度值为i / (totalLines - 1)，就能实现从左到右（或对应线条排列顺序）从#00809C平滑过渡到#142E76的效果。

这种方法通过线性插值在两个RGB颜色间生成连续中间色，不受色彩模型限制，能实现任意两个颜色的渐变过渡。

内容的提问来源于stack exchange，提问作者n.goat_