如何通过算法在SASS中生成指定的LCH渐变映射？

当然可以借助SASS的颜色处理能力与循环逻辑，自动生成你需要的两段式LCH渐变映射，而且生成的颜色过渡会比手动定义更均匀，贴合人眼的色彩感知规律。

核心思路 #

你的渐变分为两个明确阶段：

1. 浅红白 → 纯正红：从高亮度、低彩度的浅红色，过渡到中等亮度、高彩度的纯正红色，全程保持红色的色相值不变。
2. 纯正红 → 深黑红：从中等亮度、高彩度的正红，过渡到极低亮度、低彩度的深黑红色，色相依旧维持一致。

选择LCH色彩空间插值是最优方案，因为它的亮度（L）、彩度（C）、色相（H）三个维度完全独立，插值出的渐变过渡更自然，不会出现RGB/HSB插值时的偏色或亮度跳变问题。

实现代码 #

// 定义三个锚点的LCH颜色（对应你给出的hex值的近似LCH转换）
$red-0-lch: lch(98 5 20);
$red-1000-lch: lch(55 80 20);
$red-2000-lch: lch(10 10 20);

$colors: ();

// 第一段：生成red-0 到 red-1000的颜色（共11个，步长100）
@for $i from 0 through 10 {
  $step: $i / 10;
  // 在LCH空间插值计算当前步的颜色
  $current-color: mix($red-0-lch, $red-1000-lch, $step * 100%);
  // 转换为hex并加入映射
  $colors: map-merge($colors, (red-#{$i * 100}: $current-color));
}

// 第二段：生成red-1100 到 red-2000的颜色（共10个，步长100）
@for $i from 1 through 10 {
  $step: $i / 10;
  $current-color: mix($red-1000-lch, $red-2000-lch, $step * 100%);
  $colors: map-merge($colors, (red-#{1000 + $i * 100}: $current-color));
}

// 输出验证（可选）
@each $name, $color in $colors {
  .#{$name} {
    color: $color;
  }
}

关键细节说明 #

• LCH锚点调整：你可以按需微调$red-0-lch、$red-1000-lch、$red-2000-lch的L/C/H值，比如提高$red-0-lch的彩度让浅红色更明显，或是调整$red-2000-lch的亮度让深色更暗沉。
• 插值逻辑：利用SASS的mix()函数在LCH空间插值（SASS 1.33+版本支持LCH颜色的mix），自动计算中间色的亮度、彩度过渡。
• 灵活性：如果需要调整步长（比如改成50间隔），只需要修改循环的步长参数即可，无需手动定义每个颜色。

对比手动定义的优势 #

算法生成的渐变：

• 过渡更均匀，不会出现手动定义时的亮度/彩度跳变
• 可维护性更高，调整锚点颜色后所有中间色自动更新
• 符合人眼感知，LCH空间的插值比RGB更贴近真实视觉体验

内容的提问来源于stack exchange，提问作者code writer 3000