饱和度和亮度 css 滤镜背后的算法是什么？答案

【问题标题】：What is the algorithm behind the saturate and brightness css filters?饱和度和亮度 css 滤镜背后的算法是什么？
【发布时间】：2017-04-11 16:11:35
【问题描述】：

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

但是（你可以试试）

相反，我获得了#9B1B1B...

饱和度和亮度滤镜背后的算法是什么？

【问题讨论】：

您已经在 100 上获得了饱和值 saturate() 将增加饱和度值但不能超过 100 所以我猜重新计算新值您期望发生的是 不饱和，据我所知你不能使用负值
我猜差异来自伽马函数
@DaniP 我不这么认为，w3schools 网站说“0% (0) 会使图像完全不饱和。100% 是默认值，代表原始图像”
@vals 你能解释得更好吗？

标签： css css-filters

【解决方案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

【讨论】：