TestMyGears

Color gamut test

Compare sRGB and Display P3 color patches side by side. Use relative separation between swatches to sanity-check vivid modes and browser color paths — not to certify panel gamut volume.

Browsers clip color to sRGB. P3/Adobe RGB coordinates here are for relative side-by-side comparison — not certified gamut volume. Use OS calibration software for absolute coverage.

Red — sRGB vs P3 Paused · Press F for fullscreen
Ready

Gamut patch

Gamut unknown
Gamut comparison patch

Compare layout

Pair layout
Surround

What to look for

Relative gap visible

Paired sRGB and P3 swatches separate in hue or saturation — your browser path may be passing wider primaries for this session.

Identical pairs

sRGB and P3 look the same — usual cause is browser/OS sRGB clipping, not proof your panel lacks P3 hardware.

Run & cycle

  • ← → Cycle patches
  • F Fullscreen

Free sRGB vs Display P3 gamut compare

A browser color gamut test with paired sRGB/P3 primaries and secondaries, reference primary strips, and a dual hue sweep. Built for relative separation checks and mode A/B tests — not factory ΔE, ICC profiling, or certified P3 coverage.

Paired sRGB / P3 patches

Red through magenta compares put sRGB hex beside color(display-p3 …) targets so you can see relative depth differences in one glance.

Primaries & wide sweep

Full sRGB and P3 primary strips plus a dual rainbow sweep stress hue continuity when a pair layout alone feels ambiguous.

Capability badge

A live CSS color-gamut media-query chip reports whether the browser claims P3 or Rec. 2020 — a capability hint, never a calibrated measurement.

Fullscreen cycle

Single-select patches, side-by-side or stacked layout, surround color, labels, and auto-cycle walk the full sequence without leaving the browser.

What this gamut test can and cannot prove

Wide gamut is about chromaticity volume. Browsers and many OS paths still map output into sRGB before the panel — so identical swatches are common even on P3 hardware.

sRGB triangle

sRGB is the default web working space. Most pages, photos, and UI assets are authored here — so matching sRGB patches is often the intended outcome.

Display P3 coordinates

CSS color(display-p3 …) asks for wider primaries. If the compositor clips to sRGB, those requests collapse to the nearest sRGB neighbor and pairs look identical.

Relative vs absolute

A visible gap means this session rendered the two recipes differently. It does not quantify % DCI-P3 coverage or prove Adobe RGB volume.

color-gamut media query

The badge mirrors what matchMedia('(color-gamut: p3)') reports. OS overrides, browser flags, and HDR paths can disagree with the sticker on the box.

How to run the color gamut test

Keep the room light steady, start with Red compare, then walk secondaries and sweeps. Treat identical pairs as a pipeline clue before you blame the panel.

  1. Open fullscreen on the device under test

    Use the monitor or laptop you care about. External panels can sit in a different color path than the notebook lid you used for shopping research.

    Tip Disable Night Light / True Tone while comparing — warm tints hide subtle P3 shifts.

  2. Compare primary pairs first

    Cycle red, green, and blue compares. Note whether the P3 half looks deeper or merely identical. Orange and cyan often exaggerate relative gaps when any separation exists. See also: monitor color calibration .

    Tip Stack the layout if side-by-side glare makes one half look brighter for non-color reasons.

  3. Cross-check modes and badges

    Flip the display between sRGB and wide-gamut presets, then retest. Compare the capability badge with what you see — badge P3 with identical patches still means browser clipping. See also: RGB channel test .

    Tip Finish with the wide sweep to spot hue kinks after the solid pairs.

Limits of browser gamut checks

Not a coverage certificate

Panel makers quote DCI-P3 or Adobe RGB % from lab instruments. A webpage cannot measure those volumes through clipped browser output.

sRGB honesty first

Assume clipping until a relative gap appears. Use OS tools (DisplayCAL, vendor utilities, or factory menus) when you need absolute proof.

When to run this gamut compare

Use it when marketing claims, picture modes, or delivery color spaces disagree — not as a RMA-only verdict.

New wide-gamut monitor

  • Unbox claim lists 95%+ DCI-P3
  • Browser pairs look identical in sRGB mode
  • Switching to Display P3 / Native may open a relative gap

Recommended Document which OSD mode shows separation, then verify with a calibrator if coverage matters for work.

Photo / design delivery

  • Clients view soft proofs in Chrome or Edge
  • You export both sRGB and Display P3 masters
  • Need to see whether the browser path collapses them

Recommended If pairs match, deliver sRGB for web and keep wide-gamut files for color-managed desktop apps.

Setup tips for cleaner compares

Warm-up and ambient

Let the panel settle a few minutes and kill colored bias lighting. Ambient tints fake gamut differences.

Disable forced sRGB

Some GPU control panels force sRGB output. Turn those off before judging P3 pairs.

One change at a time

Change either the OSD mode or the browser — not both — so you know which layer opened or closed the gap.

Follow with channel isolation

If a primary looks weak rather than clipped, run RGB channels next to rule out cable or subpixel faults.

Color gamut test FAQs

Can this test prove my monitor covers Display P3?

No. Browsers typically clip outside sRGB before pixels reach the panel. Use this tool for relative differences between paired swatches in one session. For true gamut volume, use dedicated OS-level calibration software or a colorimeter.

Why do sRGB and P3 look the same on my monitor?

The OS, browser, GPU, or monitor may be forcing an sRGB path — or the panel may not cover P3. Check display color mode, disable forced-sRGB GPU options, and retest in a browser that supports CSS color(display-p3).

What does the gamut badge mean?

It reports the CSS color-gamut media query (sRGB, Display P3, or Rec. 2020). That is a capability hint from the browser, not a calibrated measurement of panel coverage.

Should web designers prefer P3 assets?

Most web delivery still assumes sRGB. Prefer P3 masters only when your pipeline is color-managed end-to-end; otherwise export sRGB for the open web and keep wide-gamut files for controlled apps.

Is Rec. 2020 the same as Display P3?

No. Rec. 2020 is a larger UHDTV gamut. The badge may report Rec. 2020 on some HDR paths, but this tool’s patches target sRGB vs Display P3 coordinates for relative comparison.

Related color & display checks

Pair gamut compares with calibration, channels, and banding when color looks wrong for different reasons.