In theory for every possible color-altering css filter functions like grayscale
, invert
, opacity
, saturate
, sepia
there exist equivalent transformation achievable through svg filter feColorMatrix
.
Actually almost all such operations are described here.
For instance, sepia is a shorthand for:
<filter id="sepia">
<feColorMatrix type="matrix"
values="(0.393 + 0.607 * [1 - amount]) (0.769 - 0.769 * [1 - amount]) (0.189 - 0.189 * [1 - amount]) 0 0
(0.349 - 0.349 * [1 - amount]) (0.686 + 0.314 * [1 - amount]) (0.168 - 0.168 * [1 - amount]) 0 0
(0.272 - 0.272 * [1 - amount]) (0.534 - 0.534 * [1 - amount]) (0.131 + 0.869 * [1 - amount]) 0 0
0 0 0 1 0"/>
</filter>
With hue-rotate
though it's slightly more complicated, the actual definition is:
This is pretty much how it's implemented in Chromium.
My question would be - what is exact math behind this coefficients - why exactly them has been chosen? Do they stand for approximations of some irrational numbers or whatever?