SVG Color Editor
Find and replace colors across any SVG illustration, logo, or icon. Update fills, strokes, gradient stops, and CSS styles with automatic transparency preservation and live preview.
Import SVG
Upload an SVG or edit markup below
Drop your SVG here, or browse
Supports .svg files up to 2MB
Detected Palette
No colors detected
Vector Preview
No SVG loaded
How to Change Colors in an SVG File
Rebrand any vector icon or illustration in three simple steps.
Select or Paste Your SVG
Drop an SVG file into the workspace or paste raw SVG code. Every detected fill, stroke, and gradient stop is grouped automatically.
Pick Replacement Colors
Click any color swatch to choose a new shade or enter a HEX value, or use Apply to All to make the entire icon monochrome.
Compare & Download SVG
Preview your recolored vector on checkerboard, light, or dark backgrounds, then download the `.svg` file or copy the code.
Key features
Rebrand vector assets without opening desktop design software.
Fills, Strokes & Gradients
Finds and groups colors across attributes, inline styles, embedded style blocks, and linear or radial gradient stops.
Automatic Opacity Preservation
Replaces colors while preserving original alpha transparency so layered shadows and highlights remain intact.
Browser-Local Processing
Your files are processed directly in your browser and are not uploaded to Pinatool's servers.
Frequently Asked Questions
Common questions about recoloring SVG files, gradients, and client-side privacy.
How does the SVG Color Editor detect colors in an SVG?
The editor thoroughly inspects all presentation attributes (fill, stroke, stop-color, flood-color, lighting-color), inline style strings, and embedded <style> stylesheets. It maps equivalent values (e.g. #14b8a6, rgb(20, 184, 166), and hsl) into unified color entries with accurate usage counts.
What happens to alpha opacity and semi-transparent layers?
Alpha transparency is preserved automatically. When you replace a semi-transparent color (e.g. 50% opacity), the new replacement hue is applied while maintaining the exact original alpha channel so layered depths and subtle shadows stay balanced.
Can I recolor gradient stops?
Yes. Linear and radial gradient <stop> elements with stop-color attributes or CSS styles are automatically detected and populated in your editable palette alongside standard fills and strokes.
Are my proprietary vector files uploaded to any server?
Never. The entire workflow—parsing, color replacement, sanitization, live rendering, and export—runs 100% locally in your web browser. No vector markup or files are transmitted over the network.
How are malicious tags and scripts handled?
Before editing and export, all vector markup is sanitized to strip out unsafe elements such as <script>, <foreignObject>, <iframe>, external network references, and inline event handlers, keeping your exported SVG clean and secure.
Explore More Tools
More free utilities for SVG conversion, favicons, and vector shapes.