Grayscale vs black and white: what is the difference?
Grayscale keeps hundreds of shades of gray. Black and white, taken strictly, keeps two and nothing in between. Nearly everyone says the second and means the first, and the handful of situations where they really do mean two tones are the ones that cost you a reprint.
By Free Image Lab ·
The short answer
Grayscale means shades of gray. A standard grayscale image has 256 of them, running from pure black through to pure white, and every pixel holds one of those values. Faces have cheekbones, skies have gradients, a photograph still looks like a photograph.
Black and white, taken literally, means two tones. Black or white, nothing between them. That is what a fax sends, what a 1-bit bitmap stores, and what a screen printer or a vinyl cutter can physically produce.
Almost nobody uses the phrase that way in conversation. Nobody calls Ansel Adams a grayscale photographer. So when someone says black and white, assume they mean grayscale until the context is printing, scanning, or a logo, at which point ask, because in those three places the strict meaning comes back and the two are not interchangeable.
Black and white when it is meant literally
One bit per pixel, on or off. The formats call it 1-bit, or bilevel, and it is the oldest way to store a picture because it is the cheapest. PNG and TIFF both support it, fax transmission is built on it, and every document scanner offers it as the setting that makes the smallest files.
The size difference is not marginal. A grayscale pixel costs eight bits and a bilevel pixel costs one, so a scanned page of text drops to roughly an eighth before compression even starts, and text compresses extremely well once it is reduced to hard edges.
It is worth being precise about what that does and does not explain. A photographed contract is several megabytes and a scanned one is a few hundred kilobytes, but bit depth is the smaller half of that gap. The larger half is that the photograph has far more pixels and carries sensor noise, which we measured separately and found cost five times the file size on its own.
How a two-tone image fakes gray
A 1-bit image can look like it contains gray. It does not. There are two ways of producing the illusion:
- Thresholding
- Every pixel above a chosen brightness becomes white, everything below becomes black. Fast, and correct for text or line art on a clean background. Applied to a photograph it destroys it, because all the mid tones fall to one side of the line or the other and come out as blobs.
- Dithering and halftones
- Scatter or cluster the black pixels so that a region is, say, 40 percent covered. At normal viewing distance your eye averages the dots and reads a mid gray that is not in the file. This is how newspapers printed photographs for a century, and why a newspaper photo dissolves into dots under a magnifying glass.
Both are worth knowing about because they explain a common surprise: an image that looks gray on screen can still be strictly two-tone, and an image that is genuinely grayscale can be rejected by a process that only accepts two tones.
Desaturating is not the same as converting
Here is the third thing that gets folded into the same conversation, and it is the one that actually changes what is in your file. There are two different operations that both leave you looking at a gray picture:
- Desaturating
- Pull the saturation to zero, or apply a black and white adjustment. The file is still RGB. Every pixel still stores three numbers, which now all happen to be equal. Nothing about the structure of the file changed, only the values in it.
- Converting the mode
- Image → Mode → Grayscale in Photoshop, the same path in GIMP, or
-colorspace Grayin ImageMagick. This throws two channels away and stores one number per pixel. PNG has a dedicated grayscale color type for exactly this, and JPEG can store a single brightness channel with no color channels at all.
On screen they are indistinguishable, which is why the distinction goes unnoticed. In the file they are not. The RGB one can accept color again the moment you paint on it; the converted one cannot hold a color until you switch it back to RGB, which is either a nuisance or a useful guarantee depending on what you are doing.
Browser tools give you the RGB kind, ours included
Anything that does this work on a canvas, which is every in-browser tool including ours, is working on RGBA pixels and encodes RGBA pixels back out. So what you download looks gray and behaves as gray, but it still carries three channels holding the same number. That is the right output for the web and for almost every use. If you specifically need a single-channel file, that is a mode conversion in a desktop editor or a command line tool, and it is worth knowing which one you were asked for before you send it.
A separate question: which gray each color becomes
Both operations above have to decide how bright each color is, and this is where cheap tools go wrong. Averaging the red, green and blue channels treats a vivid green and a deep blue as equally bright, when the eye reads them as nothing alike. Green carries roughly 71 percent of what we perceive as brightness, red 21 percent and blue 7 percent, so weighting them that way keeps the tonal range of the original and averaging them flattens it. If a black and white conversion has ever come back looking lifeless, that is usually the reason rather than anything to do with modes or channels.
What any of this does to file size
Three channels down to one means two thirds less raw data for the same pixels. That is the headline, and it is real, but the number you actually see is smaller because compressors had already spotted some of the redundancy:
- PNG. Lossless, so it has to keep every pixel exactly. A true grayscale PNG is normally meaningfully smaller than the desaturated RGB version of the same picture, because there are a third as many bytes for the filters and the compressor to work through in the first place.
- JPEG. Some saving, less than you would hope. JPEG already stores color at reduced resolution and separately from brightness, so the color channels were never a large share of the file, and flattening them recovers only that share. It is a real reduction rather than nothing, but if you are trying to hit a size limit, resizing gets you there and removing color does not.
- 1-bit. The one that genuinely transforms the number, and only for the kind of content it suits. Text, line drawings and scanned documents. Never photographs.
The practical conclusion: removing color is not a compression strategy. If you are trying to get under an upload limit, compressing the file or reducing its dimensions will do far more, and resizing beats compressing once the budget gets tight. Convert to grayscale because you want it to look that way, not because you want it smaller.
The three places the difference actually bites
Printing
A press asking for grayscale wants one ink: the black plate, and nothing on the other three. Sending an RGB file instead means the conversion happens somewhere in their workflow rather than yours, on settings you did not choose, and dark areas are where that goes wrong most visibly.
Some processes cannot do gray at all. Screen printing, vinyl cutting, rubber stamps and embroidery digitising put the material down or they do not, so artwork for them has to resolve to two tones. Either you supply that, or something upstream halftones it for you and you find out what it chose when the job arrives.
Scanning
Scanner software offers black and white, grayscale and color, and it means those words literally. Black and white gives you a 1-bit file: tiny, crisp, and correct for clean printed text. Grayscale is the right choice for anything faint, anything in pencil, and anything containing a photograph, because a threshold applied to a faint original deletes the faint parts rather than darkening them. If a scan of an old letter came back with half the handwriting missing, that setting is why.
The logo
“Can you send the black and white version?” almost never means grayscale. It means the one-color version, where every element is either the ink or the paper, because it is going somewhere that only has one ink: a fax header, an embroidered shirt, a sponsor wall, a newspaper listing.
Converting the color logo does not reliably produce that. Two brand colors of similar lightness become two grays you cannot tell apart, and any shape that was separated from its neighbor by hue alone stops being separate. This is why brands keep a mono logo that was drawn as one, usually as an SVG so it holds up at any size.
If you are the one doing the converting, check that the result still reads at the size it will be used, and do not accept the default mapping if it does not. Our grayscale tool lets you push individual colors lighter or darker before they are flattened, which is the difference between two brand colors staying distinct and becoming the same gray. For a whole set of images at once, or for a less absolute look, image filters applies the same treatment to a batch.
Frequently asked questions
- Is grayscale the same as black and white?
- In everyday speech, yes. Technically, no. Grayscale keeps a range of gray tones, normally 256 of them from pure black to pure white. Black and white in the strict sense means two tones only, black or white, with no gray anywhere. A black and white photograph is really a grayscale image, and nobody minds. The distinction starts to matter when a printer, a scanner setting, or a designer uses the phrase precisely.
- What is a 1-bit or bilevel image?
- An image where each pixel is stored as a single bit: on or off, black or white. There is no third option and no gray. Fax machines send 1-bit images, document scanners offer it as their smallest setting, and PNG and TIFF both support it. Because a pixel costs one bit rather than eight, a scanned page of text stored this way is a fraction of the size of the same page in grayscale.
- What is the difference between desaturating and converting to grayscale?
- Desaturating drains the color but leaves the file in RGB. Every pixel still stores three numbers, which now happen to be equal. Converting the mode to grayscale discards two of the three channels and stores one number per pixel. On screen the two are indistinguishable. In the file they are not: the desaturated one is the same size and shape as it was before, and the converted one holds a third as much raw data.
- Does converting to grayscale make the file smaller?
- A true mode conversion does, because there is a third as much raw data to store. Desaturating usually saves very little, because the file still has three channels and the compressor had already noticed they were similar. Removing color is a poor way to hit a size limit either way. Reducing the dimensions or compressing the image will do far more.
- My client asked for the black and white version of our logo. What do they want?
- Almost always the one-color version, where every part of the mark is either the ink or the bare paper. That is not what you get by converting the color logo to grayscale: two brand colors of similar lightness collapse into two grays nobody can tell apart, and any shape that relied on color to separate it from its neighbor stops being separate. Most brands keep a mono logo drawn on purpose rather than converted.
Tools for this
Free, and everything runs in your browser.
- Grayscale ImageTurn photos black and white, and control which colors go light or dark.
- Image FiltersBlack and white, sepia, faded or vivid, applied to a whole batch at once.
- Compress PNGReduce PNG file size while keeping transparency.
- Sepia FilterWarm brown tone, like a print that has aged well.
- DuotoneMap a photo onto two colors, the way a poster or a Spotify cover does.
- Color SplashKeep one color and turn everything else black and white.
- Add Film GrainAdd the texture of film, strongest in the midtones where it really sits.