Choose a target color of choice by hex code
Choose a target color of choice by hex code
Let's say you have just got for yourself an amazing SVG icon that you thought is ready for use in your project, then you realise that a black icon won't just fit in your layout. This is when CSS Filter Generator come to your rescue. The goal is making coloring of icons possible by applying filter CSS property to the element.
For this code to work well, the starting color 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.
Starting from picking a target color of choice, either by entering hex value into the input field, or using the color picker (by clicking the color in the input field), dragging your cursor inside the picker area to highlight a color at the bottom of the picker.
After picking for yourself a color, notice that the background color is also changed accordingly to your chosen color, and there is a filtered pixel whose color is applied through CSS filter for comparison. The result might not be perfect, a loss value is displayed and you can re-run the Generator until you get your desired result.
There once a time I caught off myself searching for a way to change the color of an SVG icon for my project. And then I found this CodePen project made by Barrett Sonntag really helpful. You can say this is a recreation of that project with some improvements, with an aim to make such tools like this one to be more approachable to people, thus making Internet a better place.