什么是使饱和度和亮度CSS滤镜的算法？

Question

如果我对代码 #FF0000（即HSB：0、100、100）应用filter: saturate(50%)，我希望得到的结果是#FF8080（即HSB：0、50、100）。但是，实际上结果是#9B1B1B...。Saturate和Brightness过滤器背后的算法是什么？

- Oscar Fanelli

---

你已经有了饱和值为100，saturate()函数会增加饱和度，但不能超过100，所以我猜测你期望发生的是去饱和，据我所知，你不能使用负值重新计算新值。 - DaniP

我猜这个差异来自于Gamma函数。 - vals

@DaniP我不这么认为，w3schools网站上说“0％（0）会使图像完全失去饱和度。 100％是默认值，表示原始图像”。 - Oscar Fanelli

@vals，你能解释得更清楚一些吗？ - Oscar Fanelli

Answer 1

CSS滤镜的饱和度函数基于SVG滤镜规范中的feColorMatrix/saturate，但在sRGB色彩空间中执行。应用的矩阵如下：

| R' |     |0.213+0.787s  0.715-0.715s  0.072-0.072s 0  0 |    | R | 
| G' |     |0.213-0.213s  0.715+0.285s  0.072-0.072s 0  0 |    | G | 
| B' |  =  |0.213-0.213s  0.715-0.715s  0.072+0.928s 0  0 | *  | B | 
| A' |     |           0            0             0  1  0 |    | A | 
| 1  |     |           0            0             0  0  1 |    | 1 |

https://www.w3.org/TR/SVG/filters.html#feColorMatrixElement

- Michael Mullany