CSS中invert()函数的颜色转换公式是什么？为何50%时呈全灰？

我完全懂你对invert(50%)让图像变成纯灰色的困惑——一开始我也觉得这个结果有点反直觉，直到深挖了CSS滤镜的官方计算逻辑才搞明白。

首先，先给你invert()函数官方的颜色通道计算公式：
对于每个RGB颜色通道（注意这里的通道值是归一化到0-1范围的，不是我们常用的0-255），输出值是通过线性插值计算的：

output_channel = input_channel + (1 - 2 * input_channel) * amount

或者换一种更直观的写法，本质是把原始颜色和完全反转后的颜色按比例混合：

output_channel = (1 - input_channel) * amount + input_channel * (1 - amount)

这里的amount就是你传入的参数值（比如50%对应0.5，100%对应1）。

为什么invert(50%)会变成纯灰色？ #

当amount=0.5时，代入第一个公式计算：

output_channel = input_channel + (1 - 2*input_channel)*0.5
= input_channel + 0.5 - input_channel
= 0.5

不管原始通道的数值是多少（0到1之间的任何值），计算结果都会固定为0.5。对应到8位颜色值就是128，三个RGB通道都是128的话，就是标准的中灰色（#808080），所以整个图像就变成了纯灰色。

你之前的假设错在哪？ #

你一开始以为是类似abs(255 - 像素值)的反转逻辑，其实这只是amount=1（也就是100%）时的特殊情况：当amount=1，公式简化为output_channel = 1 - input_channel，对应到0-255的范围就是255 - 像素值，这时候才是完全的颜色反转。

简单总结一下：invert()本质是原始颜色与完全反转颜色的线性混合，比例由你传入的参数决定。0%是原始颜色，50%是两者各占一半的混合（刚好到中间灰色），100%是完全反转颜色。

内容的提问来源于stack exchange，提问作者Vasu Deo.S