How is a pixel decided to be grayscale?

The same test the grayscale checker tool uses: a pixel is considered near-gray if the difference between its highest and lowest RGB channel value is within the chosen tolerance (0 means an exact R=G=B match, higher tolerances allow slightly-off-gray pixels too).

What happens to colored pixels?

They're left completely unchanged, at their original color and alpha, so you can compare the highlighted gray regions directly against the rest of the untouched image.

Why would part of a colorful photo be grayscale?

Shadows, overexposed highlights, or desaturated regions from prior editing can end up with R, G, and B values that are all nearly equal, even in an otherwise colorful photo.

Does this tool report a percentage like the grayscale checker does?

No, this tool is purely visual. If you need exact counts and percentages of grayscale pixels, use the PNG Grayscale Checker instead.

Grayscale Pixels Highlighter - Find Colorless Pixels in a PNG

Overview

Introduction

This tool highlights every near-grayscale pixel in a PNG in solid red, making it easy to spot colorless regions at a glance, entirely in your browser.

It works on a plain pixel buffer, so nothing you upload is sent to a server.

What Is Grayscale Pixels Highlighter?

A visualization tool that tests every pixel's RGB channels for near-equality and tints matching pixels solid red at full opacity.

It uses the same colorless test as the grayscale checker tool, but produces a visual map instead of a numeric report.

How Grayscale Pixels Highlighter Works

For each pixel, the tool computes the maximum and minimum of its red, green, and blue values; if their difference is within the chosen tolerance, the pixel is considered near-gray and gets recolored to solid red.

Pixels outside that tolerance (genuinely colored pixels) pass through completely unchanged, both in color and alpha.

When To Use Grayscale Pixels Highlighter

Use it to audit whether an image you expect to be fully colorful actually contains unexpected gray or desaturated regions.

It's also useful when comparing a color image against a partially-recolored or partially-edited version to see exactly which areas lost their color.

Often used alongside PNG Grayscale Checker, Transparent PNG Areas Highlighter and PNG Colors Inverter.

Features

Advantages

Runs entirely client-side; nothing you upload leaves your device.
Colored pixels stay exactly as they were, making before/after comparison straightforward.
An adjustable tolerance lets you catch not just exact grays but near-gray pixels too.

Limitations

It only reports a visual highlight, not counts or percentages; use the grayscale checker tool if you need those numbers.
Images with genuinely red content in the highlighted regions could be momentarily confusing to read against the red highlight color.

Examples

Spot desaturated shadows in a photo

Input

A color photo PNG with heavy shadow areas, tolerance 5

Output

The same photo with its shadow regions tinted solid red, rest unchanged

Deep shadows often have nearly equal RGB values, so a tight tolerance catches them as near-gray.

Check a logo for accidental gray fills

Input

A brand logo PNG, tolerance 0

Output

The logo with any exactly-gray fill areas shown in red, colored areas untouched

A tolerance of 0 only flags pixels that are exactly R=G=B, catching precise grayscale fills.

Best Practices & Notes

Best Practices

Start with a tolerance of 0-5 to catch only clearly gray pixels, then widen it if you want to include near-gray tones too.
Compare against the numeric grayscale checker tool when you need exact percentages, not just a visual map.

Developer Notes

The pure highlighting math lives in a lib function operating on a Uint8ClampedArray pixel buffer, reusing the same max-minus-min channel comparison the grayscale checker tool's report function uses, just applied per-pixel as a visual overlay instead of an aggregate count.

Grayscale Pixels Highlighter Use Cases

Auditing a photo for unexpectedly desaturated regions
Verifying a colorization pass actually added color everywhere intended
Spot-checking a logo or graphic for accidental gray fills

Common Mistakes

Using a very high tolerance and flagging pixels that are only mildly desaturated, not truly gray.
Expecting numeric output — this tool is visual only; use the grayscale checker for counts.

Tips

Toggle between a tight (0-5) and looser (15-20) tolerance to see how much of the image is 'nearly' gray versus 'exactly' gray.
Download and zoom into the result if the highlighted regions are small or scattered.

Grayscale Pixels Highlighter