Grayscale converter

Convert color images to black and white.

Select or drag & drop an image

You have a colour photo that needs to sit quietly next to text — a headshot for a CV, a product shot for a mono print layout, a screenshot for documentation. Stripping the colour out is a two-second job, but most people end up opening a full image editor to do it.

This converter does the same thing in the browser. Drop in an image, drag the intensity slider, and download the PNG.

How it works

How to use it

Click Choose image or drag a file onto the drop zone. Only image files are accepted — JPG, PNG, WebP and GIF all work. The preview appears immediately, along with an Intensity slider and a Download button.

What the intensity slider does

The tool does not simply throw the colour channels away. It calculates a luminance value for every pixel using the standard weighting for perceived brightness:

luma = 0.299 × R + 0.587 × G + 0.114 × B

Green is weighted most heavily because the human eye is most sensitive to it — this is why a naive average of the three channels usually looks flat and muddy by comparison.

Each channel is then blended toward that luma value by the amount you set:

Intensity	Result
100%	Fully grayscale
50%	Half-desaturated, colours still faintly visible
0%	Original image, unchanged

So the slider is really a desaturation control. Values between 60% and 85% are useful when you want a muted, tinted look rather than pure black and white.

Where the work happens

The conversion runs on an HTML canvas inside your own browser. The file is never sent to a server, which means it also works with the page loaded and the network disconnected. The download is always a PNG, so a JPG you drop in will come back out as a lossless PNG — usually a larger file than the original.

Note that PNG output does not carry over the EXIF metadata of the source file.

Terms explained

Grayscale: An image whose pixels carry only brightness information, with no colour. Every pixel has equal red, green and blue values.
Luminance (luma): A single number representing how bright a pixel looks to the eye. Calculated by weighting the red, green and blue channels differently.
Desaturation: Reducing the intensity of colour in an image. Full desaturation gives grayscale; partial desaturation leaves a faint tint.
Intensity: The slider on this tool. It sets how far each pixel is moved toward its grayscale value, from 0% (no change) to 100% (fully gray).
Canvas: The browser drawing surface used to read and rewrite the image pixel by pixel, entirely on your device.

Frequently asked questions

Is my image uploaded to a server?

No. The image is read by your browser and processed on a canvas element on your own device. Nothing leaves your computer, and no copy is stored anywhere.

Why is the downloaded file bigger than the one I put in?

The output is always a PNG, which is a lossless format. If you started from a JPG, the compression is gone, so the file grows even though the picture now holds less colour information. Re-save it as a JPG in any image app if size matters.

What is the difference between this and a CSS grayscale filter?

A CSS filter changes only how an image is displayed in a browser; the underlying file is untouched. This tool writes a genuinely converted image you can download and use anywhere.

Can I convert several images at once?

No, this tool handles one image at a time. Load the next file when the first download is finished.

Does it work on my phone?

Yes. Tap the button to pick an image from your camera roll. Very large photos take a moment to process, since every pixel is recalculated.