Grayscale Image Converter — ITU-R BT.601 Luma Coefficients via Canvas ImageData per-pixel Loop
Convert any image to grayscale using the ITU-R BT.601 luma formula (0.299R + 0.587G + 0.114B) — the NTSC YIQ-heritage coefficients standardised by the CCIR in 1982 as the studio encoding parameters for standard-definition digital television (per CCIR Plenary Assembly February 1982; renamed ITU-R BT.601 when CCIR became ITU-R in 1992). These coefficients reflect the 1953 FCC NTSC standard's modelling of human perceptual response to red, green, and blue channels at the 1950s CRT phosphor primary colour points (NTSC FCC standard ratified 17 December 1953 per FCC docket 9019); they're applied widely in modern grayscale conversion code despite predating modern sRGB CRT/LCD/OLED primaries because the perceptual ratio (green ≈ 2× red ≈ 5× blue contribution to perceived luminance) is approximately stable across display generations. The conversion runs locally via WHATWG Canvas ctx.getImageData() → per-pixel Y = 0.299R + 0.587G + 0.114B → ctx.putImageData() back. Output preserves source format: PNG → PNG (RGBA alpha preserved); JPG → JPG quality 0.92 (re-encoded via canvas.toBlob with Annex K quantisation per ITU-T T.81). Files never leave the device.
How to convert an image to grayscale
- Drop your image onto the tool or click to browse. The browser's built-in decoder loads the source into Canvas at native dimensions.
- The tool auto-applies the BT.601 grayscale by default — toggle the Grayscale/Original buttons to compare the filter against the source.
- The per-pixel loop runs `Y = 0.299*R + 0.587*G + 0.114*B` for every pixel, writing the same Y value to all three R/G/B channels (alpha untouched).
- Preview the result. If specific regions look too dark or bright, post-process with brightness/contrast tools — this tool does not expose tonal-curve controls.
- Click Download to save the grayscale copy. The original stays on disk untouched — files never leave the device.
Common use cases
- Giving a set of photos a consistent black-and-white editorial look without manual colour-grading per image.
- Preparing images for print output (newsprint, monochrome laser) where colour would reproduce inconsistently across platforms.
- Reducing visual noise from brand-inconsistent hues before adding photos to a style-guided slide deck or pitch presentation.
- Producing a perceptual-luminance reference image for image-analysis tasks (edge detection, feature matching, OCR pre-processing).
- Converting photos for film-era aesthetic projects (black-and-white street photography mimicking Tri-X or Plus-X grain).
Frequently asked questions
How is grayscale calculated and why these specific weights?
The tool uses the ITU-R BT.601 luma formula `Y = 0.299R + 0.587G + 0.114B` — the NTSC YIQ-heritage coefficients from the 1953 FCC NTSC standard (FCC docket 9019, ratified 17 December 1953), later codified by the CCIR in ITU-R BT.601 in 1982 (renamed ITU-R BT.601 when the CCIR became ITU-R in 1992). The coefficients reflect human perceptual response: green contributes ~58% of perceived luminance (highest M-cone density), red ~30%, blue ~11% (lowest S-cone density). Naïve averaging `(R+G+B)/3` ignores this perceptual weighting and produces flatter, muddier results because it treats all three channels equally despite the eye's different sensitivities.
Why not the modern ITU-R Rec. 709 coefficients (0.2126/0.7152/0.0722)?
ITU-R Rec. 709 (1989-1993, cluster 14 OI 16:9 HDTV standard) uses different coefficients reflecting the wider-gamut Rec. 709 primaries. However, BT.601's NTSC-heritage 0.299/0.587/0.114 remain the dominant grayscale formula in image-processing code because most digital images are gamma-encoded sRGB (matching the NTSC heritage closely enough for perceptual grayscale). BT.709 coefficients would over-weight green and under-weight blue for gamma-encoded sRGB sources.
Is conversion reversible?
No. The grayscale step discards the chrominance information (the colour-direction component); only luminance Y remains. From a grayscale value alone, there's no way to recover the original (R, G, B) triple — the mapping `(R, G, B) → Y` is many-to-one. Keep the original colour file if you may need the colour version later.
Does file size change?
Slightly. The grayscale output still encodes three identical RGB channels per pixel (R=G=B=Y), so PNG compresses ~10-20% smaller (the three channels are identical → DEFLATE encodes the redundancy efficiently) and JPG compresses ~5-10% smaller (the chroma subsampled channels in YCbCr quantise to ~0 since Cb/Cr ≈ 0 for grayscale, reducing the bitstream slightly). For true minimum-size grayscale, encode as a single-channel PNG via a desktop tool — the browser Canvas always emits 4-channel RGBA / 3-channel YCbCr.
Is my image uploaded?
No. The decode + ctx.getImageData + per-pixel grayscale loop + ctx.putImageData + canvas.toBlob chain all run client-side via WHATWG Canvas. DevTools Network tab shows zero upload requests during conversion.
ITU-R BT.601 NTSC YIQ luma heritage + per-pixel Canvas ImageData loop
The grayscale conversion applies the canonical ITU-R BT.601 luma formula `Y = 0.299R + 0.587G + 0.114B` to every pixel via WHATWG Canvas ctx.getImageData() per html.spec.whatwg.org/#dom-context-2d-getimagedata + per-pixel for-loop iteration over the returned Uint8ClampedArray + ctx.putImageData() per html.spec.whatwg.org/#dom-context-2d-putimagedata. The three coefficients come from the 1953 FCC NTSC standard (FCC docket 9019, ratified 17 December 1953) modelling human luminosity-response weighting of the 1950s CRT phosphor primaries — green ≈ 0.587 (highest perceptual sensitivity), red ≈ 0.299 (mid sensitivity), blue ≈ 0.114 (lowest sensitivity); the ratios match the human eye's M-cone : L-cone : S-cone density and spectral sensitivity. The CCIR codified the coefficients in ITU-R BT.601 in 1982 as the studio encoding parameters for 4:3 standard-definition digital television (cluster 14 OI 4:3 standard); later HDTV via ITU-R Rec. 709 (1989-1993, cluster 14 OI 16:9 standard) uses different coefficients (0.2126R + 0.7152G + 0.0722B) reflecting the wider gamut Rec. 709 primaries, but BT.601's NTSC-heritage 0.299/0.587/0.114 remain the dominant grayscale formula in image-processing code because most digital images are gamma-encoded sRGB (matching the NTSC heritage closely enough for perceptual grayscale). Naïve averaging `(R + G + B) / 3` produces flatter, muddier results because it ignores the perceptual weighting — a pure-green pixel and a pure-blue pixel of equal RGB-byte intensity (e.g. 255) look very different to the human eye, and BT.601's weighting captures that difference. Output preserves source format: PNG sources stay PNG with alpha; JPG sources output JPG at quality 0.92 (ITU-T T.81 Annex K perceptual quantisation).
- ITU-R BT.601 luma formula `Y = 0.299R + 0.587G + 0.114B` — NTSC YIQ-heritage coefficients (FCC 1953 / CCIR ratification 1982 / ITU-R rename 1992)
- Per-pixel Canvas ImageData manipulation via WHATWG ctx.getImageData() + Uint8ClampedArray for-loop + ctx.putImageData()
- Toggle between grayscale-on and original (single-button comparison)
- Preserves source format: PNG → PNG with RGBA alpha; JPG → JPG quality 0.92 (ITU-T T.81 Annex K)
- Live preview of the filter effect before download
- Works with JPG, PNG, WebP, AVIF, BMP, GIF — any common raster format the browser decodes natively
- Browser-side via WHATWG Canvas ctx.getImageData + per-pixel loop + ctx.putImageData — no upload
- Operates in sRGB (IEC 61966-2-1:1999); source images without an embedded ICC profile are interpreted as sRGB
Free. No signup. No file uploads. Ads via AdSense (consent required).
Sources (9)
- International Telecommunication Union (ITU-R, formerly CCIR) (1982). ITU-R BT.601 — Studio encoding parameters of digital television for standard 4:3 and wide screen 16:9 aspect ratios. itu.int/rec/R-REC-BT.601 — the canonical luma formula source: `Y = 0.299R + 0.587G + 0.114B`. The coefficients derive from the NTSC YIQ colour encoding standard (FCC docket 9019, ratified 17 December 1953) modelling human luminosity-response weighting at 1950s CRT phosphor primaries; codified by the CCIR in BT.601 in 1982; renamed ITU-R BT.601 when the CCIR became ITU-R in 1992.
- Federal Communications Commission (FCC) (1953). Report and Order, FCC Docket 9019 — NTSC standard adoption. FCC docket 9019, adopted 17 December 1953 — the original NTSC standard ratifying the YIQ colour encoding with luma coefficients 0.299/0.587/0.114 derived from the 1950s CRT phosphor primary chromaticities. These coefficients survive in modern grayscale conversion code via ITU-R BT.601's 1982 codification.
- WHATWG (live). HTML Living Standard — Canvas 2D Context: getImageData(). html.spec.whatwg.org/#dom-context-2d-getimagedata — returns an ImageData object whose data property is a Uint8ClampedArray of (R, G, B, A) bytes per pixel; the per-pixel grayscale loop iterates this array in stride-4 to apply the BT.601 luma formula.
- WHATWG (live). HTML Living Standard — Canvas 2D Context: putImageData(). html.spec.whatwg.org/#dom-context-2d-putimagedata — writes the modified Uint8ClampedArray back to the canvas; the subsequent canvas.toBlob() re-encodes to PNG or JPG.
- WHATWG (live). HTML Living Standard — HTMLImageElement (browser-native raster decoding). html.spec.whatwg.org/#htmlimageelement — universal browser entry point for raster format decode into Canvas.
- WHATWG (live). HTML Living Standard — HTMLCanvasElement.toBlob(). html.spec.whatwg.org/#dom-canvas-toblob — re-encodes the canvas pixel buffer to a Blob via the browser's built-in encoder for the requested MIME type (image/png lossless, image/jpeg with quality argument for ITU-T T.81 Annex K perceptual quantisation).
- ITU-T (CCITT) Study Group VIII & ISO/IEC JTC 1/SC 29/WG 10 (JPEG) (1992). Information technology — Digital compression and coding of continuous-tone still images: Requirements and guidelines. ITU-T Recommendation T.81 (18 September 1992) / ISO/IEC 10918-1:1994 — JPEG baseline DCT bitstream; Annex K quantisation tables scale by the canvas.toBlob quality argument (0.92 in this tool's JPG output path).
- W3C (PNG Working Group) (2003). Portable Network Graphics (PNG) Specification (Second Edition). W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004 — PNG output format for sources with alpha; preserves 8-bit alpha per RGBA pixel byte-exactly through canvas.toBlob('image/png').
- International Electrotechnical Commission (IEC) (1999). Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB. IEC 61966-2-1:1999 — default 8-bit RGB colour space the Canvas 2D path operates in; source images without an embedded ICC profile are interpreted as sRGB by the browser decoder during the load step.
These are the W3C, ISO/IEC, ITU-T, and IETF specifications the tool implements or builds on. Locate them on w3.org, iso.org, itu.int, or datatracker.ietf.org.