CSS Grayscale to a certain color palette an svg

Question

I want to hover an svg with a diferent set of colors after grayscaling that svg. There is any way of setting a certain color palette to an svg with a filter css or an math algorithm?

Im not any expert in color manupulation so any help would be apreciated.

Answer 1

This can be done through CSS filters or through SVG filters. SVG filters are probably the more technically complex solution.

You can try playing with the hue-rotate function on the example on this page: filter in MDN CSS Reference

You can combine more than one function, in different orders too, to get different results.

Keep in mind that you won't get far if you set grayscale to 100% or saturate to 0% as your first function, as you wipe out the hue info and you can't recolorize (at least not through CSS IIRC).

Try playing with hue-rotate , brightness , contrast , invert , or even combining them.

Also keep in mind that most of the functions are set in percentage units, but hue-rotate is in degrees of the color wheel (deg).