SVG Color Changer

About changing the colours in an SVG

An SVG is text. Somewhere inside it, a shape says fill="#1f2937", and that is the entire reason the icon is dark grey. Change those seven characters and the icon is whatever you want.

The trouble is finding them. A real export from Illustrator or Figma does not put its colours in one obvious place — it scatters them across fill attributes, style attributes, a <style> block full of class rules, and the stops inside a gradient. Open the file in a text editor and you are hunting through a thousand lines for the eleven that matter.

This reads the whole file, gathers every colour it uses, and lists them in a table. Change the colour on the right of a row and every shape using it changes with it, in the edited preview, as you pick. What comes back is your file with new colour values — nothing else touched.

Two ways to change a colour

• By colour — the table under the pictures lists every distinct colour in the file: what it is on the left, what it becomes on the right. Each row starts as its own original, so nothing changes until you say so. Change one and all of its uses change together. This is what you want for "make the blue parts green", and for recolouring an icon to a brand palette.
• By shape — click any shape in the picture and colour that one on its own, even when it shares a colour with twenty others. Its fill and outline get their own values, and nothing else moves.

The two work together: set the palette first, then fix the one shape that needed to be different.

Make everything one colour

The single most common job. An icon arrives in five greys and you need it flat white for a dark header, or flat black for a print, or one brand colour for a set of buttons.

Pick a colour, press Apply, and every colour in the file becomes that one. Shapes with no fill stay with no fill, so outlines stay outlines and holes stay holes.

Where it looks for colours

• fill and stroke written as attributes
• The same properties inside a style attribute
• <style> blocks — class rules like .cls-1 { fill: #231f20; }, which is how Illustrator writes almost every export
• stop-color inside gradients, so a gradient can be recoloured stop by stop
• flood-color and lighting-color on filters

Colours written any way CSS allows are understood — #f00, #ff0000, rgb(255,0,0), rgba(255,0,0,.5) and names like red or darkslategray. Transparency is kept: a half-transparent shape stays half-transparent in its new colour.

What it will not touch

• Gradients and patterns as such. The stops inside a gradient can be recoloured; the gradient itself is not turned into a flat colour, and a shape filled with url(#pattern) is left alone.
• Embedded bitmaps. A PNG pasted inside an SVG is a photograph, not a shape, and it has no fill to change. Use Image Color Picker or an image editor for those.
• Anything that is not a colour. Opacity, stroke width, transforms and text all come out as they went in.

Nothing is uploaded

The file is read, recoloured and rewritten inside your browser. It never reaches a server, which matters when the file is an unreleased logo, a client's brand mark or artwork under NDA.

It also means no upload wait, no size limit, and the tool keeps working offline once the page has loaded.

One deliberate exception to "nothing is changed": if the file contains a <script> block, it is removed, and the page tells you so. A picture has no reason to carry runnable code, and this tool has to draw the file to show it to you.

What people use it for

• Recolouring an icon set to a brand palette without opening a design program
• Making a logo flat white for a dark header, or flat black for print
• Fixing the one shape that came out the wrong colour
• Producing light and dark versions of the same graphic
• Changing a gradient's stops without rebuilding the gradient
• Trying colours quickly, since the picture updates as you pick

Good to know

• The two previews are the file before and after, drawn at the same scale — and the edited one is the actual document, so what you see is exactly what downloads
• A shape-by-shape change is written as a plain fill or stroke attribute where that works, and as an inline style only when a <style> rule in the file would otherwise overrule it — the tool checks which happened rather than guessing
• Colours are grouped by their value, so #FFF, #ffffff and white are one row
• Each row has its own undo, and Put every colour back returns the whole file to how it arrived
• A file with hundreds of colours is almost always a traced photograph; only the most used are listed
• The right-hand column takes a typed hex as well as the picker, so a brand colour can be pasted straight in
• To crop the empty space around the result, use Crop SVG
• To turn the result into a PNG, use SVG to PNG

How to use it

• Click Click to upload, or drop your SVG onto the box
• Every colour in the file appears as a row in the table, original on the left
• Set the colour on the right — with the picker or by typing a hex — to change it everywhere it is used
• Or click a shape in the edited picture to colour only that one
• Use Make everything one colour for a flat single-colour version
• Press Download SVG, or Copy SVG code to paste it straight into a page

Related tools

• Crop SVG — trim the empty space around the result
• SVG to PNG — turn the recoloured SVG into a bitmap
• SVG to JPG — an SVG as a flat picture
• Image to SVG — trace a logo into vector paths first
• Color Palette From Image — pull a palette out of a photo
• Color Contrast Checker — check the colours you picked are readable