Results
Compare the original color to the filtered version side-by-side. The goal is to achieve the smallest "Closeness" value. ποΈ
CSS Filter Code
This single line of CSS creates the target color from a black base. Copy it and use it anywhere!
filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(0%);
Closeness: 0.0 β perfect match!
The smaller the number, the more accurate the match. This value represents the difference in RGB and HSL components.
The CSS Filter Color Solver
Do you struggle to match a CSS filter to a specific color? This tool is the solution. Just enter your target HEX color, and instantly calculate the optimal CSS filter code needed to transform a black element (like an SVG icon) into that exact color. Stop guessing and start designing with precision!
How the Solver Works
This tool utilizes a computational solver based on Stochastic Perturbation Stochastic Approximation (SPSA), inspired by work from Barrett Sonnta and contributions from MultiplyByZer0. The script rapidly tests millions of filter combinations to find the perfect mix of invert, sepia, saturate, hue-rotate, brightness, and contrast that yields the closest color match to your target. It's built for speed, making complex front-end color transformations simple and precise.
Got Feedback or a New Idea?
I'm Julibe, a freelance designer and developer. I focus on building tools that simplify workflows. If this solver saved you time, or if you have an amazing feature idea, let's connect! Your feedback helps create better digital solutions.