How do I replace an SVG color?

Set Find and Replace, then click Replace color. Each fill, stroke, and stop-color that equals Find (hex, #RGB, rgb(), or a CSS name for the same color) is written as Replace.

How is this different from Change SVG Stroke Color?

Stroke color cycles outlines through a built-in palette and leaves fills. This page is a targeted find/replace across fill, stroke, and gradient stops.

Does replace convert every color to hex?

No. Only paints that match Find change. Convert SVG Colors to Hex / Named Colors to Hex rewrite notation without picking a target color. Grayscale and Darken mix every paint.

Can I find a named color and replace with hex?

Yes. Find crimson matches #dc143c and crimson. Replace can be a hex, a name, or rgb() — parseable values are stored as hex so the file stays consistent.

Replace SVG Color — Free Tool

FAQ

Quick answers

How do I replace an SVG color?: Set Find and Replace, then click Replace color. Each fill, stroke, and stop-color that equals Find (hex, #RGB, rgb(), or a CSS name for the same color) is written as Replace.
How is this different from Change SVG Stroke Color?: Stroke color cycles outlines through a built-in palette and leaves fills. This page is a targeted find/replace across fill, stroke, and gradient stops.
Does replace convert every color to hex?: No. Only paints that match Find change. Convert SVG Colors to Hex / Named Colors to Hex rewrite notation without picking a target color. Grayscale and Darken mix every paint.
Can I find a named color and replace with hex?: Yes. Find crimson matches #dc143c and crimson. Replace can be a hex, a name, or rgb() — parseable values are stored as hex so the file stays consistent.

Colors → hex → Named colors → hex → Colors → CSS variables → Colors → currentColor →

Privacy Terms

Source

Find Replace

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Replace SVG Color

Live preview