What is the algorithm behind the saturate and brightness css filters?

Question

If I apply filter: saturate(50%) to #FF0000 (that is HSB: 0, 100, 100) I expect to obtain #FF8080 (that is HSB: 0, 50, 100)

BUT (you can try)

instead I obtain #9B1B1B...

What are the algorithms behind the saturate and brightness filters?

Answer 1

The CSS filter saturation function is based on the SVG Filter spec for feColorMatrix/saturate but performed in the sRGB color space. The applied matrix is as follows:

| 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