How to Change SVG Colors Online
Recolor any SVG file in seconds — change fills, strokes, and specific paths without downloading software.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Method 1: Edit the SVG Code (Fastest)
Since SVG is XML text, color changes are as simple as find-and-replace. Open the SVG in a text editor, find the hex code, replace it with the new color.
- Search for fill='#000000' or fill='black'
- Replace with your target color: fill='#FF5500'
- Use Ctrl+H (Find & Replace) to change all instances at once
- Check for stroke attributes too: stroke='#000000'
- Also look for CSS inside <style> tags: .cls-1 { fill: #333; }
Method 2: Browser DevTools (No Download)
Open your SVG directly in Chrome. Right-click → Inspect. In the Elements panel, click on a <path> element. Double-click the fill attribute value to edit it — click the color swatch to use the color picker.
- Open SVG in Chrome (drag file onto browser tab)
- F12 → Elements panel
- Click any shape in the preview to jump to its XML
- Double-click the fill value and edit inline
- Right-click the SVG element → 'Copy element' to save changes
Method 3: SVGOMG + Manual Edit
Upload to SVGOMG, then use 'View source' to get the optimized SVG code. Edit colors in the code, copy the result. SVGOMG also removes duplicate class names that cause color conflicts.
Using CSS to Override SVG Colors Dynamically
For SVGs embedded inline in HTML, override colors with CSS without touching the file:
- svg { color: red; } and set fill: currentColor inside the SVG
- svg path { fill: var(--brand-color); } using CSS custom properties
- This allows dark mode, hover states, and theme switching without separate SVG files
Frequently Asked Questions
Why can't I change the color of my SVG — it stays black?
The SVG paths may have an inline fill attribute that overrides CSS. Open the file in a text editor and look for hardcoded fill='#000' attributes on each path. Remove them to let CSS take control.
How do I change just one color in a multi-color SVG?
In the SVG code, find the <path> element with the color you want to change. Look for its fill or style attribute. Change that specific value without modifying other elements.
Can I use JavaScript to change SVG colors dynamically?
Yes: document.querySelector('svg path').setAttribute('fill', '#ff0000'). Or use classList to toggle a CSS class that changes the fill.
How do I make an SVG icon change color on dark mode?
Use fill: currentColor inside the SVG and CSS: @media (prefers-color-scheme: dark) { .icon { color: white; } }. The SVG inherits the parent's color.
Can I batch-recolor multiple SVG files?
Yes. Use a Node.js script with the svgo npm package, or use Inkscape's command line. For simple hex swaps, a sed command works: sed -i 's/#000000/#FF5500/g' *.svg
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG