How to grayscale vs. single color: choosing the right svg conversion mode
- Step 1State your goal in one sentence — 'One flat colour' → single. 'Keep shapes telling apart' → grayscale. 'Match a colour-blind view' → grayscale. 'Brand monochrome lockup' → single with the brand colour.
- Step 2Check your colour formats — Open the SVG and look at how colours are written. If they're hex or one of the eleven supported names, grayscale will act on them. If they're
rgb()/hsl()or names likenavy, grayscale will pass them through unchanged — normalise to hex first or use single mode. - Step 3Run single mode for a quick flat result — Pick Single color, choose your hex. Everything paints that colour in one pass. Best for print black, dark-UI off-white, and brand monochrome marks.
- Step 4Run grayscale for a perceptual result — Pick Grayscale (the colour picker disappears — greys are computed). Each fill/stroke/stop becomes a luminance grey. Best when overlapping shapes must stay separable.
- Step 5Compare contrast between elements — In grayscale, two source colours with similar luminance collapse to near-identical greys. If a logo's two colours both sit mid-luminance, grayscale flattens them — single with a deliberate two-step would need manual work, so reconsider the source.
- Step 6Pick the target tone for the background — On light backgrounds use a dark single colour or accept dark greys. On dark backgrounds use a light single colour — grayscale's blues will go nearly black and disappear, which single mode avoids.
Single vs. grayscale at a glance
The two modes the tool offers, compared on the axes that decide which to use.
| Axis | Single colour | Grayscale |
|---|---|---|
| Result | Every shape one chosen hex | Each shape its luminance grey |
| Shapes stay distinguishable? | No — all identical | Yes — different brightness → different grey |
| You choose the colour? | Yes (any opaque hex) | No — greys are computed |
| Colour formats it acts on | Any value (overwrites blindly) | Hex + 11 named colours only |
| currentColor | Replaced with target | Left unchanged (can't parse) |
| Best for | Print black, dark-UI white, brand mono | Accessibility check, retaining detail |
Luminance weights and what they imply
Grayscale uses BT.601 weights. The point: equal-saturation colours do NOT become equal greys.
| Channel | Weight | Pure-channel grey | Implication |
|---|---|---|---|
| Red | 0.299 | #4c4c4c | Pure red → mid-dark grey |
| Green | 0.587 | #969696 | Green carries most perceived brightness → lightest |
| Blue | 0.114 | #1d1d1d | Pure blue → nearly black; can disappear on dark bg |
Pick a mode by use case
Common jobs and the mode that fits — plus the target colour if single.
| Use case | Mode | Suggested target |
|---|---|---|
| Black-and-white print | single | #000000 |
| Icon set for dark UI | single | #f9fafb or #e5e7eb |
| Brand monochrome logo | single | official mono brand colour |
| Colour-blind / contrast check | grayscale | n/a |
| Keep a multi-part diagram readable in one colour | grayscale | n/a |
| Unify a library to one neutral | single | #374151 or #1f2937 |
Cookbook
Side-by-side outcomes that make the single-vs-grayscale choice concrete.
Two colours: single flattens, grayscale separates
The same input under both modes. Single makes both paths identical; grayscale keeps them apart.
Input: fill="#e11d48" (red) fill="#16a34a" (green) Single (#000000): #000000 / #000000 ← indistinguishable Grayscale: #5d5d5d / #6f6f6f ← clearly two tones
When single is the right call
A brand wordmark that's meant to be one solid colour. Grayscale would needlessly introduce tonal variation.
Goal: one-colour brand lockup in #111827 Mode: single, color: #111827 fill="#1d4ed8" → #111827 fill="#f59e0b" → #111827 stroke="#1d4ed8"→ #111827 (uniform, on-brand)
The 'grayscale did nothing' trap
rgb()/hsl() colours aren't parsed by grayscale, so they pass through. Normalise to hex (or use single) to fix it.
Input: fill="rgb(225,29,72)" fill="hsl(142 71% 45%)" Grayscale output: UNCHANGED (both pass through) Fix A: convert colours to hex, then grayscale Fix B: use single mode (overwrites regardless of format)
Dark-background visibility
On a dark UI, grayscale's blue collapses to near-black and vanishes; single with a light target stays visible.
Element: fill="#0000ff" on #0b0b0b background Grayscale: #1d1d1d → nearly invisible on dark bg Single (#e5e7eb): #e5e7eb → reads clearly
Accessibility spot check
Grayscale approximates a desaturated view, surfacing places where colour alone carried meaning.
Chart legend: red=loss, green=gain (colour-only meaning) Mode: grayscale Red→#5d5d5d, Green→#6f6f6f → distinguishable, but close. Takeaway: add labels/patterns; don't rely on hue alone.
Edge cases and what actually happens
Two source colours with equal luminance
ExpectedGrayscale maps by brightness, so two different hues that happen to share luminance (e.g. a mid red and a mid blue tuned to the same Y) collapse to the same grey. If your design used such a pair to distinguish elements, grayscale won't keep them apart — that's a property of luminance mapping, not a bug. Redesign the source or use labels/patterns.
Grayscale on rgb()/hsl() leaves colours intact
Preserved (unchanged)Grayscale needs to parse the colour to hex and only handles hex plus eleven named colours. rgb(), rgba(), and hsl() are passed through unchanged, which looks like 'nothing happened'. Single mode is immune because it overwrites without parsing. Normalise colours to hex first if you must grayscale rgb/hsl input.
Named colour not in the supported list
Preserved (unchanged)Only black, white, red, green, blue, yellow, orange, purple, pink, gray, grey are resolved for grayscale. tomato, navy, teal, coral, etc. pass through. Single mode overwrites any named colour. This asymmetry is the most common surprise when comparing the two modes.
currentColor behaves differently per mode
Mode-dependentSingle mode replaces currentColor with the chosen colour (breaking inheritance); grayscale leaves it because it can't parse it to hex. If you want themeable monochrome that follows the CSS color property, neither mode is ideal — use the CSS variable injector or SVG to Tailwind.
Single mode flattens a deliberately two-tone mark
ExpectedSingle makes everything one colour by definition. If you wanted to keep a logo's two-tone relationship while removing hue, that's grayscale's job, not single's. There is no duotone mode here — for arbitrary colour-to-colour remaps use the hex swapper.
Colours defined in CSS rather than attributes
By designNeither mode touches style="…" or <style> colours — both operate only on the fill/stroke/stop-color attributes. So the single-vs-grayscale choice is moot for CSS-defined colours; convert them to attributes first.
Blue-heavy artwork in grayscale on dark UI
ExpectedBecause blue is weighted 0.114, blue-dominant graphics become very dark in grayscale and may vanish on dark backgrounds. For dark UIs, single mode with a light target is the safer choice than grayscale.
Gradient direction reversal in tone
ExpectedA gradient from a light-but-blue colour to a dark-but-green colour can invert its perceived light→dark direction once grayscaled, because luminance ranks colours differently than hue does. Preview gradient-heavy art after grayscale; single mode makes the whole gradient one colour (effectively flat).
Frequently asked questions
What luminosity formula does grayscale use?
It uses the BT.601 luma weights: Y = 0.299R + 0.587G + 0.114B, rounded to an integer grey. That matches perceived brightness, so green contributes most and blue least.
Why does pure blue (#0000ff) look almost black in grayscale?
Blue is weighted only 0.114 in the formula, so #0000ff has a luminance near 0x1d — almost black. Human vision is least sensitive to blue brightness, which the weights reflect. On dark backgrounds this can make blue elements disappear; use single mode with a light target instead.
For a single-colour icon set, should I use black or a neutral grey?
A mid-dark neutral like #374151 or #1f2937 usually reads better than pure black at small sizes, which can feel heavy. Pick the target in single mode's colour picker.
Which mode keeps my multi-part graphic readable?
Grayscale, as long as the parts had different luminance. It assigns each colour its own grey, so distinct elements stay distinct. Single mode would merge them into one flat colour.
Why did grayscale leave some colours untouched?
Those colours weren't in a format grayscale can parse — it handles hex and eleven named colours only. rgb(), rgba(), hsl(), and unsupported names pass through unchanged. Convert them to hex first, or use single mode which overwrites any format.
Can I get a two-colour (duotone) result?
Not from this tool — it only does one flat colour (single) or per-colour greys (grayscale). For arbitrary colour-to-colour mappings, use the hex swapper, which takes a list of from/to colour pairs.
Does single mode change colours in style attributes?
No. Like grayscale, single mode only rewrites the fill, stroke, and stop-color attributes. Colours in style="…" or a <style> block are untouched in both modes.
Will single mode break my currentColor theming?
Yes, if you use it — single mode replaces currentColor with the chosen colour. Grayscale leaves it intact. For themeable monochrome, use the CSS variable injector or SVG to Tailwind instead of single mode.
Is grayscale the same as desaturating in a design tool?
It's the luminance method of desaturation (BT.601), which most tools also offer. Some tools default to other formulas (BT.709, or average), so greys may differ slightly between apps, but the principle — map colour to perceived brightness — is the same.
Which mode is correct for accessibility testing?
Grayscale. Viewing the graphic with hue removed surfaces places where colour alone conveyed meaning. If two states become hard to tell apart in grayscale, add labels or patterns rather than relying on colour.
Can I convert a logo to single colour without losing brand identity?
Yes — single mode with your official monochrome brand colour is exactly how brand guides specify a one-colour lockup. Most guides nominate black, white, or a single neutral for this.
What tier and where does it run?
Pro tier or higher, and it runs entirely in your browser as a text transform. To automate, hit the runner endpoint http://127.0.0.1:9789/v1/tools/svg-monochrome-converter/run — monochrome runs in-process on the runner with no headless browser.
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.