Why does the element need to start black?

The solver assumes a pure black source. The first invert(0) step keeps it black, then sepia, saturate, brightness, and hue-rotate build up the target color from there. A non-black source will land on a different color.

Why is the result not always exact?

There is no closed-form inverse of the chained CSS filter functions, so the tool uses an SPSA optimizer that minimizes color distance. It typically lands within a small loss, but very saturated or very dark targets can drift slightly. Re-run to try a new random seed.

What does the loss number mean?

Loss is the combined squared error in RGB and HSL space between the target color and the color the filter actually produces. Under about 1 is visually indistinguishable; under 5 is usually fine for icons.

Can I use this on colored, not black, source images?

Not directly. Prepend brightness(0) to force the element to black first, then the generated filter, or recolor the source asset to black before applying.

Does it work in all browsers?

The CSS filter functions used here are supported in all modern browsers. hue-rotate uses a simplified matrix in some engines, so the on-screen result can differ marginally from the computed loss.

Color to CSS filter() Converter

The CSS filter property can tint a black icon to any color without editing the source asset, but the function chain has no simple inverse. This tool solves for a filter string numerically so you can recolor a black SVG or PNG to an exact target.

How it works

The filter chain is fixed in form and the solver tunes its parameters:

filter: invert(a%) sepia(b%) saturate(c%) hue-rotate(d deg) brightness(e%) contrast(f%);

Each function is modeled as a matrix or clamp operation on the linearized color. Starting from black, the tool runs an SPSA (Simultaneous Perturbation Stochastic Approximation) optimizer: it perturbs all parameters at once, measures the color distance to the target in both RGB and HSL space, and steps the parameters to reduce that distance over many iterations.

Tips and notes

The element must begin as pure black for the generated filter to be accurate, so apply it to a black SVG or prepend brightness(0). Because the optimization is stochastic, two runs can yield slightly different strings with similar loss; re-run if the reported loss is high. A loss under 1 is effectively perfect, and under 5 is fine for small icons where minor color drift is invisible.