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