ETEvoraTools
Image Editing

Grayscale Image

Grayscale Image applies CanvasRenderingContext2D filter grayscale(1) to the decoded image and exports a PNG. The browser derives gray output from rendered color values; this is not a color-managed scientific luminance conversion, channel mixer, duotone, threshold, or editable adjustment layer.

Runs locally — files stay on your device
#grayscale#black and white#image filter
Quick answer

Is grayscale the same as printing with black ink only?

No. Printer profiles, screening, ink, and paper affect physical output.

Grayscale maps color variation onto lightness variation

Different hues can collapse to similar gray values, reducing distinctions that were obvious in color.

How it works

The canvas filter is set to grayscale(1), the source bitmap is drawn once, and a new PNG is encoded.

Key concepts

Color-coded categories may merge

Labels should not depend on hue alone.

Rendered color management varies

Browser decoding and canvas color handling affect output.

When to use it

  • Create a quick monochrome derivative.
  • Preview color-independent differentiation.
  • Prepare a simple grayscale PNG.

When not to use it

  • Do not use for calibrated print separations.
  • Do not assume accessibility improves automatically.
  • Do not expect reversible editing.

Worked examples

Portrait

Input
Color photo
Expected output
Grayscale PNG

Hue and saturation are removed.

Red/green chart

Input
Equal-looking lightness colors
Expected output
Potentially similar grays

Labels remain important.

Transparent asset

Input
RGBA image
Expected output
Grayscale RGB with rendered alpha

Transparency can remain.

Common mistakes

Calling it true black-and-white

Many gray levels remain. Correction: Use thresholding for two-tone output.

Assuming print proof

Screen and printer pipelines differ. Correction: Use a print-profile workflow.

Discarding color source

Color cannot be reconstructed. Correction: Keep the original.

Best practices

  • Check contrast after conversion.
  • Retain labels for color-coded information.
  • Keep a color master.

Related operations and differences

Add Text Watermark to Image

Choose Add Text Watermark to Image when you need to place a text watermark in the lower-right corner.; use Grayscale Image specifically for grayscale.

Adjust Image Brightness

Choose Adjust Image Brightness when you need to increase or decrease image brightness.; use Grayscale Image specifically for grayscale.

Adjust Image Contrast

Choose Adjust Image Contrast when you need to increase or decrease image contrast.; use Grayscale Image specifically for grayscale.

Adjust Image Saturation

Choose Adjust Image Saturation when you need to control the intensity of image colors.; use Grayscale Image specifically for grayscale.

Crop Image

Choose Crop Image when you need to crop an image to an exact local pixel rectangle.; use Grayscale Image specifically for grayscale.

Flip Image Horizontally

Choose Flip Image Horizontally when you need to mirror an image from left to right.; use Grayscale Image specifically for grayscale.

Limitations and privacy

  • Fixed grayscale(1) canvas filter.
  • No channel weights, threshold, profiles, dithering, batch, or preview controls.
  • PNG output.

Selected images are decoded and processed locally in this browser.

Frequently asked questions

Is it two-color black and white?

No.

Can color be restored?

Not from the output alone.

Is alpha preserved?

Rendered transparency can remain.

Is it print calibrated?

No.

References