SVG Color Matrix Mixer

Easily generate nice looking color matrix filters for your images.

<svg> <filter id="dabadee"> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 1 1 1 0 0 0 0 0 1 0"> </feColorMatrix> </filter> </svg>

feColorMatrix

The feColorMatrix SVG filter can be used as a value for the CSS filter property. Combining these powers we can change the color of HTML elements.

Let's make a blue cat!

<!-- a tiny bit of style --> <style> img { filter: url(#dabadee); } </style> <!-- sprinkle cat pixels on top --> <img src="cat.jpeg"/> <!-- add a hint of SVG --> <svg xmlns=" http://www.w3.org/2000/svg"> <filter id="dabadee"> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 1 1 1 0 0 0 0 0 1 0"> </feColorMatrix> </filter> </svg> <!-- a lil' shake... aand poof! -->

🙌 We did it! Science! 🚀