Gradient Banding Test

Look for visible steps in smooth gradients and find out whether the banding comes from the image, the graphics pipeline, or the panel.

Go to the test

Inspect fullscreen browser gradients. Use arrow keys to navigate patterns.

Are the bands already in the picture?

A picture made from a few gray values has visible boundaries before it reaches your monitor. Compare the two rows below: the top contains 256 source values; the bottom deliberately contains fewer. These are teaching references drawn by this site, not photos of a good or bad display.

Upper row: 256 values, from RGB (0, 0, 0) to (255, 255, 255).

Upper row: 256 source gray values. Lower row: 16 deliberately separated source gray values.
Lower row: 16 values. Its 15 boundaries are part of the source image.

The preview fits the available width. Resizing and your browser's display path can change how its steps look. The original PNG is always 512 × 256 image pixels.

Download this reference PNG

Read the numbers before judging the screen

Lower-row codes: 0, 17, 34, 51, 68, 85, 102, 119, 136, 153, 170, 187, 204, 221, 238, 255.

All three RGB channels use the same code. For example, choosing 16 values makes neighboring codes differ by 17. Reducing the number of source values creates wider plateaus even on an otherwise functioning display.

A code of 128 is not a measurement of half the screen's light output. The 256-value row is also finite; it is not a perfectly continuous ramp. Neither row can identify whether your panel uses 6-bit, 8-bit, 10-bit, or temporal dithering.

How this site's reference is made

The top half uses every integer gray code from 0 through 255, each for two image columns. The bottom divides the same width into N equal groups and uses round(group × 255 ÷ (N − 1)), starting at group 0. Every pixel is opaque. The preview and download use the same PNG; there is no automatic display assessment.

The browser version writes these values into sRGB ImageData and exports PNG. The lossless file preserves the encoded reference; a viewer may still scale or color-manage how it appears.

Make a comparison that answers one question

  1. A: open the downloaded PNG in your browser. Record its image zoom, OS display mode, monitor preset, and connection. Use 100% image zoom where available and note any fit-to-window resizing. The fullscreen gradient above is a separate pattern; do not use it as the A image in this comparison.
  2. B: open that same PNG in another viewer. Keep the monitor, display settings, and viewing size unchanged. Compare the upper and lower rows separately. Record any sizing or color-management difference you cannot match.
  3. A again: return to the PNG in the browser. Check whether its original appearance returns. If another setting or viewing size changed, the comparison is inconclusive; repeat with that difference recorded.
Use the comparison to narrow the next check, not to assign a panel grade.
ObservationWhat it supportsNext action
The lower row has the chosen number of plateaus in both viewersThose boundaries are deliberately encoded in the file.Do not count these reference boundaries as display defects. Describe any additional pattern separately.
The same PNG looks different between viewers at matching sizeThe rendering or color-management paths may differ; the source file did not change.Record both viewers and modes, then return to the first. Do not replace the monitor based on this comparison alone.
A change appears only after changing one output or picture settingThat configuration affects the appearance under these conditions.Restore the original setting and check repeatability. Keep the exact before/after setting in your notes.
Both viewers show the same unexpected band in the upper rowThis does not isolate the panel; the source and much of the display path are still shared.If available, compare a second supported input or another display, and record what remained constant. Use suitable measurement equipment for bit-depth or color-accuracy claims.

Keep an observation someone else can repeat

“Reference: 256 vs __ values. Viewer A at __ zoom: __. Viewer B at __ zoom: __. Same display mode/preset: __. Returning to A: __. The unexpected band was on the __ row at __.” Write “not checked” for comparisons you did not perform.

Save findings from the fullscreen test in its observation form. Keep source-reference comparisons in the notes and review them in saved observations or the support report. A camera photo can add information about location, but its processing is another variable.

Background

Why smooth gradients break into bands

A smooth gradient from dark to light should look like one continuous ramp. Banding is when you can see distinct steps instead, like contour lines across a sky or around a light source in a dark scene. It happens when there are not enough distinct levels between two colors, or when a step in the image pipeline throws some of them away.

Bit depth: how many steps there are

An 8-bit signal has 256 levels per color channel, which gives about 16.7 million colors. A 10-bit signal has 1,024 levels per channel, or about 1.07 billion colors. A full black-to-white ramp across a 2,560-pixel-wide screen at 8 bits has one step every 10 pixels. That is normally invisible, but a subtle ramp, say from dark blue to slightly lighter blue, may only cover a dozen levels across the whole screen, and those steps become wide visible bands.

Many panels advertise 10-bit color but use an 8-bit panel with FRC (frame rate control), which alternates between neighboring shades to simulate the levels in between. Some budget panels are 6-bit with FRC. FRC usually works well, but it can add faint shimmer in dark gradients.

Where banding comes from

  • The source itself. Heavily compressed streaming video, 8-bit images that were edited aggressively, and low-quality JPEGs often already contain the bands. The downloadable reference on this page lets you check another viewer or device against the same file.
  • Color management. Converting colors between profiles in an 8-bit pipeline rounds values and can merge neighboring levels.
  • Calibration in the graphics card. A calibration curve loaded into the GPU reduces the number of distinct output levels if the output is 8-bit without dithering.
  • Display processing. Dynamic contrast, sharpness, and some picture modes stretch the tone curve and widen existing steps.
  • OLED near black. Some OLED panels struggle to separate the very darkest shades and show blocky steps in dark gradients.

How to reduce it

  • Check whether the bands are in the content: open the same file in a different app or on a different screen.
  • If your monitor and graphics card both support it, set 10-bit output (NVIDIA: Output color depth; AMD: Color Depth) and keep the panel’s FRC on.
  • Turn off dynamic contrast, black equalizer, and heavy sharpening in the monitor menu.
  • If you calibrate, prefer monitors that store the calibration in their own hardware lookup table over adjustments in the graphics card.
  • For video, players such as mpv offer debanding filters that smooth bands already present in the file.

Common questions

Does banding mean my monitor is 6-bit?
Not necessarily. Many 8-bit and 10-bit displays show banding when the source or the processing chain is the problem. Testing the same file in another viewer and checking your display settings is a better first step than guessing the panel’s bit depth.
Why do I see banding in YouTube or Netflix skies?
Streaming services compress video heavily, and smooth skies and dark fades are the hardest scenes to compress. The bands are usually in the stream itself, and a higher-quality stream often reduces them.
Will HDR remove banding?
HDR video uses 10-bit or higher encoding, which helps, but HDR also stretches brightness over a wider range. Poorly encoded HDR can still band, especially in dark scenes.

References