如何在Sass中正确计算补色？为何结果与专业色轮工具不一致？

两种结果的计算逻辑基于完全不同的色彩模型，不存在谁算错的问题：

• Sass内置的color.adjust($hue: 180deg)、color.complement()函数，都是基于RGB-HSL/HSV数字色轮计算：将输入色转换为HSL表示后，直接把色相值偏移180度得到结果。对#95F195来说，它在HSL空间的色相为120°（正绿色），偏移180°后色相为300°（品红色），最终输出#f195f1，这个计算在HSL色彩体系下是完全准确的。
• 专业配色工具使用的补色逻辑不是基于HSL数字色轮：多数这类工具默认采用传统美术领域的RYB（红-黄-蓝）色轮，或是基于CIELAB感知均匀色彩空间计算补色，在这套体系下绿色的补色为红色系，而非HSL色轮下的品红色，因此最终输出#FF9E9E的结果。

Sass内置颜色模块没有提供RYB、CIELAB色彩空间的原生计算能力，直接使用内置色相偏移或补色函数无法得到和专业配色工具一致的结果，需要自行实现对应色彩空间的转换逻辑：

1. 若需要匹配传统美术色轮（和Paletton、Adobe Color默认结果对齐），可以使用RYB空间补色计算函数，示例代码如下：

@use "sass:color";
@use "sass:math";

@function get-ryb-complement($input-color) {
  // 提取并归一化RGB通道值
  $r: color.red($input-color) / 255;
  $g: color.green($input-color) / 255;
  $b: color.blue($input-color) / 255;

  // 计算RYB空间色相值
  $ryb-h: (math.atan2(math.sqrt(3) * ($g - $b), 2 * $r - $g - $b)) * 180 / math.$pi;
  // 补色为色相偏移180°
  $comp-h: $ryb-h + 180;
  @if $comp-h > 360 {
    $comp-h: $comp-h - 360;
  }

  // 保留原颜色的饱和度、亮度，转回RGB格式
  @return color.hsl($comp-h, color.saturation($input-color), color.lightness($input-color));
}

// 测试色值#95F195
@debug get-ryb-complement(#95F195); // 输出结果约为#ff9d9d，和专业工具结果视觉上无明显差异

2. 若需要100%精度匹配专业工具的感知补色结果，可以引入支持CIELAB色彩空间计算的Sass工具库，将输入色转换到Lab*空间后对a、b通道值取反，再转回RGB即可，该方法的计算结果和设计工具输出完全一致。

补色本身没有绝对的“正确”标准，选择哪种计算逻辑要匹配实际工作流：如果是做CSS色彩交互、前端动效类需求，Sass内置的HSL补色完全够用；如果是要对齐UI设计的配色体系，就用RYB/CIELAB空间的计算结果。

内容的提问来源于stack exchange，提问作者John Winston