Image Grayscale Converter
Image ToolsConvert any image to grayscale or black and white with adjustable intensity and choice of conversion algorithm.. Free, private — all processing in your browser.
The Image Grayscale Converter turns any color image into black and white (grayscale) using your choice of conversion algorithm. Adjustable intensity lets you do partial desaturation (keeping some color) or full grayscale (completely monochrome). Use for artistic effects (classic black-and-white photography look), newspaper-style imagery, simplifying images to focus on composition rather than color, or accessibility (some users prefer grayscale).
Pick from three conversion methods: luminance (perceptually accurate, weighted by how humans see color — 0.2126R + 0.7152G + 0.0722B), average (simple RGB average, less accurate but faster), or lightness (average of lightest and darkest channel). Intensity slider from 0% (original color) to 100% (full grayscale) lets you desaturate partially. All processing runs in your browser using the Canvas API. Supports JPG, PNG, WebP; preserves transparency for PNG and WebP.
Image Grayscale Converter — key features
Three conversion algorithms
Luminance (perceptual), average, and lightness — choose what fits your use case.
Intensity slider
0% keeps original color; 100% is full grayscale; in-between gives partial desaturation.
All common formats
JPG, PNG, WebP, GIF, BMP input and output.
Transparency preserved
PNG and WebP alpha channels remain intact.
Gamma-correct option
Apply in linear light space for most accurate perceptual grayscale.
Before/after preview
See original and grayscale side by side for comparison.
Lossless conversion
When output format supports it, no compression loss from grayscale conversion itself.
Client-side only
Images stay in your browser; no upload.
How to use the Image Grayscale Converter
- 1
Upload image
Drag or click to select any JPG, PNG, or WebP image.
- 2
Pick algorithm
Luminance (default, perceptually accurate), average, or lightness.
- 3
Adjust intensity
Slider from 0 to 100 — partial desaturation or full black and white.
- 4
Preview
Compare original and result side by side.
- 5
Download
Save the grayscale image in your chosen format.
Common use cases for the Image Grayscale Converter
Photography
- →Black and white art: Convert color photos to classic B&W for artistic effect, emphasizing composition and contrast over color.
- →Vintage aesthetic: Grayscale evokes historical or nostalgic feel for specific stylistic goals.
- →Documentary feel: News and documentary photography often uses B&W for gravitas.
Design
- →Logo variants: Create grayscale versions of logos for single-color printing or brand mood variations.
- →UI mockups: Grayscale mockups focus viewer attention on layout rather than color choices during early design.
- →Typography testing: Remove color to test how typography and layout work without color distractions.
Publishing
- →Newspaper preparation: Convert images for newsprint where color printing isn’t available or cost-prohibitive.
- →Academic publication: Grayscale for figures in journals that only print B&W.
- →Accessibility: Grayscale simulation helps test how designs work for users with severe color vision deficiencies.
Image Grayscale Converter — examples
Full grayscale
Complete desaturation.
color photo, 100% intensity, luminance
pure black and white with perceptually accurate brightness
Partial desaturation
Muted colors, 50%.
color photo, 50% intensity
halfway between full color and gray — colors appear muted but visible
Algorithm comparison
Different methods, same image.
same photo, three algorithms
luminance: perceptual accurate (green areas lighter) average: flat, may look muddy lightness: saturated colors become lighter
Transparent PNG
Preserving alpha.
logo with transparent background
grayscale logo, transparency preserved exactly
Gamma corrected
More accurate midtones.
photo with gamma-correct option
slightly lighter midtones compared to direct conversion matches human perception more closely
Technical details
Grayscale conversion reduces each pixel from RGB to a single intensity value. Three common algorithms:
1. Luminance (ITU-R BT.709, used in HDTV and most modern contexts):
Y = 0.2126R + 0.7152G + 0.0722B
Green has highest weight because human eyes are most sensitive to green wavelengths.
2. Average:
Y = (R + G + B) / 3
Simple but less perceptually accurate. Colors of equal RGB but different hues end up with same grayscale value, even though humans see them as different brightness.
3. Lightness:
Y = (max(R,G,B) + min(R,G,B)) / 2
Used in HSL color model. Preserves perceived lightness of highly saturated colors but flattens value of more saturated pixels.
Partial desaturation: blend original and grayscale by intensity percentage:
final = (1 - intensity) × original + intensity × grayscale
Intensity 0% = original color; 100% = full grayscale; 50% = half-desaturated (muted colors).
Gamma correction: for most accurate perceptual grayscale, convert sRGB to linear light, apply luminance formula in linear space, then convert back to sRGB. Most tools skip this (apply in gamma-encoded space directly), which produces slightly darker midtones than ideal. The tool offers both modes.
Algorithm choice:
- For photo-realistic B&W: luminance (BT.709)
- For digital art or simplified images: average or lightness
- For film-style simulation: specific film curves (outside basic grayscale)
Transparency: alpha channel is preserved unchanged. Grayscale conversion only affects RGB channels.
Performance: per-pixel operation, O(n) in pixel count. Multi-megapixel images convert in under a second.
Output: grayscale image still uses RGB format (R=G=B=intensity for each pixel) unless converted to a single-channel format. Some formats (PNG, JPEG) support single-channel grayscale for smaller files; others (JPEG, WebP) typically store as RGB for compatibility.
Common problems and solutions
⚠Average algorithm looks muddy
RGB average doesn’t weight channels by human visual sensitivity. Use luminance for photorealistic B&W.
⚠File size
Grayscale PNG with mode=L is smaller than RGB PNG. Some tools save as RGB regardless; for smallest files, convert to single-channel grayscale format.
⚠Loss of visual interest
Some photos rely on color for interest. Grayscale may make them flat or boring. Check the result looks good before committing.
⚠Different perception
Algorithm choice affects the result. Viewers may disagree on which \"looks right\". Luminance is most perceptually accurate but not always most visually pleasing.
⚠Colorblind simulation
Grayscale is not a proper color-blindness simulation. For accurate CVD simulation (users who have actual color vision deficiency), use the dedicated Color Blindness Simulator tool.
⚠Re-saving JPEG
Multiple grayscale conversions and JPEG re-saves compound quality loss. Use PNG for intermediate steps.
⚠Grayscale but still RGB
Converted image may still use RGB format (R=G=B for each pixel). For actual grayscale color space, output format must support it (PNG mode L, grayscale JPEG).
Image Grayscale Converter — comparisons and alternatives
Compared to Photoshop or Lightroom B&W conversion, this tool offers quick conversion with three algorithms. Photo editors have more sophisticated controls (channel mixing, color filters) for artistic B&W.
Compared to phone photo app filters, this tool is more precise and preserves image quality. Phone apps often apply additional processing; this tool does exactly one operation.
Compared to CSS filter: grayscale(100%), this tool produces an actual grayscale image file. CSS applies only in the browser display; this tool saves the processed image for use anywhere.
Frequently asked questions about the Image Grayscale Converter
▶How do I convert an image to black and white?
Upload your image, set intensity to 100%, choose luminance algorithm (default), and download. The result is a grayscale image with perceptually accurate brightness.
▶What is the difference between the three algorithms?
Luminance (BT.709): weighted by how humans see color (green contributes most), most perceptually accurate. Average: simple RGB average, can look muddy. Lightness: average of lightest and darkest channel, preserves highlights on saturated colors.
▶Can I partially desaturate?
Yes. Set intensity below 100% for partial desaturation. 50% is halfway to grayscale — colors appear muted. 25% is subtle desaturation. Useful for stylized looks that keep some color information.
▶Does the file size decrease?
Possibly. Grayscale images can be saved in single-channel formats (PNG mode L) which are smaller than RGB. But many tools save as RGB regardless, so output may be the same size as color.
▶Does grayscale preserve transparency?
Yes for PNG and WebP. Alpha channel is untouched; only RGB values are averaged or weighted. JPEG doesn’t support transparency so the alpha is lost if you save as JPEG.
▶Is luminance the same as grayscale?
Yes in the common sense. Luminance specifically refers to the perceptually weighted grayscale value. Grayscale can mean any method of reducing color to a single intensity; luminance is the most accurate method.
▶Can I use this for color blindness testing?
Grayscale simulates only the rarest form of color vision deficiency (achromatopsia). For other CVD types (deuteranopia, protanopia — most common), use the dedicated Color Blindness Simulator tool.
▶Is my image private?
Yes. All processing runs in your browser. Photos never leave your machine.
Additional resources
- ITU-R BT.709 luminance — ITU recommendation defining the luminance coefficients used by this tool.
- Perceptually accurate grayscale — Wikipedia overview of grayscale conversion methods.
- Gamma correction — Background on gamma and its importance for accurate color operations.
- MDN Canvas getImageData — Canvas API used for per-pixel operations like grayscale conversion.
- HDTV color space — Background on BT.709 color space which defines modern luminance formula.
Related tools
All Image ToolsColor Blindness Simulator
Simulate how colors and images appear to users with protanopia, deuteranopia, tritanopia, achromatopsia, and other color vision deficiencies.
Image Blur Tool
Apply Gaussian blur, motion blur, or radial blur to any image with adjustable intensity for artistic effects or privacy.
Image Brightness/Contrast
Adjust brightness, contrast, and exposure on any image with real-time preview. Free, browser-based, preserves original quality.
Image Compressor
Compress JPG, PNG, WebP images — reduce file size by up to 90%
Image Cropper
Crop any image with drag-to-select interface, aspect ratio presets (1:1, 16:9, 4:3), and precise pixel-level control.
Image Flipper
Flip images horizontally (mirror) or vertically with lossless quality, supporting all common image formats.
Learn more
Explore more tools
200+ free tools that run in your browser.
Browse all tools →