Grayscale Image Converter

Convert color images to black and white using Canvas pixel manipulation. Preview and download instantly.

Grayscale Image Converter tool

Loading...

Example

Input: Pixels of pure red (255, 0, 0) and pure yellow (255, 255, 0), Grayscale Method Luminance

Result: Red becomes gray level 76 and yellow becomes 226 (0 is black, 255 is white). Transparency is kept

Luminance uses 0.299R + 0.587G + 0.114B: red gives 0.299 x 255 = 76.2, yellow gives 76.2 + 149.7 = 225.9, both rounded.

Grayscale Values by Method (0 = Black, 255 = White)

ColorLuminanceAverageDesaturation
Red #FF00007685128
Green #00FF0015085128
Blue #0000FF2985128
Yellow #FFFF00226170128
Orange #FF8000151128128
Sky blue #87CEEB188192185
White #FFFFFF255255255

Computed with the tool formulas and rounded to whole numbers.

  1. Upload a color image by clicking the upload area or dragging a file onto it.
  2. The tool instantly converts the image to grayscale using luminance-weighted pixel processing.
  3. Preview the black-and-white result, and optionally switch the method to Average or Desaturation.
  4. Choose your preferred output format (PNG, JPEG, or WebP) and click Reprocess to apply your settings.
  5. Download the grayscale image to your device.

Turning a Color Photo Black and White

This tool turns a color image into grayscale, often called black and white. Upload the image and the gray version appears right away, ready to download as PNG, JPEG or WebP.

Every pixel gets one gray value from 0 (black) to 255 (white). The question is how to combine red, green and blue into that value, and the tool offers three methods. Luminance, the default, weights the channels by how bright they look to the eye: 0.299 red, 0.587 green and 0.114 blue. The eye is most sensitive to green, so a pure green becomes a light gray and a pure blue becomes nearly black. Average simply adds the three channels and divides by 3. Desaturation takes the midpoint of the brightest and darkest channel.

The difference shows in colorful images. With Average or Desaturation, pure red, green and blue all become the same gray, so a red logo on a green background can vanish. Luminance keeps them apart, which is why it usually looks the most natural.

There are no brightness or contrast controls. For those, open the result in a photo editor. PNG output is lossless, while JPEG and WebP use a quality setting of 92% by default. Images up to 20 MB are processed in your browser.

To check how your colors hold up for people with color vision deficiency, try the Color Blindness Simulator. To soften the result, pair it with Image Blur.

Sources

Frequently Asked Questions

Luminance, the default, usually looks the most natural because it weights green, red and blue by how bright they appear to people. Average can make blues look too light and greens too dark. Try all three on your image, since the best choice depends on its colors, and compare the previews.
With Luminance, gray = 0.299 x R + 0.587 x G + 0.114 x B, rounded to a whole number. Average uses (R + G + B) / 3, and Desaturation uses (max + min) / 2 of the three channels. The same value is then written to red, green and blue, which makes the pixel gray.
The Desaturation method matches the classic Photoshop Desaturate command, which averages the brightest and darkest channel of each pixel. The default Luminance method is different. It weights each channel by perceived brightness, which usually keeps more natural contrast between colors.
Often a little, but do not expect a big drop. The output is still saved as a normal color image in which red, green and blue are equal, so it takes nearly as much room as a color file. For a smaller file, save as JPEG or WebP at a lower quality, or run the result through the Image Compressor.

Related Tools

Image Compressor

Compress images client-side with an adjustable quality slider. Compare before and after file sizes instantly.

Image and Media

Image Flip and Rotate

Flip images horizontally or vertically and rotate by 90, 180, or 270 degrees. All processing in your browser.

Image and Media

Image Color Extractor

Extract the dominant colors and full color palette from any uploaded image. Get hex, RGB, and HSL values.

Image and Media

Color Blindness Simulator

Simulate how colors appear to people with color vision deficiencies. Test protanopia, deuteranopia, and more.

Color Tools

Image Blur

Apply Gaussian blur to images with an adjustable radius slider. Preview the result and download a PNG. Client-side.

Image and Media