🌑 Grayscale Image Converter
By ToolNimba Editorial Team · Updated 2026-06-19
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. 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, 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 would make pure green and pure blue look the same shade of gray, which is wrong to the eye.
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. 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.
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%.
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.
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 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.
- 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.
- 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.
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.
- RGB channels
- The three colour components, red, green and blue, whose values combine to make every pixel colour.
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.