Skip to content

SVG Color Changer

Detected colors (3)

  • #111827

    →

    #111827
  • #3b82f6

    →

    #3b82f6
  • #ef4444

    →

    #ef4444

Estimates for educational purposes — not financial, medical, or legal advice. See terms.

Icon sets and brand asset packs almost always come in one or two stock colors — usually black or a single brand hue — and need to be recolored to fit the design you are actually working on. Doing this by hand means opening each file in an editor and swapping every fill attribute, which is tedious at three icons and unbearable at thirty. This tool automates the common case: paste an SVG, see every unique color it contains, pick new ones, and download the recolored result.

Every operation happens in your browser. The SVG source is never uploaded, so you can use this on proprietary assets without worrying about them ending up in someone else’s server logs.

How it works

The tool scans the SVG source for two kinds of color declarations:

  1. Attribute colors — fill="#ff0000" or stroke="red" directly on an element. This is the most common form in Figma-exported SVGs and hand-written icons.
  2. Inline style colors — style="fill: #ff0000; stroke: blue" on an element. Some tools emit this form instead, usually to override stylesheet rules.

Every color it finds is normalized to the canonical 6-digit hex form (so red, #f00, and rgb(255,0,0) all become #ff0000 and are treated as the same color). Duplicates are collapsed into a single entry in the detected-colors list. Pick a new color for any entry and the preview re-renders immediately, showing exactly how the final SVG will look.

When you are happy with the mapping, copy the output SVG to your clipboard or download it as a .svg file. The output is the same source you pasted in, with every matching color replaced in-place; element structure, attributes, whitespace, and comments are all preserved.

What this is actually good for

  • Recoloring an icon set to match your brand palette. Paste a Feather or Heroicons SVG, swap #000 for your primary colour, done.
  • Making a dark-mode version of a logo. Swap the light-mode colors for their dark-mode equivalents, download the variant, ship both — then verify the contrast ratio so the dark-mode version still meets WCAG.
  • Checking colour contrast variations. Try an accent swap against a dark background without opening a vector editor.
  • Quick A/B on brand colors. Compare two palette options on the same asset in a few clicks — the hex/RGB/HSL converter is handy if you’re translating spec values into the hex the colour input accepts.

For any of these, the alternative is opening a vector editor, finding every element one at a time, and changing them by hand. The tool is a lot faster for simple flat icons, which is most of the icons most people actually use.

What it does not handle

  • Gradients. Radial and linear gradients define their colors as <stop> elements inside a <linearGradient> or <radialGradient> block, not as direct fills. The tool leaves gradient stops untouched. If you need to recolor a gradient illustration, a vector editor is the right tool.
  • CSS stylesheet blocks. A <style> element with CSS rules like .primary { fill: red } isn’t parsed — the tool only reads attributes and inline styles. Real-world SVG exports from Figma, Illustrator, and Sketch use attribute form almost exclusively, so in practice this limit rarely matters, but if your SVG uses class-based styling you will need to convert to inline attributes first.
  • Filters, masks, clip paths, and other indirect color references. The tool only rewrites literal fill and stroke values. If a filter recolors a shape via feColorMatrix, the filter is left alone.
  • Multi-file bulk operations. One file at a time. For a whole icon set, you want a script.

A note on security

The preview renders your pasted SVG directly in the page. That is safe for SVGs you trust (your own, or from a reputable source). SVG is a complex format that can contain scripts, so pasting SVGs from untrusted sources — random downloads, attachments from strangers — is something to avoid here the same way you would avoid opening them in any other browser-based viewer. The tool doesn’t try to sandbox the preview, because that would block legitimate features like animations. Pasting your own icons is fine; pasting a file you found on a forum is not.

Frequently asked questions

Which SVG color formats does the tool detect?

Hex (3 or 6 digit, with or without hash), rgb() and rgba() functional notation, and the common CSS named colors like red, blue, slategray. All detected colors are normalized to 6-digit hex so the same color written in different forms shows up as a single entry. Anything the tool doesn't recognize, including hsl() and the rarer named colors, is ignored.

Does it find colors inside a CSS style block?

No. Colors declared in a nested style element, like <style>.primary { fill: red }</style>, are out of scope because they need a full CSS parser to associate selectors with elements. The tool only reads inline fill and stroke attributes and inline style properties. Fortunately, that is how nearly every icon set and Figma-exported SVG in the wild writes its colors anyway, so this limitation rarely matters in practice.

Will it change colors in gradients or patterns?

No. The tool only touches direct fill and stroke declarations on shapes. Gradients and patterns define their own color stops inside gradient and pattern elements, which require a different replacement strategy. If you paste an SVG that uses gradients, the gradient will show up as a URL reference in the fill attribute and be left alone. For simple flat icons this is fine; for illustrations with gradients you will need an editor.

Is my SVG uploaded anywhere?

No. Every operation runs in your browser — parsing, detecting colors, replacing, previewing. The SVG never leaves your device. You can disconnect from the network and keep working. This is important because SVGs exported from design tools sometimes contain proprietary data you would rather not send to a server.

Can I bulk-recolor a whole folder of icons at once?

Not from this tool — it only handles one file at a time. For bulk processing of an entire icon set, paste each icon separately and apply the same color mapping, or use a script that calls the same replacement logic directly. The underlying function (applyReplacements) is exported and can be used from any Node script that reads SVG files and writes them back.