🌑 Grayscale Image Converter, Turn Photos Black and White Online
By Shihab Mia · Updated 2026-07-25
PNG, JPEG, WebP, GIF or BMP. Files stay on your device, nothing is uploaded.
0% keeps the original colours, 100% is fully black and white. Values in between fade the colour out.
Original
Grayscale result
Choose an image to begin. All processing happens locally in your browser.
This grayscale image converter turns a colour photo into black and white right in your browser. Upload a PNG, JPEG, WebP, GIF or BMP, and the tool reads every pixel and replaces its colour with a single shade of gray based on how bright that colour looks to the eye, using the perceptual luminosity method rather than a plain average. An intensity slider lets you go all the way to full grayscale or stop partway for a faded, partly desaturated look. Nothing is uploaded, the whole conversion runs on your device using the HTML canvas, and you can download the result with one click.
What is the Grayscale Image Converter?
Grayscale means an image where every pixel is a shade of gray, from black through to white, with no colour information. To convert a colour pixel to gray you collapse its three channels (red, green and blue) into one brightness value, called luminance or luma. The catch is that the eye does not see all colours as equally bright: green looks much brighter than blue at the same numeric value. A naive average of the three channels, (R + G + B) / 3, would make pure green and pure blue look the same shade of gray, which is wrong to the eye and produces a flatter, slightly darker result than a photo actually looks.
To fix that, this tool uses the standard Rec. 601 luma weights: luminance = 0.299 x R + 0.587 x G + 0.114 x B. Green carries the most weight because the eye is most sensitive to it, blue the least. These are the same weights used by classic broadcast television and most image editing software when you flatten a photo to grayscale. A newer standard, Rec. 709 (used for HDTV), shifts the weights slightly to 0.2126 x R + 0.7152 x G + 0.0722 x B; in practice the two formulas produce very similar results for everyday photos, and Rec. 601 remains the more common default in web and photo tools. The single luminance value is then written into all three channels, so the pixel becomes a neutral gray of the right brightness. The alpha (transparency) channel is left untouched, so transparent PNGs stay transparent.
The intensity slider blends between the original colour and the full grayscale value. At 100% you get a true black and white image. At 50% each pixel is halfway between its colour and its gray, a muted, partly desaturated look. At 0% the image is unchanged. This linear blend is the same idea as a saturation control: lowering it pulls colours toward their gray equivalent without changing how light or dark each pixel is. It is a different effect from simply lowering brightness or contrast, which change how light or dark pixels are without touching their colour at all.
Grayscale and black and white are often used interchangeably, but photographers and print professionals draw a distinction. Strictly, black and white can mean an image reduced to only two tones, pure black and pure white, with no gray in between (this is sometimes called a bitmap or threshold image). Grayscale, by contrast, keeps the full smooth range of tones from black through every shade of gray to white. What this tool produces, and what almost everyone means when they say "black and white photo," is grayscale: a full tonal range with the colour removed. Converting a colour photo to true two-tone black and white is a separate operation (thresholding), not desaturation.
Grayscale conversion is also central to print production. Commercial and home printers reproduce colour using CMYK ink (cyan, magenta, yellow and black), and a genuinely grayscale image can be sent to the printer using only the black (K) channel, which is cheaper and gives more predictable, consistent tones than mixing three colour inks to fake a neutral gray. This is why grayscale is the standard format for laser-printed documents, newsletters, faxes and any print job where colour ink would add cost without adding value. It is also a long-standing tool for photographers and designers: stripping colour from an image reveals its underlying tonal contrast and composition, since without hue to distract the eye, only light and dark values are left to judge whether a photo reads clearly.
When to use it
- Turning a colour photo into a clean black and white version for a print, poster or profile picture.
- Preparing images for a monochrome document, e-book or newspaper-style layout where colour is not wanted.
- Checking the tonal contrast of a design, since stripping colour reveals whether light and dark areas read clearly.
- Creating a faded, partly desaturated background image by setting the intensity slider somewhere between 0% and 100%.
- Cutting print costs by converting product or document images to grayscale before sending them to a black-ink printer.
- Giving a set of product or portfolio photos a consistent, timeless look by removing colour variation between shots.
How to use the Grayscale Image Converter
- Click Choose an image and pick a PNG, JPEG, WebP, GIF or BMP file from your device.
- Drag the intensity slider: 100% for full black and white, lower for a partial desaturation.
- Optionally pick an output format (PNG keeps transparency, JPEG and WebP let you set quality).
- Compare the original and grayscale previews side by side.
- Click Download image to save the converted file. All processing stays on your device.
Formula & method
Worked examples
Convert a single bright orange pixel (R 255, G 128, B 0) to full grayscale.
- Apply the luma weights: 0.299 x 255 = 76.245
- 0.587 x 128 = 75.136
- 0.114 x 0 = 0
- Add them: luminance = 76.245 + 75.136 + 0 = 151.381, round to 151
- At 100% intensity, write 151 into all three channels
Result: The orange pixel becomes gray (151, 151, 151), a mid tone.
Desaturate the same orange pixel (255, 128, 0) by only 50%.
- Luminance is 151 as computed above
- Red: 255 + (151 - 255) x 0.5 = 255 - 52 = 203
- Green: 128 + (151 - 128) x 0.5 = 128 + 11.5 = 139.5, round to 140
- Blue: 0 + (151 - 0) x 0.5 = 75.5, round to 76
Result: A muted orange (203, 140, 76), halfway between the colour and its gray.
Compare the average method and the luminosity method on a pure blue pixel (0, 0, 255).
- Average method: (0 + 0 + 255) / 3 = 85
- Luminosity (Rec. 601) method: 0.299 x 0 + 0.587 x 0 + 0.114 x 255 = 29.07, round to 29
- The average method rates blue as a medium-bright gray (85)
- The luminosity method correctly rates it as much darker (29), matching how dim pure blue looks to the eye
Result: Two formulas give very different results: average produces gray 85, luminosity produces gray 29, which is why this tool uses luminosity.
Grayscale value of common pure colours using Rec. 601 luma weights
| Colour | RGB | Luminance (gray value) |
|---|---|---|
| White | 255, 255, 255 | 255 |
| Red | 255, 0, 0 | 76 |
| Green | 0, 255, 0 | 150 |
| Blue | 0, 0, 255 | 29 |
| Yellow | 255, 255, 0 | 226 |
| Black | 0, 0, 0 | 0 |
What the intensity slider does at different settings
| Intensity | Effect |
|---|---|
| 0% | No change, original colours kept |
| 25% | Slightly muted colours |
| 50% | Half desaturated, soft faded look |
| 75% | Mostly gray with a faint colour tint |
| 100% | Full black and white grayscale |
Common grayscale conversion formulas compared
| Method | Formula | Notes |
|---|---|---|
| Average | (R + G + B) / 3 | Simplest, but ignores how the eye perceives colour; often looks too dark or too flat |
| Luminosity (Rec. 601) | 0.299R + 0.587G + 0.114B | Used by this tool; matches perceived brightness for standard-definition video and most editors |
| Luminosity (Rec. 709) | 0.2126R + 0.7152G + 0.0722B | HDTV standard; very close to Rec. 601 results for everyday photos |
| Lightness | (max(R,G,B) + min(R,G,B)) / 2 | Averages only the brightest and darkest channel; can lose midtone detail |
| Desaturation (HSL) | Same as lightness in HSL colour space | Tends to produce the flattest, lowest-contrast result of the common methods |
Common mistakes to avoid
- Expecting a plain average of the channels. Averaging red, green and blue equally makes bright green and dark blue look the same, which is wrong to the eye. This tool uses perceptual weights (green counts most, blue least), so the grays match how light each colour really looks. The comparison table above shows how differently the average and luminosity methods rate the same colour.
- Saving a grayscale photo as JPEG and expecting a smaller file every time. A black and white image still has the same pixel dimensions, and JPEG stores brightness regardless of colour, so the size drop can be modest. For sharp graphics or transparency use PNG, for photos JPEG or WebP usually compress smaller. Grayscale conversion is not a substitute for a compressor if file size is the goal.
- Confusing grayscale with reduced brightness. Grayscale removes colour but keeps each pixel at its original brightness. It does not darken the image. If a grayscale photo looks flat, the original may simply have low contrast rather than the conversion being at fault.
- Losing transparency by switching to JPEG. JPEG cannot store transparency, so transparent areas are filled with white. Keep the output as PNG or WebP if you need the see-through background to survive the conversion.
- Mistaking the CSS grayscale() filter for a real conversion. A CSS filter like grayscale(100%) only changes how an image displays on a web page; the underlying file stays full colour, and anyone who downloads it gets the original. To produce an actual black and white file you must convert and re-save the pixel data, which is what this tool does.
- Assuming grayscale always means true black and white with no gray. Grayscale keeps the full range of tones from black to white. A two-tone, pure black-and-pixel image (no gray at all) is a separate effect called thresholding or bitmap conversion, not what most grayscale tools, including this one, produce.
Glossary
- Grayscale
- An image made only of shades of gray, from black to white, with no colour (hue) information.
- Luminance (luma)
- A single value representing how bright a colour appears to the eye, computed from weighted red, green and blue.
- Desaturate
- To reduce or remove the colour intensity of an image, pulling colours toward neutral gray.
- Rec. 601
- A standard that defines the luma weights 0.299, 0.587 and 0.114 for red, green and blue, widely used for converting colour to brightness.
- Rec. 709
- The HDTV colour standard, using luma weights 0.2126, 0.7152 and 0.0722; produces results very close to Rec. 601 for photos.
- RGB channels
- The three colour components, red, green and blue, whose values combine to make every pixel colour.
- Alpha channel
- The fourth channel in some image formats that stores transparency; grayscale conversion leaves it unchanged.
- Monochrome
- An image using variations of a single colour or tone; grayscale is the most common form, using shades of neutral gray.
Frequently asked questions
How does this convert an image to grayscale?
For every pixel it computes luminance = 0.299 x R + 0.587 x G + 0.114 x B, then writes that single brightness value into the red, green and blue channels. The weights match how bright the eye perceives each colour, so green carries more weight than blue. The whole process runs in your browser using the canvas, and nothing is uploaded.
What does the intensity slider do?
It blends between the original colour and the full grayscale value. At 100% you get a true black and white image, at 0% the picture is unchanged, and values in between give a partly desaturated, faded look. It works like a saturation control, fading colour out without changing how light or dark each pixel is.
Will my image be uploaded to a server?
No. The conversion happens entirely on your device using FileReader and the HTML canvas. Your photo never leaves your browser, which makes the tool fast and private even for large or sensitive images.
Does grayscale keep transparency?
Yes, if you export as PNG or WebP. The alpha (transparency) channel is left untouched during conversion, so transparent areas stay transparent. If you save as JPEG, which has no transparency, those areas are filled with white instead.
What image formats can I use?
You can upload PNG, JPEG, WebP, GIF and BMP files. For the output you can choose PNG (best for transparency and sharp graphics), or JPEG and WebP, which let you set a quality level and usually produce smaller files for photos.
Is grayscale the same as black and white?
In everyday use the terms overlap. Strictly, black and white can mean only two tones (pure black and pure white), while grayscale includes the full range of grays in between. This tool produces grayscale, the smooth range of grays, which is what people usually mean by a black and white photo.
What is the best method for converting a colour photo to grayscale?
The luminosity method, which weights green highest and blue lowest to match human perception, is generally considered the best general-purpose method and is what this tool uses. The plain average method is simpler but tends to produce a darker, flatter result that does not match how the colours actually looked.
Does converting an image to grayscale reduce its file size?
Not automatically. Grayscale conversion changes pixel colour values, not the number of pixels, so file size depends mainly on the output format and compression settings rather than the grayscale step itself. To shrink file size specifically, use an image compressor after converting.
Can I convert a grayscale image back to full colour?
No, not accurately. Converting to grayscale discards the original colour information permanently, so there is no way to reconstruct the exact original hues from a grayscale file. Keep a copy of the original colour image if you may need it later.
Why would I use grayscale instead of just printing in color?
Grayscale images print using only black ink (the K channel in CMYK), which is cheaper and gives more consistent, predictable tones than mixing three colour inks to fake a neutral gray. This is why grayscale is the standard for documents, newsletters and other black-ink print jobs.