Color Gamut Test
Visualize and compare your monitor's color gamut against sRGB, DCI-P3, and Adobe RGB. See exactly which colors your display can — and cannot — reproduce.
Detection uses the CSS Color 4 display-p3() function. If unsupported, browser falls back to sRGB.
Right-side patches look noticeably more saturated — display is wide-gamut capable.
Both sides identical — display clamps to sRGB or browser lacks P3 support.
sRGB content looks neon on wide-gamut display — disable "vivid" mode.
Why use this color tool
Three reference gamuts
Toggle between sRGB, DCI-P3, and Adobe RGB overlay triangles to compare against your display's native gamut.
Saturation sweeps
Each primary ramped from 0% to 100% saturation to spot where your display clips and rolls off.
Skin tone references
Multi-ethnic skin tone patches that fall at the edge of each gamut reveal perceptual differences.
Wide-gamut warning
Visual indicator when your monitor is rendering sRGB content as wide gamut (oversaturated) without color management.
What is color
Color gamut is the range of colors a display can reproduce. A wider gamut means more saturated, more vivid colors — but only if the content is encoded for that gamut. Showing sRGB content on a wide-gamut monitor without color management makes everything look oversaturated, like a TV in a showroom.
The three common gamuts are sRGB (the web standard, ~35% of CIE 1931), DCI-P3 (digital cinema, ~45%), and Adobe RGB (photography, ~50%). Modern wide-gamut monitors cover 95-100% of DCI-P3 and 80-90% of Adobe RGB. OLED phones often exceed 100% of DCI-P3.
Gamut coverage is one number; gamut accuracy is another. A monitor may cover 95% of DCI-P3 but render the 5% it cannot reproduce by clipping to the nearest reproducible color. This causes hue shifts at the gamut edge. Proper color management converts out-of-gamut colors gracefully.
How to test
Step 1: Select a reference gamut
Choose sRGB, DCI-P3, or Adobe RGB from the test above. The reference triangle appears overlaid on your display's native gamut.
Step 2: Inspect coverage
How much of the reference triangle is inside your display's gamut? 95%+ is excellent; under 80% means noticeable clipping.
Step 3: Run saturation sweeps
Each primary ramps from 0% to 100%. Watch where your display rolls off — that's where clipping begins.
Step 4: Check skin tones
Skin tone patches at gamut edges reveal perceptual differences. A wide-gamut monitor without sRGB clamp will oversaturate skin.
Step 5: Verify color management
Compare sRGB content on your wide-gamut monitor with and without sRGB clamp. If both look identical, color management is working.
Common causes of color issues
Panel type limits
Standard IPS covers ~99% sRGB but only 75-85% DCI-P3. Wide-gamut IPS, quantum dot, and OLED reach 95%+ DCI-P3.
Backlight spectrum
White LED backlights limit red saturation. Quantum dot and RGB LED backlights widen the gamut significantly.
No color management
sRGB content on wide-gamut displays without ICC conversion appears oversaturated. macOS handles this; Windows varies.
Wrong color mode
Monitors in Native mode render wide gamut by default. Switch to sRGB mode for web content; Adobe RGB for photography.
Frequently asked questions
Testing tips
- Enable sRGB clamp mode for web content on wide-gamut monitors to avoid oversaturation.
- Test gamut coverage at the monitor's native color temperature for accurate measurements.
- Compare skin tones with and without sRGB clamp — they reveal perceptual differences fastest.
- Use DisplayPort or HDMI 2.0+ for full 10-bit wide-gamut output; older cables limit bit depth.
Related tools
sRGB vs DCI-P3 vs Adobe RGB: Which Color Space Do You Need
When monitor shopping, you'll see gamut numbers thrown around: 99% sRGB, 95% DCI-P3, 85% Adobe RGB. What do these mean, and which one do you actually need? The answer depends entirely on what you create and consume — and choosing wrong either wastes money or limits your work.
sRGB is the universal web standard, created in 1996 for CRT monitors. It covers about 35% of human-visible colors. Every web browser, every phone, every consumer display supports sRGB. If you only browse the web, watch YouTube, and play games, sRGB is all you need. 99% sRGB coverage is the baseline for any modern monitor.
DCI-P3 is the digital cinema standard, covering about 45% of visible colors with more saturated reds and greens than sRGB. It's the standard for HDR content, modern films, and Apple's Display P3 variant (which adds sRGB's D65 white point to DCI-P3). If you edit video, especially HDR, or you consume HDR movies on your display, DCI-P3 90%+ is essential. Most modern phones and premium laptops target DCI-P3.
Adobe RGB extends further into cyan-green for print photography, covering about 50% of visible colors. If you shoot photos for print (especially CMYK reproduction) and need accurate greens, Adobe RGB matters. For everyone else, it's overkill — Adobe RGB content rendered on an sRGB display looks slightly desaturated.
Run our color gamut test to see what your display actually covers. The test overlays your monitor's native gamut against sRGB, DCI-P3, and Adobe RGB reference triangles. If your display covers 95%+ of DCI-P3, you have a wide-gamut monitor and need to think about color management. If it covers 99% sRGB only, you have a standard gamut monitor and should not be editing HDR content.
The biggest gotcha: wide-gamut monitors oversaturate sRGB content without color management. A fire-engine red photo on a DCI-P3 monitor without sRGB clamp looks radioactive. macOS color-manages automatically; Windows varies by application. Enable your monitor's sRGB mode for web content, or use applications that honor ICC profiles. Pair the gamut test with our sRGB test and HDR test to verify your full color pipeline.
Run the color gamut test now
Free, no download, runs in any browser.
Browse all tools