为什么“filter: invert(1)hue-rotate(180deg)”会将红色变成桃粉色？

Question

在CSS中，当你应用

滤镜：反转(1) 色调旋转(180deg)

对于图像来说，红色变成桃红色。

为什么会这样？如何使用 CSS 反转图像并且仍然使红色看起来像红色？

例子：

应用了相同的图像filter: invert(1) hue-rotate(180deg)：

---

更新：

在最初的答案中建议将上述过滤器应用于元素html，然后也将其应用于图像。颜色看起来还是不一样。结果如下：

Answer 1

为了理解为什么我们需要进行一些数学运算。

invert(1)如果我们从（最简单的）开始，我们将使用f(x) = (255 - x)^ref。于是就会 rgb(255,0,0)变成rgb(0,255,255)

对于hue-rotate(180deg)它来说更复杂。考虑到规范，我们将得到以下矩阵：

-0.574  1.43  0.144
 0.426  0.43  0.144
 0.426  1.43 -0.856

所以我们会有

R' =  -0.574*R  1.43*G  0.144*B = 1.43*255 + 0.144*255 = 401.37
G' =   0.426*R  0.43*G  0.144*B = 0.43*255 + 0.144*255 = 146.37
B' =   0.426*R  1.43*G -0.856*B = 1.43*255 - 0.856*255 = 146.37

然后是最终颜色rgb(255,146.37,146.37)，不是红色的

-0.574  1.43  0.144
 0.426  0.43  0.144
 0.426  1.43 -0.856

如何使用 CSS 反转图像并且仍然使红色看起来像红色？

这取决于考虑其他颜色时您想要得到什么结果，但您可以添加一个staturate()过滤器来恢复红色：

R' =  -0.574*R  1.43*G  0.144*B = 1.43*255 + 0.144*255 = 401.37
G' =   0.426*R  0.43*G  0.144*B = 0.43*255 + 0.144*255 = 146.37
B' =   0.426*R  1.43*G -0.856*B = 1.43*255 - 0.856*255 = 146.37

html {
  background: rgb(255, 146.37, 146.37)
}

再次一些数学来了解发生了什么。根据相同的规范，经过一些简化，我们将得到以下矩阵：

 7.87  -7.15 -0.72
-2.13   2.85 -0.72
-2.13  -7.15  9.28

所以

 R' =  7.87*R  -7.15*G -0.72*B =  7.87*255 - 7.87*146.37 = bigger than 255
 G' = -2.13*R   2.85*G -0.72*B = -2.13*255 + 2.13*146.37 = negative
 B' = -2.13*R  -7.15*G  9.28*B = -2.13*255 + 2.13*146.37 = negative

最终颜色rgb(255,0,0)