Online Tool Store
SVG Color Editor
Paste SVG markup to list every color it uses, then recolor each one individually and download the updated SVG.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Colors found
Preview
How SVG Color Editor works
- Paste your SVG markup — a sample three-shape icon is pre-loaded and its colors listed immediately.
- The tool scans the raw markup with a hex-color pattern (
#fff,#2f6fed, and similar) and lists every distinct color it finds, each with a color picker. - Pick a new color for any swatch — every occurrence of that original hex value throughout the SVG is replaced at once, and the live preview updates immediately.
- Download the result once you're happy with it; the file is your original markup with only the color values changed.
This is a text substitution over the SVG's XML source, not a DOM-based recolor — it works the same way whether the color lives in a fill attribute, a stroke attribute, or inline in a style string.
FAQ
What colors does the tool detect?
Any hex color it finds in the markup — 3-digit shorthand like #fff or full 6-digit values like #2f6fed, wherever they appear: fill and stroke attributes, or inline style strings. Named colors (like "red") and rgb()/hsl() functions are not currently detected.
Does changing a color affect every element using it?
Yes — if three different shapes all use #2f6fed, recoloring that swatch updates all three at once, since the tool replaces every occurrence of the original hex string throughout the markup rather than targeting one element.
Will the downloaded file still work as a normal SVG?
Yes — the download is your original markup with only the hex color values swapped out; every attribute, path, and element stays exactly where it was, so the file opens and scales the same as before.
How we compare
| Feature | Online Tool Store | Doing it manually | A generic online tool |
|---|---|---|---|
| No file upload — runs in your browser | ✓ | N/A | ✗ |
| No sign-up required | ✓ | ✓ | ✗ |
| Free, no watermark | ✓ | ✓ | ✗ |
Opening an SVG in a full vector editor just to swap a couple of colors is overkill. This tool reads the colors straight out of the markup and lets you repaint them with a picker, live preview included, in the time it takes to paste the file.