Color Lab
Recolor a black SVG with CSS
Have an existing <img> you can't edit? Paste its target color here, then copy the filter onto the image.
Use pure black artwork with transparency. The filter approximates your target color.
Calculating a filter…
Finding a match…
- Target
- rgb(176, 66, 240)
- Predicted
- —
- RGB error
- —
When to use filters, masks, or inline SVG
Use a filter when you need to keep an existing image. It's useful in CMS templates, extensions, and existing layouts where you can change the CSS but not the SVG or markup. An SVG loaded through <img> doesn't normally expose its internal fill to your page's CSS.
Use a mask for new single-color or gradient icons when you control the markup. A mask paints the silhouette with an exact color or gradient; use the static gradient controls below. For inline SVG, fill="currentColor" or stroke="currentColor" is usually simpler.
The solver simulates six filters and searches for a match. RGB error is the root mean square channel difference on a 0–255 scale, measured from the exported values; it isn't a fidelity percentage. Antialiased edges and browser rendering can vary.
SVG gradients and animation
Fade your SVG between colors, place a static gradient, or animate a sweep or stream.
One change takes 1s and starts every 1s. A two-color cycle takes 2s.
Add up to three colors after the first two.
Calculating both color filters...
Apply class="color-cycle" to your black <img>. The preview and exported CSS respect reduced-motion preferences.
How gradients and animation work
Both endpoint colors are solved separately. CSS interpolates the same six filter functions between them. The intermediate hues can take an indirect route; the endpoints are the measured matches.
Gradient alone paints a static SVG mask. Move its center with the slider, turn it with the dial, and set the blend width in pixels. Sweep sends the second color across and back; Stream sends repeating color bands in one direction and supports up to three extra colors beneath the mode controls. Gradient settings are hidden until Gradient is enabled. Timing and center controls stay visible and dim when inactive within gradient modes. Sweep and Stream are mutually exclusive. Both use the full 360-degree dial.
Color change every sets how often a transition starts; Transition time sets its speed. Extra time holds each color. Shortening the interval also shortens the transition if necessary; lengthening the transition raises the interval. Zero blend gives a sharp edge. Gradient modes export a complete HTML + CSS example using a mask.
Replace the embedded mask with your own SVG artwork. Keep the element square when changing its size. The example icon is decorative; label its button or link if it communicates an action. Both modes respect reduced-motion preferences.
Make icons interactive with JavaScript
Copy a snippet after your icon markup, or load it in a deferred script. Each example works independently.