SVG Palette Extractor
Extract every color used in an SVG, or apply one of 10 curated preset palettes directly onto your artwork.
Extracted colors
Preset palettes
How it works
- 1
Paste or upload your SVG
Paste SVG code directly into the box, or click Upload SVG to load a file from your device.
- 2
Review the extracted palette
Every fill, stroke, and gradient stop color found in the SVG appears as a swatch below the preview.
- 3
Copy any color
Click a swatch to copy its hex code to your clipboard.
- 4
Browse preset palettes
Scroll down to see 10 curated palettes, each with 5 colors, for quick inspiration.
- 5
Apply a preset to your SVG
Click Apply to SVG on any preset to recolor your pasted artwork using that palette's colors.
About the SVG Palette Extractor
This tool scans every fill, stroke, and gradient stop color inside an SVG and pulls them into a clean, deduplicated palette you can copy as hex codes, ready to drop into a design system, a Tailwind config, or a style guide. It also includes 10 curated preset palettes you can browse for inspiration, or apply directly onto your pasted SVG with one click.
Where colors actually live inside an SVG
Color in SVG markup can appear in several places: as a fill or stroke attribute directly on an element, inside an inline style attribute, or as a stop-color inside a linearGradient or radialGradient definition. This tool checks all three locations, so a palette extracted from a gradient heavy logo is just as complete as one from a simple flat icon.
10 preset palettes to browse or apply
Below the extracted colors, this tool includes 10 preset palettes covering common styles, from muted Tailwind style neutrals to vibrant sunset tones to a strict monochrome set. Click any preset swatch to copy its hex code, or click Apply to SVG to recolor your pasted artwork directly, each distinct color currently in your SVG maps to a color in the chosen palette, and the code and preview update immediately.
What is intentionally excluded
Values like none and currentColor are filtered out automatically, since they are not actual colors, and gradient or pattern references written as url(#id) are excluded too, since the palette shows resolved colors rather than references. This keeps the extracted list to genuinely useful, reusable color values.
Runs entirely in your browser
Extraction and palette application both happen client side, nothing you paste or upload is sent to a server. Once you have a palette you like, our SVG Code Editor is a natural next step for any further manual adjustments, part of the same SVG & Design Tools collection.
Frequently asked questions
Does it work with gradients?
Yes, gradient stop colors are detected and included in the extracted palette alongside solid fills and strokes.
What happens when I click Apply to SVG on a preset?
Each distinct color currently in your SVG is mapped to a color from the chosen preset palette, and every matching fill, stroke, and stop-color in the markup is updated. The code and preview refresh immediately.
Will applying a preset change my SVG's shapes?
No, only color values are changed. The paths, shapes, and overall structure of the SVG stay exactly the same.
Why are some colors not detected?
Colors referenced indirectly, such as through a CSS class in an external stylesheet rather than an inline attribute or style, are not detected, since this tool reads the SVG markup itself rather than computed styles from a linked stylesheet.
Is currentColor extracted as a color?
No, currentColor is a reference to whatever color is inherited from the surrounding context, not an actual color value, so it is excluded from the extracted palette.
Can I use the preset palettes without uploading an SVG?
Yes, you can browse and copy hex codes from any preset palette at any time, applying them to your own SVG is optional.
Is my SVG uploaded to a server?
No, both extraction and palette application run entirely in your browser. Nothing you paste or upload is sent anywhere.