See every color an SVG uses, swap each one for a new hex value or currentColor, and download a file that is still a vector. It runs in your browser, so the file never leaves your device.
These tools are built by Webteqno, a web design and SEO studio with 9+ years and 200+ websites behind it. We help US small businesses look credible and get found on Google and in AI search.
Serving small businesses, service firms and SBA-certified federal contractors across the US.
Recoloring a PNG repaints pixels. In an SVG, colors are text values in the markup, so this editor rewrites only the values you change and leaves every path in place.
fill="#E94E1B", stroke="navy".style="fill:rgb(233,78,27)".Have a PNG or JPG instead? Recolor the raster version with the Color Changer.
With currentColor, inlined SVG takes the text color of its container: set color on the header and the logo follows, including a light color under prefers-color-scheme: dark. Read why currentColor suits website logos, and where you cannot inline code, see serving a light version in dark mode. A multi-color mark becomes one color, so keep the full-color file.
Type #FFFFFF in that color's row, or use Apply to all colors for a one-color version. Shapes with no fill sit under #000000 as default fill and change too. Check the dark tile, since white artwork vanishes on the light one.
currentColor reads the CSS color of the element around the SVG, which works only for SVG code inlined in the HTML. In an img tag or CSS background the file is a separate document, so currentColor falls back to black. Use fixed colors there, or swap two files with a picture element and prefers-color-scheme.
Embedded PNG or JPG pixels and filters that compute color from numbers, such as Figma shadows, are not listed. Colors that build a mask or clip path, including the gradients and style rules a mask uses, are skipped because there they set transparency. The notes under the preview say which of these your file contains.
Yes. The file is parsed as data in a detached document and previewed only as an image, so its scripts never run on this page. The download also drops script elements, foreignObject blocks, on-event handlers, javascript: and data: links, and CSS @import rules.
Updating the logo file is the easy part. Webteqno redesigns small business websites so colors, layout, mobile pages and SEO foundations line up, starting with an audit and a redesign plan.
See website redesign servicesMost colors in an SVG come from six properties. Each has a default for when the file does not set it, which is why an unstyled path renders black. A background-color in a style is listed too.
| Property | Used by | Default when missing | What this editor does |
|---|---|---|---|
| fill | Shapes and text | Black (#000000) | Lists every value; default-black shapes change through one fill on the root <svg> |
| stroke | Outlines and icon lines | None (no outline) | Lists and rewrites every value |
| stop-color | Gradient stops | Black (#000000) | Lists every stop; unset stops get a color when you change #000000 |
| flood-color | feFlood and feDropShadow filters | Black (#000000) | Lists and rewrites values the file sets |
| lighting-color | feDiffuseLighting and feSpecularLighting | White (#FFFFFF) | Lists and rewrites values the file sets |
| color | Any element; read by currentColor | Inherited from the page; black in a standalone file | Lists and rewrites values the file sets |
Hex with 3, 4, 6 or 8 digits, rgb() and hsl() in comma or space syntax (alpha included), all 148 CSS named colors, CSS custom properties and currentColor. Rows group by the resulting color, so red, #F00 and rgb(255 0 0) share one. New colors are lowercase hex, or rgba() for a translucent rgb() or hsl() original.
Anything before the opening <svg> tag (XML declaration, DOCTYPE, comments) is dropped.