SVG Monochrome Conversion: Behaviour, Limits, and Troubleshooting

Compute a grayscale value by hand

Trace the formula so you can predict any output grey.

fill="#e11d48"  → R=225 G=29 B=72
L = round(0.299*225 + 0.587*29 + 0.114*72)
  = round(67.275 + 17.023 + 8.208)
  = round(92.5) = 93 → 0x5d
Output: #5d5d5d

'It didn't all convert' — colour in CSS

The classic case. Attributes convert; CSS colours don't.

<style>.brand{fill:#1d4ed8}</style>
<circle class="brand" .../>      ← stays blue
<rect fill="#1d4ed8" .../>        ← converts

Fix: export/author colours as attributes, not CSS.

'Grayscale did nothing' — unparseable format

rgb()/hsl()/unknown names pass through grayscale untouched.

fill="rgb(29,78,216)"   → unchanged in grayscale
fill="navy"             → unchanged (navy not in list)
fill="#1d4ed8"          → converts to a grey

Fix: normalise to hex, or use single mode.

currentColor: single vs grayscale

The one value that behaves differently across modes.

fill="currentColor"

Single (#000000): → #000000   (overwritten)
Grayscale:        → currentColor (left intact)

Skipped values stay put

none/transparent/url() are preserved in both modes.

fill="none"        → none
fill="transparent" → transparent
fill="url(#grad)"  → url(#grad)
(only the gradient's own stop-color attrs convert)

The converter rewrites only the three colour attributes. A style="fill:#f00" or a CSS rule in <style> is not an attribute, so it is left unchanged. This is the #1 cause of 'only some of it converted'. Re-export with presentation attributes, or move colours into attributes first.

Grayscale resolves a colour to hex before computing the grey; it only understands hex and eleven named colours. rgb(), rgba(), and hsl() aren't parsed, so they're returned unchanged. Single mode overwrites them regardless. Normalise to hex for reliable grayscale.

Grayscale recognises only black, white, red, green, blue, yellow, orange, purple, pink, gray, grey. Anything else (navy, tomato, teal, coral…) passes through. Single mode replaces any named colour. If a CSS named colour must grayscale, convert it to hex first.

Single mode overwrites currentColor with the target (it's not in the skip set), which silently breaks inheritance. Grayscale leaves it because it isn't parseable to hex. For currentColor-based theming, use the CSS variable injector or SVG to Tailwind rather than this tool.

opacity, fill-opacity, and stroke-opacity are not colour attributes, so a 50% fill stays 50% after conversion. If transparency was affecting how a colour read, the converted grey reflects the colour at full opacity — the alpha is applied separately at render time and is untouched.

Colours inside filter primitives aren't among the three rewritten attributes, so a coloured glow or drop-shadow keeps its colour after conversion. Edit filters manually or via the filter injector if they must match.

A base64 PNG/JPEG in <image> is pixel data, not a vector attribute, and can't be recoloured — it stays full colour while vector shapes convert. Convert the bitmap outside this tool if needed.

fill="url(#grad)" is skipped (it points to a paint server, not a colour), but the gradient's own <stop stop-color> attributes are converted. So the gradient still renders, in grey or your single colour — the reference and structure are intact by design.

If an element has no fill attribute it inherits SVG's default (black). The converter only edits attributes that exist, so it adds none. The element already renders black, so single-black and grayscale look right; add an explicit attribute if you need a different target on it.

Free rejects SVGs over 5 MB; Pro over 50 MB; monochrome requires Pro or higher. This usually only triggers on embedded-raster or auto-traced files — run the minifier first.