Change the colours of an SVG
Choose an SVG to see every colour it uses, each with a swatch and the number of times it appears. Pick a new colour for any of them and download the changed file.
Free, no account. The file is read by code running in your browser. It is not uploaded, and nothing about it is stored.
How to change the colours of an SVG
- Choose your SVG, drop it on the box, or paste SVG code.
- Find the colour in the list. Each row shows how the file writes it and how many fills, strokes and gradient stops use it.
- Click the colour box on that row and pick the new colour. The picture on the right changes at once.
- Download the SVG. To make the whole drawing one colour, pick it beside “Make everything one colour” and press “Apply to all”.
Where it finds colours
An SVG can state a colour in several places, and editors mix them freely. This tool reads all of them: fill and stroke attributes, style attributes, rules inside <style> blocks (the .st0 and .cls-1 classes that Illustrator writes), stop-color on gradient stops, flood-color and lighting-color in filters, the color property, and the values of colour animations.
It also reads every way CSS has of writing a colour: the 148 names, hex with 3, 4, 6 or 8 digits, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() and color(). The same colour written different ways is one row: red, #f00, #FF0000 and rgb(255, 0, 0) are counted together and change together.
Black that is not written, currentColor and none
- No fill given. A shape with no fill anywhere, on itself or on a group around it, is painted black: that is the SVG default. Such shapes have no colour in the file to find, so they get a row of their own. Pick a colour and a
fillis written on each of them. Shapes inside a clip path or a mask are left out, because black means something else there. - currentColor. Not a colour but an instruction: use the text colour of whatever is around me. In a web page that is the page’s CSS
color; in a file opened on its own it is black unless the file setscoloritself. Pick a colour on this row to replace the instruction with a fixed colour. - none. Means paint nothing, as in a shape with an outline and no fill. It is listed with its count so that the list is complete, and it is never changed.
What is written back
Each colour you change is written as six-digit hex, such as #1565c0. A colour that was partly see-through keeps its opacity and is written as rgba(), which older programs read more reliably than eight-digit hex. Nothing else in the file is touched: the same shapes, ids, classes and white space, and separate settings such as fill-opacity stay as they are.
What it cannot change
- Pictures embedded in the SVG with
<image>. They are pixels; the tool tells you how many there are. - Colours that are worked out and not written: a value that goes through
var(), or a colour shifted by a filter. These are listed in a note under the rows. - CSS outside the file. If a web page’s own style sheet sets
fillon an SVG placed in its HTML, that rule wins over the file’s attributes whatever they say.
Changing an SVG’s colour with CSS
CSS on a page can recolour an SVG only when the SVG’s code is in the page itself, as an inline <svg> element: then svg path { fill: #c2185b } works. An SVG loaded with <img> or as a background-image is a sealed picture that page CSS cannot reach, which is why the colour has to be changed in the file. A common middle way for icons is to set the fills to currentColor, inline the SVG, and let the page’s color property drive it.
Questions
How do I make an SVG all one colour, such as black or white?
Pick the colour beside “Make everything one colour” and press “Apply to all”. Every colour row, currentColor and any shapes with no fill are set to it. Entries of none stay as they are, so outlines remain outlines.
Why is part of my SVG black when the file has no black in it?
Those shapes have no fill written, and SVG paints a shape black when nothing says otherwise. They appear here as the row “No fill given”, where you can give them a colour.
Does it change the colours inside gradients?
Yes. Every gradient stop is a colour like any other and has its row, counted as a gradient stop. Change both ends of a gradient to keep it a gradient, or set them to the same colour to flatten it.
Can I type an exact hex code?
On a computer, yes: the colour box opens your browser’s own colour picker, and the pickers in Chrome, Edge, Firefox and Safari have a field for typing hex or RGB values. Pickers on phones vary, and some offer only swatches and sliders.
Is my file uploaded?
No. The colours are found and replaced by code running in your browser, and the file never leaves your device.