Image Grayscale: Convert Photos to Black and White Online

Why Convert to Grayscale?

Grayscale images have a timeless quality that color photos sometimes lack. But beyond aesthetics, there are practical reasons to convert images to black and white.

Use Cases

• Photography: Black and white emphasizes form, texture, and contrast over color distractions
• Print design: Reducing to grayscale for single-color printing saves cost
• Accessibility: Testing how images look for colorblind users
• Machine learning: Many computer vision models work with grayscale input to reduce dimensionality
• Document scanning: Converting scanned documents to grayscale reduces file size while maintaining readability
• UI/UX design: Testing interface designs in grayscale ensures sufficient contrast without relying on color alone

How Grayscale Conversion Works

There are several methods to convert a color pixel to grayscale:

Average Method

gray = (R + G + B) / 3

Simple but doesn't account for how the human eye perceives different colors.

Luminosity Method (Recommended)

// ITU-R BT.709 standard (used by HDTV)
gray = 0.2126 * R + 0.7152 * G + 0.0722 * B

This weights green heavily because the human eye is most sensitive to green light, followed by red, then blue.

Desaturation Method

gray = (max(R, G, B) + min(R, G, B)) / 2

In Code (Canvas API)

const ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0);
const imageData = ctx.getImageData(0, 0, w, h);
const data = imageData.data;

for (let i = 0; i < data.length; i += 4) {
  const gray = 0.2126 * data[i] + 0.7152 * data[i+1] + 0.0722 * data[i+2];
  data[i] = data[i+1] = data[i+2] = gray;
}

ctx.putImageData(imageData, 0, 0);

Grayscale vs Desaturate

Convert any image to grayscale instantly with the PureTools Image Grayscale Tool. Upload your image, preview the result, and download. All processing happens in your browser - your images are never uploaded to any server.