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.

What is the Color to CSS filter() Converter?

Generate a CSS filter() property that recolors a black SVG or PNG to any target hex color. Uses an SPSA solver over invert, sepia, saturate, brightness, and hue-rotate, and reports the resulting color accuracy. Runs in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

Color to CSS filter() Converter

Name: Color to CSS filter() Converter
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

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.

Practical example

To recolor a black SVG icon to a brand blue of #1a73e8, paste that hex into the tool and run the solver. A typical result might look like:

filter: invert(43%) sepia(57%) saturate(1200%) hue-rotate(201deg) brightness(97%) contrast(96%);

Apply that to the SVG element in CSS and the black icon renders in the target blue. The reported loss tells you how close it is — under 2 is usually visually indistinguishable.

Tips and notes

Source must be black. The element must begin as pure black (#000000) for the generated filter to be accurate. If your icon has a grey or coloured fill, prepend brightness(0) to force it black first:

filter: brightness(0) invert(43%) sepia(57%) saturate(1200%) hue-rotate(201deg) brightness(97%) contrast(96%);

Loss is your quality signal. Because the optimization is stochastic, re-run it if the reported loss is above 5 — a fresh random seed can find a better solution. Under 1 is effectively perfect for any screen use.

Why not just change the SVG fill? Inline SVG fill changes require touching the source file or using CSS currentColor. The filter approach lets you recolor externally-loaded SVGs or icon fonts where you cannot access the source markup — useful for third-party icons, img-embedded SVGs, or icon libraries that don’t support currentColor.

Limitations — complex gradients or images with multiple colours cannot be accurately recolored this way. The technique works best on flat, single-colour vector assets like icon sets and simple logos.