Image to Grayscale
Convert any color image to black-and-white grayscale. Files never leave your browser.
Drop an image or click to browsePNG, JPG, WebP — processed entirely in your browser
Convert images to grayscale online — free
Uses the standard luminance formula (0.299R + 0.587G + 0.114B) that matches human perception — greens appear lighter than blues at equal intensity. This is the same algorithm used in most professional tools. For other effects, try Image Color Inverter or Brightness & Contrast.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Converting an image for a monochrome print or a single-colour layout.
- Checking whether a design still reads without colour, which is a useful accessibility test.
- Producing a neutral version of a photo to sit behind text.
- Removing colour from a screenshot so an annotation stands out.
- Preparing an image for a context where colour would be distracting.
Frequently Asked Questions
- Why not just average the RGB channels?
- Because human vision is far more sensitive to green than to blue. A plain average makes greens too dark and blues too light; the standard luminance weights are 0.2126 R, 0.7152 G, 0.0722 B under Rec. 709.
- Do the weights differ by standard?
- Yes. Rec. 601 (used for older SDTV) uses 0.299/0.587/0.114, while Rec. 709 matches modern sRGB displays. The two give visibly different results for saturated colours, which is why greyscale conversions can disagree.
- Should gamma be handled?
- Properly, yes — sRGB values are gamma-encoded, so weighting them directly is mathematically wrong. Correct conversion linearises first, applies the weights, then re-encodes. Most fast implementations skip this and are slightly too dark.
- Does it reduce the file size?
- Often substantially, since colour information is discarded — PNG can store a true greyscale channel rather than three. A JPEG saved as greyscale drops its chroma planes entirely.
- Is greyscale the same as desaturation?
- Not quite. Desaturation in HSL sets saturation to zero, which uses lightness rather than luminance and looks flatter. Luminance-weighted greyscale preserves the perceived brightness relationships far better.
- Why do two greyscale conversions of the same photo differ?
- Because the channel weights differ between standards, and some tools convert in gamma-encoded space while others linearise first. Both are defensible, and they produce visibly different mid-tones.
- Is greyscale a good accessibility check?
- It is a useful one — removing colour reveals whether a design still communicates through contrast and layout alone, which approximates how it reads for some forms of colour blindness. It is not a substitute for a contrast ratio check.
- Can colour be recovered afterwards?
- No. Three channels are collapsed into one, so the mapping is many-to-one and irreversible. Keep the original — colourisation guesses plausible colour, it does not restore the real one.
Common errors and gotchas
- Assuming a single conversion formula. Different weightings produce visibly different results from the same source.
- Losing contrast between two colours that had similar luminance, which then become indistinguishable.
- Treating grayscale as smaller. The pixel data may reduce, but the format often stores three channels anyway.
- Converting a chart whose only distinction was colour, which makes the data unreadable.
- Re-saving as JPEG and finding the artefacts more visible than they were in colour.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.