SVG Color Extractor & Palette Editor

What gets extracted

The color extractor walks every element in your SVG and collects unique color values from fill and stroke attributes, gradientstop-color definitions, and inline style declarations. Hex codes, named colors, rgb(), and hsl() notations are all normalized to a consistent form so two visually identical colors written differently (e.g. #fff and #FFFFFF) appear as one entry rather than two.

Transparent colors and currentColorare deliberately preserved — they often carry intent (theming, inheritance) and changing them silently would break the icon's integration with surrounding CSS.

A typical workflow

1. Drop the SVG. Single file or a folder — for batches the palette is computed across the entire set, which is useful for auditing consistency in an icon library.
2. Review the palette.Each unique color appears as a swatch with a count of how many times it's used. Click a swatch to recolor every occurrence at once.
3. Decide on theming.Toggle "Use CSS variables" if you want hex values replaced with var(--color-1),var(--color-2)… on export. The mapping is stable and is shown next to the palette so you can paste matching CSS.
4. Export. Download the recolored or variable-ized SVG, copy it to clipboard, or push it through one of the framework converters (React/Vue/Svelte) for a typed component.

Common scenarios

Rebrand

A logo or icon set inherits an old brand color. Open the file, click the offending swatch, paste the new hex, export. No need to re-export from the design tool or hunt through the SVG XML by hand.

Dark mode

Convert the icon's palette to CSS variables, then provide a single set of values for :root and another for[data-theme="dark"]. The SVG itself does not need to be duplicated — the same file renders correctly in both modes.

Auditing an icon set

Drop a whole icons folder. The combined palette tells you whether the set is consistent. A surprise #1a1a1a sitting next to the canonical#000 usually means a designer eye-dropped a near-black color somewhere — fix it once and the audit goes back to clean.

Gradients and edge cases

Linear and radial gradient stops are extracted and editable just like fills/strokes. Gradients themselves (the stops, transforms, ids) remain intact; only the color values change. filter definitions andfeFlood elements that produce visual color through SVG filters are preserved as-is — they are out of scope for the extractor because their output color depends on context the editor cannot evaluate without rendering.

If an SVG was exported from a design tool with embedded raster images, colors inside those rasters cannot be extracted — the tool reports the SVG portion of the palette only.