饱和度和亮度css滤波器背后的算法是什么？

Question

如果我将filter: saturate(50%)应用于#FF0000（即HSB：0,100,100），我希望获得#FF8080（即HSB：0,50,100）

但是（你可以试试）

而是获得#9B1B1B ...

饱和滤光片和亮度滤光片背后有哪些算法？

Answer 1

CSS滤镜饱和度功能基于feColorMatrix / saturate的SVG滤镜规格，但在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