Display P3 Gamut Test

How this test works

Compare paired sRGB and Display P3 swatches to see whether the active browser path can render wider color values.

1. Prepare the display using the checklist below.
2. Select Start test and allow fullscreen mode if your browser asks.
3. Use the arrow keys, on-screen controls, or click the pattern to move through the test.
4. Exit the runner and save a local observation if useful.

Before you begin

• Use a wide-gamut display mode
• Enable the correct ICC profile
• Disable night light and color filters

What to look for

• Whether CSS Display P3 is supported
• Visible differences in paired red, green, and orange swatches
• Clipping or unexpected hue shifts

Compare paired sRGB and Display P3 values

This focused page asks whether the active browser path can render CSS Display P3 values differently from their sRGB comparison swatches. Review the browser capability indicator and inspect paired red, green, and orange areas. A visible difference can suggest that wider color values survive part of the path. Identical-looking pairs can arise from an sRGB-only display, a clamped browser or operating-system path, a picture mode, or values that end up looking similar on that setup. Neither outcome measures physical P3 coverage.

Use a wide-gamut display mode and the correct system profile if those are part of your intended workflow. Disable night light and temporary color filters for one controlled pass. Keep the browser window on the target display in a multi-monitor setup. Compare at normal viewing distance and brightness; side-by-side colors may look different simply because one display is brighter or uses another white point. The page is about the browser’s handling of wider CSS colors, not a complete profile validation.

Support, difference, and accuracy are separate claims

A browser may report support for the Display P3 CSS color syntax without the connected panel reproducing all those colors. A wide-gamut panel may also be driven through a mode that limits output to sRGB. Seeing a stronger red does not mean it is accurate, and seeing no difference does not prove that the panel itself is incapable of P3. Those questions require knowledge of the complete pipeline and physical measurements. The page deliberately avoids percentage coverage or Delta E claims.

Display P3 is a defined color space; it is not a synonym for HDR. Wide color and high dynamic range can overlap in products but are distinct capabilities. The HDR page reports browser dynamic-range clues and a highlight pattern, while this page isolates the CSS color-space comparison. If the concern is standard web colors rather than wider CSS values, use the sRGB page. Keeping these questions separate prevents a bright or saturated image from being misread as proof of either HDR performance or gamut coverage.

Troubleshoot a surprising comparison

If the swatches match unexpectedly, check the operating-system color profile, the browser’s color-management behavior, the monitor picture mode, and the display selected for the browser window. Change one factor, reload the pattern, and note whether the paired colors separate. If they differ unexpectedly strongly or shift hue, consider whether a vivid enhancement or incorrect profile is altering output. A second color-managed app may provide a useful cross-check, but app-to-app agreement still is not an objective measurement.

Document the browser, system, profile, monitor mode, and which paired swatches changed. The generic color gamut page explains how conversion and clipping work across the path, while this page answers the narrower P3 support question. If your work requires certified P3 coverage or accurate reproduction, use a calibrated instrument and appropriate target definitions. A screenshot or phone photo cannot capture the display’s physical gamut; it records a different image path and may itself be color-managed or compressed.

Frequently asked questions