SVG Color Changer
Paste an SVG or open a file — every fill, stroke and gradient stop color shows up here for one-click replacement.
SVG Color Changer
Recoloring an SVG by hand means hunting fill and stroke attributes through generated markup. This tool lists every color in the file — fills, strokes, gradient stops — with a count and a picker, so you swap one value or remap the entire palette in a couple of clicks. The preview updates live and nothing is uploaded.
One Palette, Every Element
Colors are collected from fill, stroke, stop-color (gradients), flood-color and inline styles — the places generated SVGs actually hide them. Each unique value shows how many elements use it, so you know whether you're changing one accent or the whole theme before you click.
Recolor all maps every paint onto a single color instantly — the fastest way to turn a multicolor icon set into a monochrome version that follows your theme.
Where Recoloring Fits
Brand swaps, dark-mode variants, client-specific theming, fixing an icon that shipped in the wrong color — the cases are endless and all annoying by hand. Because the output is still a standard SVG file, it drops straight back into code, design tools or the favicon generator.
Frequently Asked Questions
Which color formats are supported?
Hex, rgb(), rgba(), hsl() and named colors — whatever your SVG uses. Replacement values come from the browser's native color picker (hex).
Does it touch gradients?
Yes — stop-color values are collected and replaceable like any other paint, so gradient endpoints retheme along with flat fills.
What about colors set in CSS classes or external styles?
Presentation attributes, inline styles and <style> blocks — the Figma/Illustrator default, where colors live in .cls-1 rules — are all covered. Only colors in external stylesheets linked by URL are not; inline that CSS if you want it swappable.
Does the recolored SVG stay editable?
Yes — the output is ordinary SVG markup with different color values, safe to reopen in any editor or pipeline.