How to use the SVG color extractor and editor
- Choose or drop an SVG file, or paste SVG code into the box.
- In the color list, press the color box on the right of a color and pick a new one. You can also change everything at once with invert, grayscale, one color or hue shift.
- Check the preview, then copy the code, save the SVG, or save a PNG at the width you want.
Where an SVG stores its colors
An SVG is a text file that describes a picture as points, lines and shapes, so colors are stored as text too. Typical places are the fill and stroke attributes on shapes, style attributes, and rules inside a style tag near the top of the file. This free tool scans all of these places to find colors and groups repeated colors into one row with a count.
When you change a color, only the text at the places where it was written is replaced and the rest of the code is untouched. So gradient stops and stroke colors change together while the shapes and positions stay as they were. For colors with transparency, only the RGB of the new color is used and the original transparency is kept.
Icon SVGs often state no color and are drawn in black, or use currentColor, which means the current text color. Such files may show an empty list, so there is an option to set a default fill on the root svg. It is the fastest way to change the color of a single-color icon.
Ideas and limits
When your brand color changes, you can recolor the logo SVG and save a new version without opening a design program. Copying the color list also leaves a record of which color was changed to which.
If a free downloaded icon does not match the mood of your site, unify it to one color. The all-to-one-color button turns an icon with many colors into a single-color icon. The grayscale button helps when making a print draft.
Invert is handy for quickly trying a logo for dark backgrounds. A plain inversion does not always look good, so switch the preview background to dark to check, and re-pick one or two colors if needed.
Hue shift is useful for making seasonal or event color versions of the same illustration. Lightness and saturation are kept, so contrast between shapes does not collapse. Move the slider and save at the position you like.
This tool changes only colors written as text inside the SVG. If a photo such as a PNG or JPG is embedded, its colors cannot be changed, and files that set colors with CSS variables are not recognized at the variable. Colors created by complex filter effects may not appear in the list.
When saving a PNG, you set the width and the height is calculated from the original ratio. Because it is vector artwork it stays sharp at large sizes, so make a generous size for print or high-resolution screens.
If several files must follow the same color rule, copy the color list from the first file and pick the same colors in the next one. The copy color list button is handy for recording which color was changed and how. It is free to use repeatedly and no file stays on a server, so feel free to experiment.
Tips for changing colors safely
- Keep the original SVG under another name first.
- In the color list, colors with high counts are usually the background or main body.
- After invert or hue shift, check on both dark and light backgrounds.
- If an icon is a single black color, the default fill option is the simplest.
- For an SVG from an unknown source, read the note about scripts.
FAQ
Is my SVG uploaded to a server?
No. The file is read and processed only in your browser and never sent anywhere. The preview is drawn only as an image, so scripts inside the SVG do not run.
Which colors does it find?
It finds color attributes such as fill, stroke and stop-color, and the same properties inside style attributes and style tags. #RGB, #RRGGBB, rgb() and color names such as red are all supported, and the same color written in different ways is grouped into one with a count.
No colors are listed.
Icon SVGs often do not state a color and are drawn in the default black. Turn on the default fill option and pick a color, and it is set on the root svg. Parts that use currentColor change to the same color.
What happens to colors with transparency?
For colors with transparency, such as rgba() or 8-digit hex, only the RGB of the new color is applied and the original transparency is kept. Gradient stop-color values change the same way.
How do hue shift and invert differ?
Hue shift keeps lightness and saturation and rotates only the hue, changing the overall mood at once. Invert flips each color to its opposite, which is handy for making a version for dark backgrounds. You can undo either with the Reset button.
Notes & limitations
An SVG is a text file, so a file from an unknown source may contain scripts. The preview in this tool does not run scripts, but check the source before opening an edited SVG elsewhere. Files are processed only in the browser and are not sent to a server.