Grayscale Converter

What the Grayscale Converter Does

This converts a colour image to grayscale — shades of gray from black to white. It is not a simple average of the red, green and blue channels; it uses the perceptual luminance formula so the grays match how bright each colour actually looks to a human.

The output still has 256 possible levels of gray per pixel, so detail and tonal gradation are kept. It is the right choice when you want a tasteful black-and-white-photo look rather than a harsh two-tone image.

How It Works

Drop or pick an image. It is drawn onto a canvas at its original size, entirely in your browser.

Each pixel's red, green and blue are combined with the weights 0.299, 0.587 and 0.114 into a single gray value, which is written back to all three channels. Any transparency is left untouched.

Download saves the result as a lossless PNG. The canvas re-encode also strips EXIF and GPS metadata.

Processing pipeline

1. Decode locally. Your image is read and drawn onto a canvas in the browser — never uploaded.
2. Read the pixels. The raw red, green and blue values are pulled from the canvas.
3. Apply the luma weights. Each pixel becomes 0.299 red plus 0.587 green plus 0.114 blue, written to all three channels.
4. Export the PNG. The grayscale canvas is saved as a lossless PNG with your original base name.

Grayscale (Rec. 601 luma)

Green has the largest weight (0.587) and blue the smallest (0.114) because the eye is most sensitive to green light and least to blue. A plain (R+G+B)/3 average would make greens too dark and blues too light.

Privacy

Your image is processed entirely in your browser and never uploaded — there is no server.

The canvas re-encode strips all EXIF and GPS metadata, so the grayscale PNG carries no camera, date or location tags.

No account, no stored copy; close the tab and nothing remains.

Technical Details

Standards & references

• Rec. 601 luma — The coefficients 0.299, 0.587 and 0.114 come from ITU-R BT.601 and weight the channels by the eye's sensitivity, with green highest and blue lowest.
• Grayscale — A grayscale image holds 256 levels of gray per pixel, so tonal detail is preserved — unlike a two-value black-and-white image.

Accuracy & Limitations

This is true grayscale: 256 levels of gray, so gradients and detail survive. If you instead want a pure two-tone image of only black and white, use the black-and-white converter, which thresholds the picture.

The luma weights are applied to the standard gamma-encoded sRGB values, which is the common and fast approach. A strictly correct luminance would convert to linear light first; the visible difference is small and rarely matters for a grayscale look.

The output stays a three-channel PNG with equal red, green and blue, so it looks gray but is not a single-channel grayscale file. File size drops only modestly versus the colour original.

Transparency is preserved because only the colour channels are changed; the alpha channel is left alone.

Real-World Use Cases

When to use it — and when not to

For a pure two-tone image of only black and white, use the black-and-white converter; to flip colours to their opposite, use the colour inverter.

Frequently Asked Questions

References

• Grayscale — Wikipedia
• Luminance — Song Ho Ahn
• HTMLCanvasElement: toBlob() (MDN)

Related Tools