CSS中Invert()所使用的颜色转换公式是什么？

Question

我在CSS中遇到了invert()函数，它从图像的颜色空间倒置颜色。它以百分比(例如invert(60%) )或数字(0到1包括在内)(例如invert(.6) )输入一个值，并根据输入反转图像颜色。

然后我看到了这个站点，其中有几个使用invert()函数的例子。

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert

当输入为1%或100%时，我理解invert函数的工作，但我无法理解invert(50%)的工作原理，因为它将图像完全转化为灰色。

我以为这个公式是这样的：

abs(255 - value of each pixel's individual channel value)

将255改为128并不能使图像完全变成灰色？

所以我找不到计算倒排值的公式。

Answer 1

反相(量)的公式是

amount*(255-value)+(1-amount)*value

所以让我们一起去吧

255-value

对于0，你得到

value

对于.5，你可以得到

.5*(255-value)+(1-.5)*value
127.5-.5*value+.5*value
127.5

它将是灰色的，因为公式中的值被完全消除了。

Answer 2

不管实际函数是什么，如果它将(r, g, b)的任何值转换为(128, 128, 128)，那么就转换为it completely turns the image into grey。

255,  50, 100 => 128, 128, 128
200, 255, 200 => 128, 128, 128
...