PNG Grayscale Converter
Convert a colour PNG to grayscale (black and white) in your browser. Pick between luminance-weighted (most natural), simple average, or lightness methods. Transparency is preserved.
What "grayscale" actually means
A grayscale image has only one piece of brightness information per pixel — there are no colours, just shades of gray running from black (0) to white (255). To convert a colour image to grayscale, the tool has to collapse the three channels (red, green, blue) of every pixel into a single brightness value. There are several mathematically reasonable ways to do that, and each one produces a slightly different result. This page gives you the choice.
For everyday "convert this photo to black and white" use, luminance is the right answer almost every time. The other methods are useful for specialised cases like printing, scientific work or stylised effects.
The four grayscale methods, explained
Luminance (recommended)
Weighted formula: gray = 0.2126 × R + 0.7152 × G + 0.0722 × B (the Rec. 709 weights used by HDTV and the web). It mimics how the human eye perceives brightness — we're most sensitive to green light, less to red, and least to blue. The result looks the most natural and is what every modern image editor (Photoshop, GIMP, Lightroom) uses by default for desaturation.
Average
Simple formula: gray = (R + G + B) / 3. Treats all three channels equally. Often makes red areas look unnaturally dark and blue areas unnaturally bright, but it's the easiest to explain and is what some older tools and tutorials default to. Use it when you want a quick, slightly punchier-looking result.
Lightness
Formula: gray = (max(R,G,B) + min(R,G,B)) / 2. Takes the midpoint of the brightest and dimmest channels in each pixel. Produces a less contrasty image than luminance — colours of similar brightness collapse to similar grays even when they look very different in colour. Useful for technical/scientific work where preserving relative lightness matters.
Single channel
Uses only the red, green, or blue channel as the brightness value. This isn't really grayscale in the traditional sense — it's "show me what this channel looks like on its own." Photographers sometimes pull the red channel for landscape photos (rich skies and dark foliage) or the green channel for portraits (smooth skin tones). It's a creative tool more than a faithful conversion.
Real-world comparison
For a photo of a red apple on a green leaf:
- Luminance — apple is medium-dark gray, leaf is medium gray. Reads naturally.
- Average — apple is dark gray, leaf is medium gray. Slightly more dramatic.
- Lightness — both are similar mid-grays. Lower contrast.
- Red channel — apple is bright (lots of red), leaf is dark (little red). High contrast in favour of the apple.
- Green channel — apple is dark, leaf is bright. Reverse contrast.
The strength slider
At 100% strength, the image is fully grayscale. At 0%, the original colour is preserved. Values in between produce a desaturated colour image — useful for muted, washed-out aesthetics often seen in editorial photography or moody UI designs. Try 60–70% for a "Instagram-faded" look.
When to use grayscale
- Black-and-white photography projects — for printing or portfolio work where colour distracts.
- Document scans — text documents almost always look cleaner in grayscale than full colour. File size drops too.
- Accessibility testing — if your UI relies only on colour to convey information, grayscale reveals problems for colour-blind users immediately.
- Print pre-press for grayscale-only output — newspapers, internal memos, fax-style documents.
- Disabled / inactive states in UI mock-ups — desaturating a graphic is a classic way to indicate "this control is disabled".
- Stylised photography effects — film noir, vintage portraits, moody product shots.
Tips and best practice
- For photographs, default to Luminance. Switch to Red channel for skies and landscapes; switch to Green channel for skin tones.
- Black-and-white printing is more forgiving of small grayscale errors than colour printing. Even Average gives acceptable results for most office documents.
- Apply grayscale before resizing, not after — the maths is the same but mistakes are easier to spot in the original resolution.
- If you plan to add a colour tint after grayscale (sepia, blue duotone), use this tool first then apply the tint as a layer in your editor — or use the PNG Sepia tool directly.
FAQs
Will transparency be preserved?
Yes. Only the colour channels change — the alpha channel is untouched.
Does file size go down?
Sometimes, slightly. PNG stores grayscale as a single channel internally for some images, which can save 10–30%. Many grayscale PNGs are written back as RGB-with-equal-values though, which gives no saving.
What's the best method for general photos?
Luminance. It matches human vision and is what professional editors default to.
Why does my black-and-white look different to Photoshop's?
Photoshop uses luminance by default, so it should match closely. Differences are usually due to colour-profile interpretation or post-processing (curves, exposure adjustments) that this tool doesn't apply.
Is anything uploaded?
No. Processing happens in your browser using getImageData on a canvas.
Can I batch-convert many PNGs?
Not yet — one at a time.