在SASS中，补码和反码有什么区别？

Question

我正在阅读 SASS 文档，发现 complement 和 invert 有相同的输出结果，请问这两者有什么区别？

//SASS Code
$color:#ff0099;
$complement:complement($color);
//Returns the complement of a color.
$invert:invert($color);//Returns the inverse of a color.
.complement{background:$complement;}
.invert{background:$invert;}

//CSS
.complement {
    background: #00ff66;//Same Color Code
}

.invert {
    background: #00ff66;//Same Color Code
}

- fruitjs

Answer 1

由于某些原因，很多在线示例中 complement/invert 使用的颜色值会导致两个函数输出相同结果。

虽然许多颜色值的 complement/invert 是相同的，但也有很多值会产生不同的颜色。

例如：

$color: #ff6699;

complement($color)    = #66ffcc;
invert($color)        = #009966;

重新措辞 Sass 文档：

补色

返回在 HSL 颜色轮上 180 度相反的颜色。

计算颜色的补色：

1. 将颜色值转换为 RGB

   #ff6699 = RGB 255, 102, 153

2. 将 RGB 值中的最高值和最低值相加

   255 + 102 = 357

3. 从步骤 #2 中的数字中减去原始 RGB 值

   (357-255) (357-102) (357-153)
102 255 204

4. 这对应着 #66ffcc

反相

返回颜色的红、绿、蓝三个色值的倒数。

计算颜色的反相：

1. 将颜色值转换为 RGB

   #ff6699 = RGB 255, 102, 153

2. 通过将原始 RGB 值从 255 中减去来翻转数值

   (255-255) (255-102) (255-153)
0 153 102

3. 这对应着 #009966

- Brett DeWoody

---

谢谢你的回答，你能告诉我参考书名或者其他可以深入了解颜色混合的资料吗？ - fruitjs

请注意，要获得真正的补色，您需要在线性颜色空间中计算正确的颜色，并可能使用OKLab颜色空间以获得最佳结果。这是因为补色应该保持相同的亮度（亮度）和饱和度（色度），只旋转色调。仅基于sRGB值计算值将导致伽马坡道和人类对绿光与蓝光等的视觉响应产生错误，但这是SASS支持的功能。 - Mikko Rantalainen