SVG Color Filter Generator v2.0

If you want to


Real pixel, color applied through CSS background-color:
Filtered pixel, color applied through CSS filter:



This is an example of a class that you could generate and apply this filter to:

<style>
.color-fill {
   
}
</style>

The goal was to be able to create custom style sheets and allow for the coloring of icons for Creating a Dovetail Agent Theme.

For this code to work well the starting color of the SVG needs to be black. If your icon set isn't black you can prepend "brightness(0) saturate(100%)" to your filter property which will first turn the icon set to black.

For as long as I worked on creating this solution from multiple resources I found some had spent far longer to create this already completed solution. Only slightly modified to focus on HEX colors. Credit goes to MultiplyByZer0 for their post https://stackoverflow.com/a/43960991/604861

Mea Culpa: This work was shamelessly misappropriated from Barrett Sonntag
;