8

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:

enter image description here

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?

2

0

Browse other questions tagged or ask your own question.