Five ways to turn color into gray
There's no single correct grayscale. Every method answers the same question differently: how bright is this color? Choose a method from the menu, or click a thumbnail in the strip under the image, which shows all five side by side on your own photo.
| Method | Formula | Best for |
|---|---|---|
| Luminance | 0.2126 R + 0.7152 G + 0.0722 B, in linear light | Accurate brightness |
| Luma | 0.299 R′ + 0.587 G′ + 0.114 B′, on gamma-encoded values | Matching most photo apps |
| OKLab L | Perceptual lightness from OKLab | Even mid-tones |
| Average | (R + G + B) ÷ 3 | Speed, comparison |
| HSL lightness | (max + min) ÷ 2 | Comparison only |
Luminance (Rec. 709)
The default, and the most physically faithful. Each pixel is first decoded from sRGB to linear light, where numbers are proportional to actual light energy. The channels are weighted by how strongly the eye responds to them, using the coefficients from the Rec. 709 (HDTV) standard that sRGB shares, and then the gray is encoded back to sRGB. Green counts for over 70% because our eyes are most sensitive to it; blue counts for about 7%.
This is the same relative luminance used in WCAG contrast ratios, so a grayscale made this way shows how strong your contrast really is.
Luma (Rec. 601)
The classic video formula, from the standard-definition television era. It applies weights directly to the gamma-encoded RGB values, skipping the decode step. It's fast and familiar, and many image editors' basic "desaturate" or "grayscale" commands give similar results. Compared with luminance, saturated colors, especially blues and reds, come out slightly different in brightness.
OKLab L
OKLab is a modern color space designed so that equal steps look equal. Its L channel is perceived lightness. The tool finds the gray with the same OKLab lightness as each pixel. The result is close to luminance, with slightly more evenly spaced mid-tones.
Average and HSL lightness
Average treats red, green and blue as equally bright, which they aren't. Pure blue comes out as bright as pure green, though green looks far brighter. HSL lightness averages only the strongest and weakest channel, so every fully saturated color, yellow and blue alike, becomes the same mid-gray. Both are here mainly to show why the better formulas exist.
Strength and comparing
The Strength slider blends between the original and full grayscale. Values around 60–80% give a muted, desaturated look that keeps a hint of color.
Drag across the image to move the comparison line, or tab to it and use the arrow keys. The left side shows the original and the right side the grayscale version.
Downloading
Download PNG saves the grayscale image as a lossless PNG at the working resolution. Images larger than 4,096 pixels on the long side are scaled down to that size first to keep the tool fast. The file name includes the method, for example photo-grayscale-luminance.png.
Everything runs in your browser. The image isn't uploaded anywhere.
What grayscale is useful for
- Checking value structure. Painters and designers squint or go grayscale to see whether a composition works without color. If everything turns into one mid-gray, the design relies on hue alone.
- Accessibility. If information survives in grayscale, it survives every type of color blindness. Pair this with the color blindness simulator.
- Printing. Previewing in grayscale avoids surprises on a black-and-white printer or photocopier.
- Photography. Black-and-white photos often start from a conversion like these before adjusting individual colors.
Grayscale versus black and white
In everyday language, "black and white" photos are really grayscale: thousands of tones between black and white. A true black-and-white (1-bit) image has only two values, as in a fax or a stencil. This tool produces full grayscale with 256 levels per pixel.
Related tools
To grab exact gray values from the result, use the color picker from image. The contrast checker gives the numbers behind what you see, and palette from image shows which colors your photo is built from.
FAQ
Which method should I use?
Luminance for accuracy and accessibility checks, luma if you want to match what most editors and older software produce. If you're unsure, compare the strip and pick the one you like.
Why does my red flower disappear into the leaves?
Red and green can have nearly the same luminance. That's exactly what a grayscale check reveals. In a design, change the lightness of one color so they separate.
Does the PNG keep transparency?
Yes. Transparent areas stay transparent; only the color channels change.