Uwarp

Or try an example

Grayscale method

Help Us Improve

—

(—)

Convert image to grayscale online

Convert photos to grayscale with luminosity, average, or lightness. Live preview and PNG download.

What is grayscale conversion?

Convert image to grayscale by mapping each pixel's red, green, and blue channels to one luminance value. Luminosity (0.299×R + 0.587×G + 0.114×B) is the default for photos—it matches how we perceive brightness. Average and lightness suit technical or design workflows when you need a different monochrome image balance. The same engine covers image to black and white, turn photo black and white, and convert color to black and white searches. Processing runs entirely in your browser.

Black and white conversion controls

Four grayscale methods with live preview before you download.

  1. Four conversion methods: Luminosity, average, lightness, and desaturation algorithms.

  2. Live preview: Preview updates as you switch methods—see results before download.

  3. Side-by-side comparison: Original and grayscale images shown together for easy comparison.

  4. PNG download: Save converted image as grayscale-image.png.

  5. Multiple formats: Upload PNG, JPEG, WebP, or GIF files.

  6. Large file support: Up to 15 MB and 8192 px edge for high-resolution images.

How to convert image to grayscale

Steps for grayscale conversion online.

  1. Upload the image

    Drop or click in the input panel (15 MB max).

  2. Choose grayscale method

    Select luminosity (default), average, lightness, or desaturation.

  3. Preview the result

    Compare original and grayscale side by side.

  4. Download PNG

    Save when the preview matches your goal.

Tips for grayscale conversion

Get better results when converting to grayscale.
  • 01

    Start with luminosity

    Luminosity produces the most natural-looking grayscale for most photos.

  • 02

    Try different methods

    If luminosity looks flat, try average or lightness for different tonal emphasis.

  • 03

    Use PNG for transparency

    Alpha channels are preserved when converting to grayscale.

  • 04

    Adjust contrast after

    Grayscale images often benefit from slight contrast increase—use /change-image-contrast.

  • 05

    Keep original files

    Grayscale conversion is one-way—you cannot restore color from grayscale.

  • 06

    Check different tones

    Colors that look different may become similar grays—preview carefully.

When to turn images black and white

Typical jobs for photo-to-grayscale and monochrome image output.

  • Print documents

    Convert to grayscale to reduce printing costs on black-and-white printers.

  • Artistic black-and-white photos

    Turn image black and white for timeless portraits, street shots, or editorial looks.

  • Design mockups

    Use grayscale images in wireframes to focus on layout, not color.

  • Accessibility testing

    Check contrast and readability without color distractions.

  • File size reduction

    Grayscale images can be smaller when saved in optimized formats.

  • Image preprocessing

    Prepare images for machine learning or OCR that requires grayscale input.

Why use this grayscale tool

Benefits over full editing software.

  • Private

    Images stay on your device—no server upload.

  • Multiple methods

    Four algorithms to match different use cases.

  • No install

    Works in any modern browser.

  • Free

    Unlimited conversions and downloads.

  • Instant preview

    See changes immediately as you switch methods.

  • Preserves quality

    No compression artifacts—output matches input resolution.

Grayscale Tools Compared

How this method-based grayscale converter differs from related B&W tools.

  • Black and White Image (Uwarp)

    One-step color-to-B&W without choosing a conversion formula.

  • Monochrome Image (Uwarp)

    Mono look focused on a single-channel style rather than method math.

  • Photoshop / Lightroom B&W

    Full tonal control and presets, but desktop install and learning curve.

  • This grayscale tool

    Pick luminosity, average, or lightness with live preview. Free and local.

Technical details

How grayscale conversion works.
Luminosity formula
Gray = 0.299×R + 0.587×G + 0.114×B (ITU-R BT.601 standard).
Average formula
Gray = (R + G + B) / 3.
Lightness formula
Gray = (max(R,G,B) + min(R,G,B)) / 2.
Rendering
Canvas 2D getImageData / putImageData.
Input limits
15 MB; longest edge 8192 px.
Output
PNG via canvas.toDataURL.

Sources & References

Authoritative references on grayscale conversion, Canvas API pixel manipulation, and the PNG format.
  • “Grayscale images are distinct from black-and-white images, which only contain two colors: black and white.”
    — Wikipedia — Grayscale

    Grayscale: This tool offers four grayscale conversion methods — luminosity, average, lightness, desaturation — each producing a different tonal mapping from color to shades of gray. en.wikipedia.org/wiki/Grayscale

  • “The Canvas API provides a means for drawing graphics via JavaScript and the HTML canvas element.”
    — MDN Web Docs — Canvas API

    Canvas API (pixel manipulation): Canvas 2D getImageData/putImageData applies one of four grayscale formulas per pixel, with real-time preview switching between luminosity, average, lightness, and desaturation. developer.mozilla.org/en-US/docs/Web/API/Canvas_API

  • “PNG supports lossless data compression, making it useful for storing graphics that need to be edited repeatedly without losing quality.”
    — W3C — PNG Specification (overview)

    PNG image format: Exporting grayscale output as PNG preserves the full tonal range and transparency, ensuring high-quality results for print and digital use. w3.org/TR/PNG/

  • “The Zone System provides a disciplined method for visualizing, exposing, and developing photographs in black-and-white photography.”
    — Wikipedia — Zone System

    Zone System (Ansel Adams): Ansel Adams' Zone System divides the tonal range into 11 zones from pure black to pure white. This tool's grayscale conversion preserves similar full-spectrum tonality. en.wikipedia.org/wiki/Zone_System

Frequently Asked Questions

Quick answers about this tool—open a question to read more.