How to grayscale vs. single color: choosing the right svg conversion mode
- Step 1Identify your use case — Print (black and white): single color (pure black). Accessibility testing: grayscale (preserves relative luminosity). Design system icon unification: single color with your brand neutral.
- Step 2Preview both modes — The tool shows both conversion results side by side. For complex multi-element icons, grayscale often looks better because elements remain visually distinguishable.
- Step 3Consider the rendering context — Icons on dark backgrounds need a light monochrome color. Icons on light backgrounds need dark. Single color mode lets you choose; grayscale produces relative shades.
Frequently asked questions
What is the luminosity formula used for grayscale?+
The tool uses the ITU-R BT.709 luminance formula: Y = 0.2126R + 0.7152G + 0.0722B. This matches how human vision perceives colour brightness and produces perceptually accurate grayscale.
Why does pure blue (#0000ff) appear very dark in grayscale?+
The luminance formula weights blue very low (0.072) because human vision is least sensitive to blue. #0000ff has luminance of only 7.2% — nearly black in grayscale — which correctly reflects its low perceived brightness.
For a single-color icon set, should I use black or a neutral grey?+
Use a mid-dark neutral (e.g., #374151 or #1f2937) rather than pure black. Pure black icons feel heavy in most UIs; a dark neutral grey appears more refined at small sizes.
Can I convert a logo to single color without losing brand identity?+
Yes — single color mode is how most brand identity guides specify a monochrome logo variant. Choose your official monochrome brand color (usually black or white) as the target.
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.