Image to Grayscale — Make Photos Black & White Online
Convert color images to grayscale using the perceptual luminance formula, and compare the result against the original before you download it. Runs entirely in your browser.
Drag & drop an image here
or click to browse
What is grayscale? A grayscale image is one where every pixel carries brightness only and no hue, so its red, green and blue channels all hold the same value. Converting a color photo means collapsing three channels into one. The perceptual method used here weights the channels by how sensitive the eye is to each: 0.299 red, 0.587 green, 0.114 blue, the luma weights defined in ITU-R BT.601.
How to Use the Image to Grayscale Converter
-
Add your image — Drag a PNG, JPG, GIF or WebP file onto the drop zone, or use Choose File. The file is read with
FileReaderand stays inside the page. -
Watch the conversion run — Every pixel is read out of the canvas with
getImageData, weighted into a single luminance value, and written back with all three channels set to that value. Nothing else about the image changes. - Compare against the original — The two panels show the same image before and after. Look at where colors of similar brightness meet — a red label on a green background, for example — because those boundaries lose most of their separation in grayscale.
- Adjust the source if the result looks flat — Because the mapping is fixed, the only way to change the outcome is to change the input. Raising contrast or exposure on the color original before converting has far more effect than any post-conversion tweak.
-
Download the grayscale image — Download Grayscale saves the converted image at its original pixel dimensions, with
-grayscaleappended to the file name.
How Grayscale Conversion Works
The tool draws your image into an HTML canvas, pulls the raw pixel buffer out with
getImageData, and walks it four bytes at a time — red, green, blue, alpha. For each
pixel it computes one brightness value and assigns that value to all three color channels, leaving
the alpha byte untouched so transparency survives. The buffer then goes back with
putImageData. The formula is the standard luminosity, or luma, weighting:
gray = 0.299 x R + 0.587 x G + 0.114 x B
Those coefficients come from ITU-R BT.601, the recommendation that defined how color television signals encode brightness. They are not arbitrary: human vision has far more receptors sensitive to green wavelengths than to blue, so green contributes almost six times as much perceived brightness as blue does. A pure green pixel converts to a light gray of 150, while a pure blue pixel of identical saturation converts to a near-black 29. Anyone who has photographed a blue sky and been surprised by how dark it went in black and white has seen this in action.
The three common conversion methods
Luminosity is the default in almost every image editor, but it is not the only option, and each method answers a different question about what "brightness" means.
| Method | Formula | Character of the result |
|---|---|---|
| Luminosity (used here) | 0.299R + 0.587G + 0.114B |
Matches how people perceive brightness. Greens stay light, blues go dark, skin tones look natural. |
| Average | (R + G + B) / 3 |
Treats all channels equally. Flatter and slightly muddier, but cheap and reversible in the arithmetic sense. |
| Lightness / desaturate | (max(R,G,B) + min(R,G,B)) / 2 |
Higher local contrast, but saturated colors of different hues can collapse to the same gray. |
A fourth variant, BT.709 (0.2126R + 0.7152G + 0.0722B), is used for HDTV and sRGB work
and pushes green further still. In practice the difference between BT.601 and BT.709 is a few levels
of gray and is rarely visible outside side-by-side inspection of saturated material.
Grayscale is not the same as black and white
The two terms get used interchangeably in everyday speech, but they describe different things. A grayscale image holds a continuous range of tones — 256 of them in an 8-bit channel — running from black through every shade of gray to white. A true black-and-white, or bitonal, image holds exactly two values per pixel. Fax machines, laser-printer halftones and 1-bit art are bitonal; the output of this tool is grayscale. If you want the bitonal look with the illusion of tone preserved, that is what Image Dithering is for.
What happens to file size
Converting to grayscale does not automatically make a file smaller. The canvas still writes three color channels per pixel, they simply all hold the same number. A PNG will usually shrink anyway, because identical channel values compress well, and a JPEG often shrinks because the chroma planes become uniform. But the saving is a side effect, not a guarantee, and it is much smaller than what you get from resizing or from the Image Compressor. Genuine single-channel grayscale files require an encoder set to a grayscale color type, which a browser canvas does not expose.
Frequently Asked Questions
Grayscale keeps a full range of tones — black, white, and every gray between, 256 levels in an ordinary 8-bit image. True black and white, properly called bitonal or 1-bit, allows only two values per pixel with nothing in between. This tool produces grayscale, so gradients and shadow detail are preserved rather than being crushed into pure black or pure white.
The perceptual luminosity weighting from ITU-R BT.601: gray = 0.299R + 0.587G + 0.114B. Green dominates because the eye is most sensitive to it and blue contributes least. The weights are fixed, which means the same input always produces exactly the same output — useful when you need consistency across a set of images.
Because grayscale has one dimension and color has three, different colors can share a brightness. A mid-red and a mid-green that look strongly distinct in color may map within a few levels of each other and become almost indistinguishable. Charts, maps and infographics that rely on hue alone suffer badly from this — check them in grayscale before printing, and add patterns or labels where two areas merge.
Yes. The conversion only rewrites the red, green and blue bytes of each pixel and leaves the alpha byte exactly as it was, so a transparent PNG or WebP stays transparent. Note that the tool re-encodes the image after conversion, so a format without an alpha channel, such as JPEG, still cannot carry the transparency through.
No. The file is read locally with FileReader, converted with the HTML5 Canvas API, and previewed from data held in the tab. No network request is made at any stage, so private photos, scanned documents and unpublished work never leave your device.
Usually a little, but not reliably, and not by much. The canvas still stores three channels per pixel; they just hold identical values, which compresses better than varied ones. Expect a modest reduction rather than a dramatic one. If size is the goal, resize the image first and then compress it — that pair does far more than removing color.
No. Collapsing three channels into one throws away the hue and saturation permanently, and no tool can reconstruct them from the gray values. Always keep the color original. The download is a new file rather than a replacement, so your source stays intact unless you overwrite it yourself.
Contrast that came from color rather than brightness disappears in the conversion. A photo whose subject stood out because it was red against green will look dull once both become similar grays. The fix is on the color file: increase contrast, or lighten and darken the specific areas, before converting. Some photographers also shift the color balance first to push a subject up or down the luminance scale.
Use Cases
Checking a Chart Before Print
A report will be photocopied in mono. Converting the charts first shows which series lose their separation, so you can add hatching or labels before anyone reads it.
Preparing Scans for OCR
Text recognition works on luminance, so removing color from a photographed page gives the engine what it will actually use and lets you see the contrast it has to work with.
Black and White Portfolio Edits
Judge whether a portrait works on tone alone. If the subject stops standing out once color is gone, the composition was leaning on hue rather than on light.
Accessibility Review
A quick way to sanity-check a UI screenshot for color-only meaning: anything that becomes ambiguous in grayscale will also be ambiguous to a viewer with reduced color vision.
Neutral Backgrounds and Mockups
Desaturate a stock photo so a brand color placed on top is the only thing with hue, a common technique for slide backgrounds and hero sections.
Pre-processing for Vision Code
Edge detection, thresholding and template matching all start from a single-channel image. Converting here gives you the exact luminance your algorithm will see.