Color Gamut Checker
Compare sRGB, Display P3, and Rec. 2020 patches side by side. On a wide-gamut monitor, P3 and Rec. 2020 swatches should look noticeably more vivid than their sRGB counterparts. Browser detection is qualitative — it reflects CSS media-query support, not your ICC profile.
Browser-reported gamut
Primary gamut: …
Primary comparison (sRGB vs P3 vs Rec. 2020)
Red
Green
Blue
Cyan
Magenta
Yellow
Chroma saturation test (sRGB vs P3)
If the right column looks identical to the left, your display or browser is likely clipping to sRGB. A wide-gamut panel should show richer reds, greens, and cyans on the P3 side.
How to use
- Open the tool on the monitor you want to test. Dim the room and view the panel straight-on for the most honest result.
- Read the Browser-reported gamut panel at the top — it shows whether CSS detects sRGB, Display P3, or Rec. 2020 as the primary gamut, plus your color depth.
- Scroll through the Primary comparison rows. On a wide-gamut display, the P3 and Rec. 2020 swatches in each row should look more vivid than the sRGB swatch beside them.
- Check the Chroma saturation test section. If the P3 column looks identical to the sRGB column, your display or browser is likely clipping to sRGB.
- Click any swatch to fullscreen it, or use the preview panel and Fullscreen preview button for a full-panel fill.
FAQ
What is a color gamut test?
A color gamut test shows whether your display can render colors outside the standard sRGB range. This tool renders the same hue in sRGB, Display P3, and Rec. 2020 side by side. If the wide-gamut versions look richer or more saturated, your panel is likely showing a wider gamut than sRGB.
What is Display P3?
Display P3 (also called DCI-P3) is a wide color space used on modern Apple devices, many HDR monitors, and premium laptops. It covers roughly 25% more colors than sRGB, especially in reds and greens. If your MacBook or wide-gamut monitor is working correctly, P3 patches in this tool should look noticeably more vivid than sRGB.
What is Rec. 2020?
Rec. 2020 (BT.2020) is an ultra-wide color space designed for UHD and HDR video. It is larger than Display P3. Most consumer monitors cannot fully display Rec. 2020, but the comparison patches still help you see how far your panel stretches beyond sRGB.
Why do P3 and sRGB look the same on my monitor?
Several things can cause this: your display may be sRGB-only; the OS may be forcing sRGB mode; the browser may composite everything to sRGB; or your GPU driver may be limiting the output range. Try enabling wide-gamut or P3 mode in macOS Display settings, Windows HDR settings, or your monitor OSD, then reload the page.
Does this read my monitor ICC profile?
No. The tool uses CSS color-gamut media queries and rendered color patches. It reports what the browser believes about gamut support and what you can see visually — not the name or accuracy of an installed ICC profile.
Is browser-reported gamut the same as my monitor spec?
Not always. The badge at the top reflects CSS media-query results, which depend on the browser, OS color management, and the active display. A panel marketed as 100% DCI-P3 may still report sRGB here if the OS is in a compatibility mode. Trust the visual patch comparison as the primary signal.
Does this work on MacBook, iPhone, and Android?
Yes. Any modern browser that supports CSS Color Level 4 (Safari, Chrome, Edge, Firefox) can render the patches. Apple Silicon MacBooks and recent iPhones typically show clear differences between sRGB and P3. Many Android phones with AMOLED panels also display wider gamut, though OS settings vary.
Can I use this to calibrate my monitor?
It is a qualitative diagnostic — excellent for confirming wide-gamut is active, spotting color clipping, and comparing panels before purchase. For absolute color accuracy you still need a hardware calibration probe and an ICC profile.
Is anything uploaded?
No. All color patches are rendered locally in your browser. Nothing is sent to a server.
Introduction
This color gamut checker online lets you compare how your display renders sRGB, Display P3, and Rec. 2020 colors side by side — free, in the browser, with nothing to install. It answers a question that spec sheets alone cannot: is my monitor actually showing wide-gamut colors, or is everything being clipped to sRGB?
A color gamut test matters when you edit photos, grade video, design for Apple devices, or buy a new monitor advertised as DCI-P3 or HDR. Marketing claims like "100% DCI-P3" only mean something if the OS, GPU, and browser are all delivering that gamut to the panel. This tool makes the difference visible in seconds.
How to run a color gamut test
- Open the tool on the display you want to evaluate.
- Read the Browser-reported gamut badges — note which space is marked active and your color depth.
- Walk through each Primary comparison row (Red, Green, Blue, Cyan, Magenta, Yellow).
- Compare the Chroma saturation test — sRGB column vs P3 column for each hue.
- Click any swatch or use Fullscreen preview to fill the entire panel with a single patch.
What to look for
| Section | What a healthy wide-gamut display shows |
|---|---|
| Browser-reported gamut | Display P3 or Rec. 2020 marked active (not just sRGB). |
| Primary comparison | P3 and Rec. 2020 swatches look more vivid than sRGB in the same row — especially red and green. |
| Chroma saturation test | P3 column is noticeably richer than sRGB; reds deeper, greens more neon, cyans brighter. |
| Color depth | 30-bit or higher often correlates with wide-gamut workflows, though 24-bit panels can still be wide-gamut. |
If every row looks identical across all three columns, your display pipeline is almost certainly locked to sRGB — regardless of what the marketing brochure says.
Understanding color spaces
sRGB is the standard color space for the web, most office monitors, and untagged images. Every display can show sRGB; the question is whether it can show more.
Display P3 extends sRGB primarily in reds and greens. You will find it on MacBook Pro panels, iMac displays, iPad and iPhone screens, and many HDR-capable desktop monitors. Photo and video workflows targeting Apple hardware often use P3 as the working space.
Rec. 2020 is even wider — designed for UHD HDR broadcast. Few consumer monitors cover all of Rec. 2020, but the patches here still reveal how much headroom your panel has beyond sRGB.
This tool renders each space using native CSS color syntax (rgb(), color(display-p3 …), color(rec2020 …)), so the browser handles conversion and compositing. What you see is what your current display pipeline delivers.
Common use cases
- Verifying a new wide-gamut monitor — confirm P3 patches look richer before the return window closes.
- Troubleshooting Mac color settings — check whether macOS Display P3 or HDR mode is actually active.
- Comparing laptop panels — judge color vividness across MacBook, Windows ultrabook, and gaming monitors.
- Pre-purchase research — run the test on a showroom floor display to see real-world gamut behavior.
- Photo and video workflows — confirm your editing display is not silently clipping saturated colors to sRGB.
- Web design QA — verify how P3 CSS colors render for users on wide-gamut hardware.
Best practices
- Dim the room and view straight-on; ambient light and viewing angle affect perceived saturation.
- Disable night shift / blue-light filters temporarily — they shift color temperature and can mask gamut differences.
- Check OS display settings before blaming the panel: macOS "Color Profile", Windows HDR toggle, and monitor OSD gamut modes all matter.
- Reload after changing settings — gamut media queries update on page load.
- Pair this with the monitor color test, color range test, and screen resolution test for a complete display diagnostic pass.
Limitations
This is a visual and browser-level check, not a colorimeter measurement. It cannot report coverage percentages (e.g. "97% DCI-P3") or delta-E accuracy. For that, use a hardware probe such as an X-Rite or Calibrite device. The value here is speed and accessibility: anyone can run a meaningful wide-gamut sanity check in under a minute, on any device, without installing software.