How to find and replace all colors across an svg in one click
- Step 1Load one SVG — Drop a single
.svgfile on the upload area or paste the SVG source into the text box. The Hex Swapper processes one file per run — there is no ZIP or multi-file upload here (only the sprite builder takes multiple files). For a folder of icons, run them one at a time or script the runner. - Step 2Pick the colour to replace (from) — Use the left colour picker to set the source colour. The native picker emits a 6-digit hex (e.g.
#000000). If your SVG writes that colour as 3-digit hex (#000), don't worry — the tool expands short hex internally so it still matches. - Step 3Pick the replacement colour (to) — Use the right colour picker for the target colour. The
tovalue is written into the SVG verbatim, so the output uses exactly the hex you chose. - Step 4Add more pairs for a full palette swap — Click + Add another pair to map a second, third, or fourth colour in the same run. Each pair has its own Remove control. Pairs are applied top-to-bottom, so order matters if one pair's target equals another pair's source (see the chaining edge case).
- Step 5Process and check the preview — Click Process SVG. The result panel renders the recoloured SVG and shows a Colors swapped count — the total number of literal matches replaced across all pairs. A count of 0 means none of your
fromstrings were present as written. - Step 6Download or copy — Download the
-recolored.svgfile or copy the source to the clipboard. If the count looked wrong, open View SVG source to see how the colour is actually written in your file (e.g.rgb()instead of hex) and adjust your approach.
What a single swap touches
The swapper replaces the literal colour string wherever it occurs in the SVG text — it is not attribute-aware. These are the common places a hex value lives.
| Where the colour appears | Example in markup | Swapped? |
|---|---|---|
| Shape fill attribute | <path fill="#003082" …> | Yes — string match |
| Stroke attribute | <path stroke="#003082" …> | Yes — string match |
| Gradient stop | <stop stop-color="#003082"/> | Yes — string match |
| Filter flood colour | <feFlood flood-color="#003082"/> | Yes — string match |
| Inline style property | style="fill:#003082" | Yes — string match |
<style> block CSS | .cls{fill:#003082} | Yes — string match |
| rgb() / hsl() form of the same colour | fill="rgb(0,48,130)" | No — different string |
| ID or text that contains the hex string | id="path003082" | Yes — collateral match (rare) |
Tier and size limits
Per-job limits for the SVG tool family. The Hex Swapper requires Pro; free-tier visitors see an upgrade overlay.
| Tier | Max file / paste size | Files per run | Hex Swapper access |
|---|---|---|---|
| Free | 5 MB | 1 | Locked (upgrade prompt) |
| Pro | 50 MB | 1 | Yes |
| Developer | 2 GB | 1 | Yes |
Cookbook
Concrete before/after snippets. Colours are illustrative; behaviour is exactly what the swapper does on the SVG text.
Swap black artwork to brand indigo
The default pair (#000000 → #6366f1) is the most common single recolour: take a black icon and make it brand-coloured. Every #000000 (and #000, which is expanded first) becomes #6366f1.
Before: <svg viewBox="0 0 24 24"> <path fill="#000" d="M4 4h16v16H4z"/> <circle cx="12" cy="12" r="4" fill="#000000"/> </svg> Pair: #000000 -> #6366f1 After (Colors swapped: 2): <svg viewBox="0 0 24 24"> <path fill="#6366f1" d="M4 4h16v16H4z"/> <circle cx="12" cy="12" r="4" fill="#6366f1"/> </svg>
Recolour a two-stop gradient
Gradient stops are just stop-color strings in the text, so the swapper updates them like any other colour. Map both stops in a single run with two pairs.
Before: <linearGradient id="g"> <stop offset="0" stop-color="#ff5757"/> <stop offset="1" stop-color="#8c52ff"/> </linearGradient> Pairs: #ff5757 -> #1a56db #8c52ff -> #0ea5e9 After (Colors swapped: 2): <linearGradient id="g"> <stop offset="0" stop-color="#1a56db"/> <stop offset="1" stop-color="#0ea5e9"/> </linearGradient>
Shorthand hex still matches
You set the from colour with a 6-digit picker, but the file uses 3-digit hex. The tool expands short hex across the whole document first, so the match succeeds.
Before: <rect fill="#f00" width="10" height="10"/> Pair: #ff0000 -> #e3342f Internally the document becomes fill="#ff0000" first, then the pair matches. After (Colors swapped: 1): <rect fill="#ff0000" width="10" height="10"/> -> fill="#e3342f"
Inline style colours are swapped too
Colours inside a style attribute are part of the same text, so no special handling is needed — the literal #1f2937 is found wherever it sits.
Before: <path style="fill:#1f2937;stroke:#1f2937" d="…"/> Pair: #1f2937 -> #111827 After (Colors swapped: 2): <path style="fill:#111827;stroke:#111827" d="…"/>
When nothing changes — the rgb() trap
The swapper matches the literal from string. A hex from will not find an rgb() form of the same colour. The fix is to set from to the exact text used in the file.
File uses: <circle fill="rgb(0,48,130)" r="5"/> Pair: #003082 -> #1a56db -> Colors swapped: 0 (no match) Fix: open View SVG source, copy the literal string, and if you can edit the from value as text, set from: rgb(0,48,130) to: #1a56db (The browser colour picker only emits hex, so an rgb from value requires the pasted-source or runner path.)
Edge cases and what actually happens
Free tier opens the tool
LockedThe Hex Swapper is a Pro tool (minTier: pro). A free-tier visitor sees an upgrade overlay instead of the colour pickers. Upgrade to Pro to run it; the per-job size limit then rises from 5 MB to 50 MB.
from colour written as rgb() or hsl()
No matchThe swapper does not convert colour formats. A from of #003082 matches only the literal text #003082, not rgb(0,48,130) or hsl(220,100%,25%). The Colors-swapped count will be 0. Set the from value to the exact string in your file, or normalise the SVG's colours to hex first with another export.
Named colour like red or currentColor
Literal onlyA from of red matches the literal word red, not #ff0000. The keyword currentColor is also just a string — you can swap the literal currentColor for a hex if you type it as the source via pasted source, but the colour pickers only emit hex. There is no colour-name table behind matching.
Same colour written two ways in one file
PartialIf a file uses both #ff0000 and rgb(255,0,0) for the same red, a single hex pair only catches the hex instances. The rgb ones survive. Run a second pair targeting the rgb string, or normalise the SVG before swapping.
Chaining pairs (A→B then B→C)
By designPairs apply top-to-bottom. If pair 1 is #aaa → #bbb and pair 2 is #bbb → #ccc, every original #aaa first becomes #bbb, then pair 2 turns all #bbb (including the just-created ones) into #ccc. Order your pairs deliberately to avoid an unintended cascade.
Collateral match inside an id or text
PossibleBecause matching is text-based, a from like #fff could in theory hit a substring inside an id, a comment, or <text> content that contains that exact run of characters. This is rare for full 6-digit hex but worth a glance at the source if the swapped count is higher than the number of fills you expected.
Colour not present at all
No matchColors swapped: 0 simply means the from string never appeared in the document as written. Open View SVG source and confirm the exact spelling — the most common cause is the rgb()/hsl() trap or a typo in a pasted source value.
Need to recolour a whole folder
Single-fileThe web tool takes one SVG per run — there is no ZIP upload. To batch a directory, process files one at a time, or pair the @jadapps/runner and script the swap (see the API automation guide).
Want dynamic theming instead of baked colours
Wrong toolThe swapper hard-codes new hex values into the file. If you want colours that change at runtime (dark mode, user themes), use the CSS Variable Injector or the SVG-to-Tailwind bridge instead.
Frequently asked questions
Can I recolour multiple SVG files at once?
Not in this tool. The Hex Swapper takes a single SVG file (or pasted source) per run; there is no ZIP or multi-file upload here. For a batch, run files individually or automate the swap through the @jadapps/runner using the Color Swap API guide.
Does it really swap colours in inline styles and gradients?
Yes. The swapper replaces the literal colour string anywhere in the SVG text — that includes fill/stroke attributes, gradient stop-color, filter flood-color, inline style="fill:…", and CSS inside a <style> block. It is not attribute-aware; it is text-aware.
Will #fff and #ffffff both get swapped?
Yes. Before matching, the tool expands every 3-digit hex in the document to its 6-digit form, so #fff becomes #ffffff and both spellings of a colour are caught by one pair.
Is matching case-sensitive?
No. Matching is case-insensitive, so #FF0000, #ff0000, and #Ff0000 all match the same from value. The replacement is written using exactly the to hex you chose.
Can I enter an rgb() or HSL colour as the source?
The browser colour pickers only produce 6-digit hex, so in the web UI both source and target are hex. The underlying engine matches whatever literal string you give it, but it does not convert between hex, rgb(), hsl(), or names — so a hex from will never find an rgb form of the same colour.
Why did the tool report 0 colours swapped?
Your from string did not appear in the file as written. The usual cause is that the SVG stores the colour as rgb()/hsl()/a name rather than the hex you entered, or a typo. Open View SVG source to see the exact spelling and match it.
Does it change the SVG's geometry or structure?
No. Only the matched colour strings are rewritten. Paths, viewBox, IDs, transforms, and element order are untouched, so the output is the same drawing in new colours.
What does the Colors swapped number mean?
It is the total count of literal matches replaced across all your pairs. Two fills using the same colour count as two; a single colour appearing in five places counts as five.
Can I do a whole palette change in one run?
Yes. Click + Add another pair to map several source colours to several targets in the same pass. Pairs apply top-to-bottom, so be mindful when one pair's target equals another pair's source.
Is my SVG uploaded anywhere?
No. The swap runs entirely in your browser (or on your own machine via the runner). The result panel even shows a '0 bytes uploaded' badge. Nothing about the file leaves your device.
What's the largest SVG I can swap?
Pro caps each job at 50 MB; Developer at 2 GB. Free tier can't run the tool. These are SVG-family per-job limits enforced before processing.
I need themeable SVGs, not baked colours — what should I use?
Use the CSS Variable Injector to turn colours into var(--…) custom properties, or the SVG-to-Tailwind bridge to map colours to utility classes. The Hex Swapper writes fixed hex values, which is ideal for one-time recolours but not runtime theming.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.