SVG Color Changer

Every colour used in your SVG appears as a swatch. Click one to replace it everywhere, including inside style attributes and gradients.

Loading the SVG Color Changer tool…

Processed on your device. Files are never uploaded.

How to use the SVG Color Changer tool

  1. Drop or paste an SVG.

  2. Click a swatch and pick a new colour, or use “Make monochrome” and “Use currentColor”.

  3. Download the recoloured SVG or copy the code.

Colours hide in more places than fill=""

An SVG can set colour in fill and stroke attributes, in style="" attributes, in <style> blocks, and on gradient stop-color. SVGShift finds hex, rgb() and named colours in all of these, normalises them, and replaces every occurrence of the one you change.

currentColor for icon systems

Setting fills to currentColor makes an inline SVG inherit the CSS color of its parent, so one icon can be purple in a button and white in a dark header without separate files.

Questions

How do I change the colour of an SVG in CSS?

For inline SVG, set fill="currentColor" (the button here does it) and control color in CSS. For an SVG used in <img>, CSS cannot reach inside it; recolour the file itself or use a CSS mask.

Does it handle gradients?

Yes, gradient stop colours appear as swatches like any other colour.

Can I make the whole SVG one colour?

Yes. “Make monochrome” replaces every colour with the one you choose, which is handy for logos on coloured backgrounds.