How to convert multi-color svgs to single color or grayscale instantly
- Step 1Upload your multi-colour SVG — Drop one
.svgonto the tool. The browser reads it locally; the free tier accepts files up to 5 MB and Pro up to 50 MB. - Step 2Pick the mode — Use the Mode dropdown: Single color (one flat colour for everything) or Grayscale (per-colour luminance). These are the only two modes — there is no duotone, threshold, or invert option here.
- Step 3Choose the target colour (single mode only) — When Mode is Single color, a native colour picker appears. Pick any opaque hex —
#000000for black print,#fffffffor dark UIs, or a brand neutral like#374151. The picker has no alpha channel, so the colour is always fully opaque. In Grayscale mode the colour picker is hidden because the grey is computed per element. - Step 4Confirm what will and won't change — Only
fill,stroke, andstop-colorwritten as XML attributes are rewritten. Colours insidestyle="…", a<style>block, or filter primitives are not — if your SVG uses those, convert them to attributes first (or use the sibling recolour tools below). - Step 5Compare the before/after preview — Check the preview. In grayscale, verify that previously distinct colours are still visually separable; if two are too close, single mode plus a manual second colour may read better.
- Step 6Download the result — Download
<name>-monochrome.svg. The path geometry, IDs,viewBox, and structure are untouched — only the three colour attributes change.
The two modes, exactly
These are the only options the tool exposes (monochromeMode + monochromeColor). There are no presets, no duotone, no invert.
| Option | Type / values | Default | What it does |
|---|---|---|---|
monochromeMode | enum: single, grayscale | single | single repaints every fill/stroke/stop-color to monochromeColor. grayscale replaces each colour with its luminance grey |
monochromeColor | colour (opaque hex) | #000000 | The flat target colour in single mode only. Ignored in grayscale mode (the picker is hidden in the UI) |
What each input colour becomes
Behaviour is identical in the browser and via the runner — both use the same engine. Grayscale only resolves hex and a short named-colour list (see edge cases); anything else is left as-is.
| Input attribute value | Single mode (target `#000000`) | Grayscale mode |
|---|---|---|
fill="#e11d48" (red) | #000000 | #3a3a3a (luminance grey) |
fill="#2563eb" (blue) | #000000 | a darker grey (blue is weighted only 0.114) |
fill="red" (named) | #000000 | converted — red is in the resolvable list |
fill="tomato" (named) | #000000 | unchanged — not in the resolvable list |
fill="rgb(255,0,0)" | #000000 | unchanged — rgb() is not parsed |
fill="none" | none (preserved) | none (preserved) |
fill="transparent" | transparent (preserved) | transparent (preserved) |
fill="url(#grad)" | url(#grad) (preserved) | url(#grad) (preserved) |
File-size limits by tier
SVG-family limits from the platform tier table. Monochrome requires the Pro tier or higher.
| Tier | Max SVG file | Batch files / run |
|---|---|---|
| Free | 5 MB | 1 |
| Pro | 50 MB | 20 |
| Pro + Media | 200 MB | 100 |
| Developer | 2 GB | unlimited |
Cookbook
Real before/after snippets. Each shows the exact attribute rewrite the tool performs.
Single-colour black for print
A two-colour icon repainted to flat black. Every fill/stroke attribute becomes the target; geometry is untouched.
Input: <svg viewBox="0 0 24 24"> <path fill="#e11d48" d="..."/> <path fill="#2563eb" d="..."/> </svg> Mode: single, color: #000000 Output (icon-monochrome.svg): <svg viewBox="0 0 24 24"> <path fill="#000000" d="..."/> <path fill="#000000" d="..."/> </svg>
Grayscale keeps shapes distinguishable
The same icon in grayscale — red and blue become different greys because luminance differs, so the two paths stay readable.
Input: fill="#e11d48" (red) fill="#2563eb" (blue) Mode: grayscale L(red) = round(0.299*225 + 0.587*29 + 0.114*72) = 93 (0x5d) L(blue) = round(0.299*37 + 0.587*99 + 0.114*235) = 96 (0x60) Output: fill="#5d5d5d" fill="#606060" (two distinct greys — single mode would have made both identical)
Gradient stops convert in place
A linear gradient stays a gradient — only the stop colours change, so the smooth transition survives in grey.
Input: <linearGradient id="g"> <stop offset="0" stop-color="#ff0000"/> <stop offset="1" stop-color="#0000ff"/> </linearGradient> <rect fill="url(#g)" .../> Mode: grayscale Output: <stop offset="0" stop-color="#4c4c4c"/> <stop offset="1" stop-color="#1d1d1d"/> <rect fill="url(#g)" .../> ← url() reference preserved
Off-white set for a dark UI
Single mode with a near-white target produces an icon that reads on dark backgrounds without going pure white.
Mode: single, color: #f9fafb Input: fill="#1f2937" stroke="#374151" Output: fill="#f9fafb" stroke="#f9fafb"
What it will NOT change
Colours written as inline CSS or in a style block are not attributes, so the tool leaves them. Convert them to attributes first if you need them monochromed.
Input:
<style>.a{fill:#ff0000}</style>
<path class="a" d="..."/>
<path style="fill:#00ff00" d="..."/>
<path fill="#0000ff" d="..."/>
Mode: single, color: #000000
Output:
<style>.a{fill:#ff0000}</style> ← UNCHANGED
<path style="fill:#00ff00"/> ← UNCHANGED
<path fill="#000000"/> ← only the attribute changedEdge cases and what actually happens
Colour lives in style="…" or a <style> block
By designThe converter rewrites only the fill, stroke, and stop-color XML attributes. A colour in style="fill:#f00" or in a <style>{...}</style> block is CSS, not an attribute, and is left exactly as written. If your export uses CSS colours (common from Figma/Illustrator 'Presentation Attributes: off'), re-export with presentation attributes, or flatten styles first. The CSS variable injector and hex swapper target different parts of the markup.
rgb() / rgba() / hsl() colour in grayscale mode
Preserved (unchanged)Grayscale conversion first parses the colour to a hex; it only understands #rgb/#rrggbb and a short named list. rgb(255,0,0), rgba(...), and hsl(...) are not parsed, so they return unresolved and the value is left unchanged. Single mode is unaffected — it overwrites the value regardless of format. For reliable grayscale, normalise to hex first (the minifier or hex swapper can help).
CSS named colour outside the supported set
Preserved (unchanged)Grayscale resolves only these names: black, white, red, green, blue, yellow, orange, purple, pink, gray, grey. A value like tomato, navy, crimson, or lightblue is not in that list, so in grayscale mode it stays as-is. Single mode replaces any named colour with the target regardless.
currentColor in a fill/stroke attribute
Mode-dependentIn single mode, fill="currentColor" is replaced with the target colour (the only skipped values are none, transparent, and url(...)), which breaks the inheritance you may have wanted. In grayscale mode, currentColor can't be parsed to a hex, so it is left intact. If you rely on currentColor theming, prefer the CSS variable injector or SVG to Tailwind instead of single mode.
Filter colours (flood-color, lighting-color)
Preserved (unchanged)Colours inside <feFlood flood-color>, <feDropShadow flood-color>, or lighting-color are not among the three attributes the tool rewrites, so filter-produced colour effects survive untouched. If a drop-shadow or glow still shows colour after conversion, that colour is coming from a filter — edit it manually or via the filter injector.
Embedded raster image inside the SVG
Preserved (unchanged)A base64 PNG/JPEG in an <image> element is opaque pixel data, not a vector colour attribute. The converter cannot recolour it — vector shapes go monochrome but the embedded bitmap stays full colour. Rasterise/convert the bitmap separately before embedding.
fill="none" and transparent fills
Preserved (unchanged)none and transparent are explicitly skipped, so an unfilled outline-only icon keeps its empty fills and does not suddenly gain a solid colour. This is intentional — converting none to black would fill shapes you meant to leave hollow.
Pure blue looks almost black in grayscale
ExpectedThe luminance formula weights blue at only 0.114, so #0000ff maps to roughly #1d1d1d — nearly black. That correctly reflects how dim pure blue appears to the eye, but it can make blue elements vanish against a dark background. If a blue element must stay visible, use single mode and pick a lighter target.
Element has no colour attribute (inherits default black)
Preserved (unchanged)SVG's default fill is black when no fill attribute is present. The converter only edits attributes that exist, so an element relying on the default is not given an explicit attribute. In practice it already renders black, so single-to-black and grayscale both look correct; add an explicit fill if you need a non-black target on such elements.
File exceeds your tier's size limit
RejectedFree tier rejects SVGs over 5 MB; Pro over 50 MB. Monochrome itself requires Pro or higher. Most icons and illustrations are kilobytes, so this only bites on huge auto-traced or data-URI-laden files — run the pro minifier first to shrink them.
Frequently asked questions
What is the difference between single colour and grayscale mode?
Single colour replaces every fill, stroke, and stop-color attribute with one colour you pick — so the whole graphic becomes that single hue. Grayscale instead converts each colour to its luminance grey, so shapes that were different colours remain different shades of grey and stay visually distinguishable.
Which grayscale formula does it use?
The BT.601 / NTSC luma formula: Y = 0.299R + 0.587G + 0.114B, rounded to an integer grey level. (Note: an older version of this page mentioned BT.709 — the implementation uses the 0.299/0.587/0.114 weights.) That weighting tracks perceived brightness, which is why pure blue ends up very dark.
Does it preserve gradients?
Yes. Each gradient <stop> has a stop-color attribute, which is one of the three attributes the tool rewrites, so stops convert in place. The gradient element and the url(#id) reference that points to it are preserved, so linear and radial gradients still render — smoothly, in grey or your single colour.
Will it change colours written in a <style> block or style attribute?
No. The converter only rewrites the fill, stroke, and stop-color XML attributes. Colours in style="fill:…" or inside a <style> block are CSS and are left untouched. Re-export your SVG with presentation attributes, or handle CSS colours with the CSS variable injector or hex swapper.
Why didn't my rgb() colour change in grayscale?
Grayscale first parses the colour to hex, and it only understands hex values and a short list of named colours. rgb(), rgba(), and hsl() aren't parsed, so they're left unchanged. Single mode overwrites them regardless. Convert to hex first if you need grayscale on rgb/hsl colours.
What happens to fill="none" and transparent?
Both are explicitly skipped and preserved. none means 'no fill' and transparent is a fully transparent paint — converting either to a solid colour would fill shapes you meant to keep hollow, so the tool leaves them alone in both modes.
Can I pick a colour with transparency?
No. The colour control is a native colour picker, which is RGB-only with no alpha channel, and the target is always fully opaque. If you need semi-transparent fills, set fill-opacity separately in your editor after conversion.
Does it touch currentColor?
It depends on the mode. In single mode, fill="currentColor" is replaced with your chosen colour (only none, transparent, and url(...) are skipped). In grayscale mode, currentColor can't be parsed to hex so it survives. If you depend on currentColor theming, use the CSS variable injector or SVG to Tailwind instead.
Can it recolour embedded PNGs inside the SVG?
No. An embedded raster (<image> with a base64 PNG/JPEG) is pixel data, not a vector attribute, so it stays full colour while the surrounding vector shapes go monochrome. Convert the bitmap separately if it must match.
Is my file uploaded?
No. The conversion is a pure text transform that runs entirely in your browser — the SVG markup never leaves your machine. The optional dashboard counter records only that a file was processed, never its contents.
What tier do I need?
Pro or higher. Single-file conversion in the browser plus batching up to 20 files per run on Pro (100 on Pro + Media). Free-tier users can't run this tool; the file-size cap is 5 MB on Free and 50 MB on Pro.
How do I automate this without uploading?
Fetch the schema from GET /api/v1/tools/svg-monochrome-converter, then POST { monochromeMode, monochromeColor } plus the file to your paired @jadapps/runner at http://127.0.0.1:9789/v1/tools/svg-monochrome-converter/run. Because monochrome is a pure-text tool, the runner executes it in-process — no headless browser and no file leaving your network.
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.