Convert a hex or rgb color to fecolormatrix values

Question

I know literally nothing about SVG but I have a script running on my site that toggles images between color and B+W by applying an svg color filter and then removing it on hover. The tone of the color appears to be set using a matrix of values shown below...

 <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>

My problem is that I want to change the color of the filter so that it has a very slight sepia tone instead of pure B+W as it currently is. I can't believe that nobody has created a RGB or hex color converter but google doesn't seem to turn one up - maybe I am searching for the wrong thing? How do I do this? I heard once that it is done in illustrator but I dont use illustrator. Is there an online converter or can it be done in photoshop?

Answer 1

I think you mistake the function of a feColorMatrix. You don't get a single output color from a colormatrix, the output is dependent on the combination of R , G, and B colors.

Read the web platform docs on feColorMatrix.

You can play with sepia settings using this color matrix demo I built.

Answer 2

There is a webkit-filter that is, precisely, sepia. It has a parament to specify the amount (of sepia filtering), and the equivalent is:

<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>

info taken from here