SVG Color Replacer – Change Colors in Any SVG File Free

Paste an SVG and swap one colour for another everywhere.

Change the Colours in Any SVG File

Brand colours change, themes change, and a perfect icon in the wrong colour is useless. Editing every coloured shape in an SVG by hand is slow, especially when the same colour appears dozens of times. This tool swaps one colour for another across the whole file in one step.

The tool is free and runs fully in your browser. Your SVG code is never uploaded anywhere. The recoloured file downloads as a standard SVG, ready to use.

How Colour Replacement Works

Paste your SVG code, type the colour you want to replace, and pick the new colour. The tool searches the code for every occurrence of the old colour, in fills, strokes, and styles, and replaces each one with the new colour. It then tells you how many replacements it made, so you can check the result against what you expected.

The search is not case-sensitive, so a colour written in capitals is found just as surely as one in lower case. Colours must match exactly as text, so a colour written as a name, such as red, will not match the same shade written as a hex code. If a replacement count looks too low, check how the colour is written in your file.

Common Uses

The most common use is rebranding: a logo or icon set in an old brand colour becomes the new brand colour in seconds. Dark mode is another: light-theme icons can be recoloured for a dark background without redrawing anything. Seasonal campaigns work the same way, with a set of icons recoloured for a holiday or an event.

Designers also use the tool to test colour schemes. Try the same icon in three different accent colours, download each version, and compare them side by side. It is far faster than editing the file three times by hand.

Tips for Clean Results

Replace one colour at a time and check the preview after each step. Replacing two colours in one pass can create confusion if the new colour of the first step matches the old colour of the second. Work from the least-used colour to the most-used colour for the cleanest sequence.

Keep a copy of the original file before you start. The tool edits the code in place, so the original is replaced in the editor. If you want to compare versions later, download the original first, then run the replacement.

What the Tool Does Not Do

The tool replaces colour text, not colours hidden inside gradients or images embedded in the SVG. If your file uses gradients, the gradient stop colours are also text and will be replaced when they match, but a photographic image inside an SVG keeps its own colours. For those cases, edit the image itself first.

There is no account and nothing to install. Paste, pick, replace, download. Your code never leaves your browser, and the recoloured SVG is ready in seconds.

Working with Colour Names, Hex Codes and Styles

SVG files write colours in several ways, and knowing which one your file uses saves confusion. Hex codes like #0f766e are the most common, and the tool matches them exactly as text. Colour names like red or teal also appear, especially in hand-written files, and the tool matches those too, as long as you type the name exactly. The third place colours hide is inside style attributes and style blocks, where a rule like fill:#0f766e sits among other declarations. The tool searches the whole file text, so those are found as well. One caution: if your file defines the same colour once as a variable or a shared class and reuses it everywhere, replacing the text still works, because the definition itself is text. But if two different elements share a class and you only want to recolour one of them, text replacement will change both. In that case, split the class first in the editor, then run the replacement on the new class name.

More Free Image Tools

• Photo To Perler Bead Pattern Maker
• Photo To Coloring Page Maker
• Photo Stencil Maker
• Image Reflection Maker
• Rounded Corners Image Maker
• Image Shape Cropper
• App Icon Set Generator
• Image To Mouse Cursor Maker
• Svg Code Editor Live Preview
• Versión en español