Replace colours in SVG
Swaps one colour for another throughout an SVG – fills, strokes, gradients and styles – in your browser.
Runs in your browser – your file is never uploaded
Frequently asked questions
Is my file uploaded?
No. The conversion runs entirely in your browser. The file never leaves your device – there is no server that could see it. Once the page has loaded, the tool even works offline.
Where are colours replaced?
In the fill, stroke, stop-color, flood-color, lighting-color and color attributes, in style="…" declarations and in <style> sheets. The colour may be written as #rgb, #rrggbb, rgb(), rgba() or a CSS colour name (red, steelblue …) – matching ignores case and notation, so “red”, “#F00” and “rgb(255,0,0)” are all the same colour. Transparency (rgba alpha, #rrggbbaa) is kept.
What does the tolerance do?
With 0 only the exact colour is replaced. A higher value also replaces shades whose red, green and blue each differ by at most that much – useful for exports that dither one colour into several near-identical ones. Keep it small, or unrelated colours get caught.
Why did nothing change?
The colour may not be where you expect: gradients use stop-color on their stops, some files use currentColor or classes, and embedded raster images cannot be recoloured at all. Open the file in a text editor and look for the exact value – or raise the tolerance a little if the file uses a slightly different shade. Nothing but colour values is ever touched, so the file is otherwise unchanged.
Related tools
Fix SVG viewBox
Adds a missing viewBox from width and height so the SVG finally scales – in your browser.
● In your browser
Optimise SVG
Shrinks SVG files without changing how they look – in your browser.
● In your browser
Convert SVG to data URI
Turns an SVG into a compact data: URL for CSS and HTML – in your browser, no upload.
● In your browser
Convert SVG to CSS background
Writes a ready-to-paste CSS rule with the SVG embedded as background or mask – in your browser.
● In your browser