Color Gamut Test

How this test works

Use paired swatches to learn how color-space conversion and clipping affect the active browser-to-display path. For a focused P3 support check, use the Display P3 test instead.

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 the correct display profile
• Disable temporary color filters
• Select a color-managed browser

What to look for

• Differences between sRGB and P3 swatches
• Clipping in highly saturated colors
• Smooth transitions in wide-gamut gradients

Understand what a gamut comparison can show

A gamut is the range of colors a system can represent or reproduce. This general comparison page places sRGB and Display P3 values beside one another so you can see how the active browser-to-display path handles color-space differences, clipping, and gradients. A visible difference is a clue about rendering, not a map of the panel’s measured color boundary. A lack of difference can reflect a limited display, a restricted picture mode, or software conversion. The focused Display P3 page is better if your only question is whether paired CSS P3 values look different.

Look for whether highly saturated colors remain distinct, whether a gradient turns abruptly flat, and whether neutral areas keep an obvious cast. The browser may report color-space support independently of what the panel can physically emit. Keep the window on one display and compare under the same profile and picture mode. The purpose is to understand the path and spot an obvious anomaly, not to declare one gamut “better” for every piece of content.

Color management matters more than maximum saturation

Color management maps defined content colors through an assumed or measured display profile to the output device. When that mapping is incorrect or bypassed, standard sRGB imagery can look oversaturated on a wide-gamut monitor. When the path clips unsupported values, two colors that should differ may appear the same. A vivid preset may increase perceived saturation without improving accuracy. Compare the standard and wide-gamut parts of the page after changing just one setting, and record the profile and monitor mode you used.

The physical display, graphics path, operating system, browser, and content all participate. A CSS color is not a direct physical measurement, and a camera photo adds another color-managed device with its own exposure and white balance. This page cannot calculate gamut volume, sRGB or P3 coverage percentages, or Delta E. Such numbers require an instrument and a controlled measurement procedure. It also does not install a profile or calibrate your display automatically.

Choose the right color page for the problem

Use the sRGB page for ordinary web-color behavior and neutral tones. Use the Display P3 page for the specific paired wide-gamut CSS comparison. Use the monitor color page if the concern is an obvious tint or channel issue independent of color-space theory. The general gamut page provides context for why those patterns can change as data moves from content through software to a panel. These pages overlap in swatches but answer different questions, which helps keep a single screen observation from becoming an unsupported accuracy claim.

If you see a surprising difference, first confirm the display profile, browser, operating-system settings, and picture mode. Repeat the comparison at normal brightness and view familiar content as well. Record exactly which swatches or gradients changed. For professional design, photography, or video, rely on calibrated profiling and appropriate proofing workflows for quantitative decisions. A browser comparison is useful for troubleshooting and education, but it cannot certify whether a product meets a marketed gamut specification or whether a particular hue is correct.

Frequently asked questions