Vectopea
Open editor
Free colour changer

Change SVG colour online

See every colour an SVG uses and swap any of them in one click. Gradients, strokes and CSS styles are all picked up, and the file never leaves your browser.

Drop an SVG file to recolour

or

Runs in your browser · Nothing is uploaded · No account

How it works

  1. Drop or paste your SVG.
  2. Each distinct colour is listed with how many times it appears.
  3. Pick a replacement with the colour picker. Transparency on the original colour is preserved.
  4. Download the SVG, copy the code, or open it in the editor for finer changes.

Recolouring single shapes

This tool changes a colour everywhere it appears. To recolour one shape, or to turn a flat fill into a gradient, open the file in the free SVG editor, click the shape and use the fill and stroke controls. To export a coloured PNG afterwards, use SVG to PNG.

Questions

How do I change the colour of an SVG?

Drop the SVG above. Every colour in the file is listed with a swatch; pick a new colour next to any of them and the preview updates. Download the recoloured SVG when you're done.

Which colours does it find?

Hex (#fff, #ffffff, #ffffff80), rgb()/rgba(), hsl()/hsla() and named colours used in fill, stroke, stop-color, flood-color and color, including inside style attributes and <style> blocks. Colours are grouped, so #FFF and white count as one.

Why is my icon black with no colours listed?

Shapes without a fill attribute render black by default, so there is nothing to replace. Open the file in the SVG editor and set a fill, or add fill="#yourcolour" to the <svg> element.

Can I make an SVG use the current text colour?

Yes: set fill="currentColor" in the SVG editor or code editor. The icon then inherits the CSS color of its parent element when used inline in HTML.

More free SVG tools

SVG editor online

The full vector editor: pen tool, node editing, boolean operations, layers and export.

SVG Viewer

Preview any SVG file or snippet, check its size and viewBox, and read the markup.

SVG to PNG Converter

Convert SVG to a crisp PNG at up to 8× with a transparent background.

SVG Optimizer

Compress and minify SVG files with SVGO, right in your browser.

Resize SVG

Change an SVG's width and height or make it responsive, without distortion.

Crop SVG

Trim empty space around SVG artwork by fitting the viewBox to the content.

SVG Path Editor

Paste a path d attribute, preview it live and reshape it node by node.

SVG Code Editor

Edit SVG markup with a live preview, then keep editing visually.