Color Banding Test
Compare controlled gradients, quantization, and dithering to record visible bands, level jumps, or grain on a display.
Test settings
Gradient output and observation
JavaScript is required to render the gradient comparison.
Compare the reference, quantized, and dithered areas before choosing the closest description.
- Channel
- Grayscale
- Range
- Full range
- Levels
- 8-bit
- Dither
- None
- Readiness
- 0/4 confirmed
- Canvas backing
- —
Quantization is a comparison aid, not a measurement of panel bit depth. View the physical display for the final observation.
Banding, dithering, compression, and uniformity
| Term | What it may look like | How to use the clue |
|---|---|---|
| Banding | Stable steps or stripes inside a smooth gradient | Repeat at several ranges and channels; do not assume the panel is the only cause. |
| Dithering | Fine spatial grain or changing neighboring pixels | Can hide a boundary without increasing the true number of levels. |
| Compression | Blocks, ringing, or texture around smooth areas | Check the source and transport before blaming the display. |
| Uniformity | Large-area brightness or color variation | A panel-area issue is different from steps caused by quantization. |
Learn more
Test flow
Set native resolution and 100% zoom, then choose a channel and viewing range. Compare the browser reference with the quantized and dithered areas in fullscreen. Record only what remains visible on the physical display.
How the comparison is rendered
The page draws a smooth reference gradient, then maps channel values to 5-, 6-, or 8-bit steps. Ordered and noise dithering distribute small changes around those steps. These examples illustrate appearance; they do not reconfigure the GPU or panel.
What dithering changes
Dithering trades a hard step for small spatial or temporal variation. It can make a gradient appear smoother while adding grain, but it cannot recover information that was never present in the source or output path.
Limits and confounders
Browser rendering, GPU composition, output format, HDR mapping, FRC, local dimming, compression, and low-brightness response all affect the result. This page cannot certify native panel depth or identify one responsible component.
Privacy, implementation, and sources
Gradients and observation records are created locally in this browser. No upload, remote API, or third-party runtime is used.
Canvas draws the comparison locally with explicit channel quantization and optional ordered or noise dithering. The page does not alter system output settings.
Frequently asked questions
Are stripes in a gradient always banding?
Stable, clearly separated steps are consistent with banding, but compression, HDR mapping, browser rendering, and display processing can create similar structure.
How does dithering help?
It spreads small changes across neighboring pixels or time so a hard boundary is less obvious. It does not add real numeric levels.
Can this page prove native 8-bit or 6-bit + FRC?
No. The page can compare appearance only. Use panel specifications, EDID or measurement equipment to verify native depth.
Why can a screenshot hide banding?
A screenshot is taken before the display link, panel FRC, brightness response, and physical viewing conditions. Inspect the target screen instead.