Four ways to take the color out of a photo
This converter turns a color image into one of four styles. All of them work on every pixel of the photo in your browser, and you see the result next to the original before you save it.
| Style | What it does | Good for |
|---|---|---|
| Grayscale | 256 shades from black to white | Portraits, landscapes, printing photos without color |
| Black and white | Only black or white, cut at a threshold | Text, scans of documents, logos, line art, stencils |
| Dithered | Black and white dots that add up to shades | Photos for 1-bit displays and printers, a retro look |
| Sepia | Warm brown tones | An old photo look |
For a PDF instead of a picture, the grayscale PDF tool does the same to every page of a document. To make the saved photo smaller, run it through the image compressor, and to hide faces or license plates first, use blur image.
How the gray value is calculated
A gray value is a weighted sum of red, green and blue, with the largest weight on green and the smallest on blue. The default weights come from Recommendation ITU-R BT.709, the standard for HDTV, which defines the luminance signal as:
Y = 0.2126 × R + 0.7152 × G + 0.0722 × B
R, G and B are the values from 0 to 255 as stored in the image, and Y is rounded to a whole number from 0 (black) to 255 (white). Recommendation ITU-R BT.601, the standard for standard-definition television, uses 0.299, 0.587 and 0.114. Both standards apply the weights to the stored, gamma-encoded values, and so does this tool. The table shows what each gives:
| Color | R, G, B | BT.709 gray | BT.601 gray |
|---|---|---|---|
| Pure red | 255, 0, 0 | 54 | 76 |
| Pure green | 0, 255, 0 | 182 | 150 |
| Pure blue | 0, 0, 255 | 18 | 29 |
| Yellow | 255, 255, 0 | 237 | 226 |
| Orange | 255, 128, 0 | 146 | 151 |
Worked example: orange (255, 128, 0) gives 0.2126 × 255 + 0.7152 × 128 + 0.0722 × 0 = 54.21 + 91.55 + 0 = 145.76, which rounds to 146, a medium gray. With BT.601 it is 0.299 × 255 + 0.587 × 128 = 76.25 + 75.14 = 151.38, so 151. Pure red becomes a dark gray of 54 and pure green a light gray of 182, so a red flower on green leaves turns dark on a light background.
Pure black and white: threshold or dithering
Black and white compares each gray value with the threshold. At or above it the pixel becomes white, below it black. At the default of 128, orange (146) turns white and pure red (54) turns black. This gives the cleanest result for text and drawings, but a photo loses all its shades and turns into hard shapes.
Dithered uses error diffusion as described by Robert W. Floyd and Louis Steinberg in 1976. The image is read row by row, left to right. Each pixel becomes black or white at the middle value of 128, and the difference between its gray value and that result, the error, is passed on to the neighbors that have not been processed yet:
| Neighbor | Share of the error |
|---|---|
| Next pixel to the right | 7/16 |
| Below and to the left | 3/16 |
| Directly below | 5/16 |
| Below and to the right | 1/16 |
Worked example, computed with this tool: a 2 × 2 patch where every pixel has the gray value 100. The first pixel is below 128, so it turns black with an error of 100. The pixel to its right gets 7/16 of that and rises to 143.75, which turns white with an error of 143.75 − 255 = −111.25, and so on. The result is one white and three black pixels. Over a large even area of gray 128 about half of the pixels end up white, and over gray 64 about a quarter, so from a distance the dots look like the original shade.
Brightness, contrast and sepia
Brightness and contrast change the picture before it is converted, with the same formulas as the CSS filters in the W3C Filter Effects specification. On a scale from 0 to 1, brightness multiplies every channel (at 50% a value of 0.8 becomes 0.4), and contrast moves values away from or toward the middle: new value = (value − 0.5) × contrast + 0.5. At 100% both leave the picture as it is. With a threshold, a little more contrast often gives cleaner text.
Sepia uses the matrix of the CSS sepia() filter at full strength:
R′ = 0.393 R + 0.769 G + 0.189 B
G′ = 0.349 R + 0.686 G + 0.168 B
B′ = 0.272 R + 0.534 G + 0.131 B
Results above 255 are capped, so white becomes a light cream of 255, 255, 239, and a mid gray of 100, 100, 100 becomes the brown 135, 120, 94.
PNG or JPEG
PNG is lossless and keeps transparency. This tool writes grayscale PNG files with a single gray channel and black and white PNG files with 1 bit per pixel, both allowed by the PNG specification, instead of the four channels a browser normally saves. For a photo of 4,000 × 3,000 pixels that is 12 MB of raw gray data, or 1.5 MB in black and white, before compression. Sepia is saved in color. JPEG has no transparency, so transparent areas turn white. It also compresses with loss, so the pixels of a black and white or dithered image do not stay pure black and white; PNG keeps them exact.
How to make a photo black and white
- 1Drop a photo on the box or tap it to choose one. HEIC photos from an iPhone work too.
- 2Pick Grayscale, Black and white, Dithered or Sepia, and adjust the threshold, brightness and contrast.
- 3Drag across the picture to compare it with the original.
- 4Choose PNG or JPEG and press Download image.
Sources
- Recommendation ITU-R BT.709-6 (06/2015): item 3.2, luminance signal with the weights 0.2126, 0.7152 and 0.0722
- Recommendation ITU-R BT.601-7 (03/2011): section 2.5.1, luminance with the weights 0.299, 0.587 and 0.114
- W3C Filter Effects Module Level 1: section 13.1, the matrices and formulas of grayscale(), sepia(), brightness() and contrast()
- Victor Ostromoukhov, A Simple and Efficient Error-Diffusion Algorithm, SIGGRAPH 2001: describes Floyd and Steinberg error diffusion with the coefficients 7/16, 3/16, 5/16 and 1/16, and cites R. W. Floyd and L. Steinberg, An adaptive algorithm for spatial grey scale, Proc. Soc. Inf. Display 17, 1976
- W3C PNG Specification, third edition: grayscale with bit depths 1 to 16, grayscale with alpha, packing of pixels below 8 bits
Frequently asked questions
Is my photo uploaded?
No. Your browser opens the photo, converts it and saves the new file on your own device. Nothing is sent to a server.
What is the difference between grayscale and black and white?
Grayscale keeps 256 shades from black to white, so a photo still shows soft light and shadow. Black and white keeps only two values, pure black and pure white. With a threshold, every pixel is cut into one or the other, which suits text, logos and line art. With dithering, a pattern of black and white dots stands in for the shades, so a photo stays recognizable.
Which threshold should I use?
Start at 128, the middle of the range, and watch the preview. Raise it to keep faint lines and light text, which then turn black. Lower it to drop a gray background or the shadow of a scan, which then turns white. Brightness and contrast change the picture before the cut, so they help too.
BT.709 or BT.601, which weights are better?
Both are standards from the ITU for turning red, green and blue into one brightness value. BT.709 is the one for HDTV and the default here. BT.601, from standard-definition TV, gives red and blue a little more weight, so red and blue areas come out lighter and green areas darker. Pick whichever looks better for your photo.
Does it keep the full resolution?
Yes. The preview is drawn smaller to stay quick, but the download is made from the whole image at its full width and height in pixels. Very large images are scaled down only when the browser cannot draw them at full size, and the tool tells you when that happens.
Why is the PNG so small?
This tool writes gray PNG files with one channel instead of the usual four, and black and white PNG files with 1 bit per pixel, as the PNG standard allows. A pure black and white image of 12 megapixels needs only 1.5 MB before compression, and usually much less after.
Does it keep a transparent background?
Yes, when you save as PNG. Transparent and semi-transparent pixels keep their transparency and only the color is changed. JPEG has no transparency, so transparent areas become white.