css - 饱和度和亮度 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