How to Check if Your Monitor Supports Wide Gamut (P3)
A practical guide to understanding wide gamut color, testing your display's P3 coverage, and making informed decisions for creative work.
A practical guide to understanding wide gamut color, testing your display's P3 coverage, and making informed decisions for creative work.
Last updated: February 2026
Every display can reproduce a certain range of colors, and that range is called its color gamut. Think of the full spectrum of colors the human eye can see as a large irregularly shaped area. A color space like sRGB defines a triangle within that area, and any display that covers most of that triangle is considered an sRGB display. A "wide gamut" display covers a larger triangle, meaning it can show more saturated, vivid colors that fall outside the sRGB boundary.
The term "wide gamut" most commonly refers to displays that cover the DCI-P3 color space, which was originally developed for digital cinema projection. P3 encompasses roughly 25% more colors than sRGB, with particularly expanded coverage in reds and greens. This means a P3 display can show deeper reds, more vivid oranges, richer greens, and more saturated teals that simply cannot be reproduced on a standard sRGB monitor.
Wide gamut support has become increasingly mainstream. Apple has shipped P3-capable displays in every Mac, iPhone, and iPad since around 2016. Many Android flagship phones support P3. On the desktop, monitors from manufacturers like Dell, LG, ASUS, and BenQ routinely advertise 95% or higher P3 coverage, particularly in their creative professional lines. Even budget monitors are beginning to expand beyond sRGB, though coverage percentages vary widely.
You can quickly test whether your display and browser support wide gamut color using the DisplayPixels Color/HDR test tool.
To make informed decisions about wide gamut, you need to understand the three color spaces you will encounter most often.
sRGB was standardized in 1996 by HP and Microsoft as the default color space for the web, consumer photography, and office documents. It represents a relatively modest subset of visible colors, roughly 35% of the CIE 1931 chromaticity diagram. Nearly all web content, most photos shared online, and virtually all consumer video prior to HDR was authored in sRGB. If you are not doing specialized creative work, sRGB covers your needs perfectly well.
DCI-P3 was defined by the Digital Cinema Initiatives consortium for theatrical film projection. It shares the same white point and gamma as sRGB (approximately D65 white) but extends the gamut significantly in the red and green directions. P3 covers about 45% of visible colors, making it roughly 25% larger than sRGB. It has become the de facto standard for modern consumer wide gamut displays because it aligns with what modern display panel technology can achieve cost-effectively, and it is the target color space for HDR10 and Dolby Vision content.
Adobe RGB was created by Adobe Systems in 1998 to encompass most of the CMYK colors achievable on commercial printing presses. It covers a similar overall area to DCI-P3 (roughly 50% of visible colors) but the triangle is shaped differently, extending further into cyan-green territory while P3 extends more into deep red. Adobe RGB is most relevant for photographers whose work will be printed, particularly in high-end magazines, fine art prints, and packaging. For screen-only work, P3 is more relevant.
| Color Space | Coverage (CIE 1931) |
|---|---|
| sRGB | ~35% |
| DCI-P3 | ~45% |
| Adobe RGB | ~50% |
| Rec. 2020 | ~76% |
For a deeper technical dive into how these color spaces are defined and how they relate to each other, see our comprehensive color spaces guide.
If you work with visual content professionally, wide gamut support is not a luxury feature. It is a practical necessity for several reasons.
A significant and growing percentage of your audience is viewing content on P3-capable screens: iPhones, iPads, MacBooks, flagship Android phones, and modern Windows laptops with OLED or quantum dot displays. If you create and evaluate your work on an sRGB-only monitor, you cannot see what those users see. You might publish a photo with beautiful red tones that look even more vivid on a P3 display, or you might have clipped colors that look fine on your sRGB screen but appear garish on a wider gamut.
Modern cameras capture far more color information than sRGB can represent. When you shoot in RAW and process in Lightroom or Capture One, you are working with a large color space internally. If your monitor can only show sRGB, you are making editing decisions based on incomplete information. A wide gamut monitor reveals the full richness of your captures and lets you make more nuanced adjustments, particularly in highly saturated areas like sunsets, flowers, fabrics, and skin tones under warm lighting.
Professional video increasingly targets P3 for delivery. YouTube supports P3 color, streaming services deliver in P3 or Rec. 2020, and HDR content is mastered in wide gamut. If you grade video on an sRGB monitor, your color decisions will not translate accurately to the viewing experience of most audiences. For serious video work, a P3-capable reference monitor is essential. See our guide on choosing a monitor for visual editing work for specific recommendations.
CSS now natively supports P3 colors through the color(display-p3 r g b) function. Designers can specify colors that go beyond sRGB, creating more vivid buttons, gradients, and brand colors on capable displays while falling back gracefully to sRGB on standard monitors. Without a P3 monitor, you cannot see or evaluate these extended colors during the design process.
There are several ways to determine whether your display supports P3, ranging from quick browser checks to professional hardware measurement.
The fastest approach is to use a browser-based test. The DisplayPixels Color/HDR tool checks the CSS color-gamut media query, which reports whether the browser and display combination supports sRGB, P3, or Rec. 2020 color. It also renders test swatches using P3 color values. On a wide gamut display, you will see distinct differences between the sRGB and P3 swatches. On an sRGB-only display, the swatches will look identical because the P3 colors get clipped to the nearest sRGB equivalent.
You can also check programmatically with JavaScript:
if (window.matchMedia('(color-gamut: p3)').matches) {
console.log('Display supports P3 wide gamut');
} else if (window.matchMedia('(color-gamut: srgb)').matches) {
console.log('Display supports sRGB only');
}On macOS, go to System Settings, then Displays, then click the color profile dropdown. If your display supports P3, you will likely see a profile with "P3" in the name, or the built-in display profile will indicate P3 support. Apple's built-in displays use the "Color LCD" profile which targets P3.
On Windows, go to Settings, then System, then Display, then Advanced Display. The "Color space" field will indicate whether your display is recognized as sRGB, P3, or another gamut. You can also check in the monitor's OSD (on-screen display) menu, which often shows the gamut coverage specifications.
Check your monitor's product page or manual for gamut coverage specifications. Look for figures like "95% DCI-P3" or "98% DCI-P3." Be cautious of misleading specifications: some manufacturers list "125% sRGB" coverage, which sounds impressive but actually tells you less than a P3 percentage. A monitor covering 125% of sRGB might only cover about 88% of P3, depending on where the extra coverage falls.
For the most accurate measurement, use a hardware colorimeter like the Calibrite ColorChecker Display Plus or X-Rite i1Display Studio. These devices measure the exact colors your display can produce and generate a detailed gamut map. Software like DisplayCAL can compare this map against the P3, sRGB, and Adobe RGB color space boundaries, giving you precise coverage percentages. This is the gold standard for creative professionals.
Wide gamut support in web browsers has matured significantly. Here is the current state of support across major browsers.
Safari has led wide gamut web support since Safari 10 (2016), which makes sense given Apple's early adoption of P3 displays. Safari supports the CSS color() function, P3 color values, wide gamut images (including embedded P3 ICC profiles in JPEG and PNG), and the color-gamut media query.
Chrome added full wide gamut support starting with version 111 (2023), including the color() function, oklch(), oklab(), and proper color-managed rendering of P3 content. Firefox followed with similar support. Edge, being Chromium-based, matches Chrome's capabilities.
/* sRGB fallback for older browsers */
.button {
background-color: rgb(255, 0, 50);
}
/* P3 color for capable browsers */
@supports (color: color(display-p3 1 0 0)) {
.button {
background-color: color(display-p3 1 0 0.2);
}
}
/* Or use oklch for perceptually uniform colors */
.button {
background-color: oklch(65% 0.28 15);
}The oklch() and oklab() color functions are particularly powerful because they work in a perceptually uniform color space and can express colors beyond sRGB without needing to specify a target gamut. The browser automatically maps them to the widest gamut the display supports.
An ICC profile is a file that describes the color characteristics of a specific device, whether it is a display, printer, camera, or scanner. For monitors, the ICC profile tells the operating system and color-managed applications exactly which colors the display can produce and how they map to standardized color values.
Without a correct ICC profile, a wide gamut monitor causes more problems than it solves. If the operating system thinks your P3 display is sRGB, it will send sRGB color values directly to the panel. Since the panel's native gamut is larger than sRGB, those values get stretched across the wider space, making everything appear oversaturated. Reds look unnaturally vivid, greens look radioactive, and skin tones take on an alarming orange cast.
With the correct ICC profile loaded, the operating system's color management system (ColorSync on macOS, Windows Color System on Windows) translates sRGB content into the appropriate coordinates within the P3 gamut. The result is that sRGB content looks exactly as intended: the same saturation, the same hue, the same brightness. The wider gamut is only used when content specifically targets it.
The most accurate approach is to create a custom ICC profile using a hardware colorimeter. The process involves displaying a series of known color patches on the screen while the colorimeter measures what the display actually produces. Software then calculates the discrepancy between the expected and actual values and generates a correction profile. This process takes about 10-15 minutes and should be repeated every few weeks as displays age and their color characteristics drift. For detailed calibration instructions, see our monitor calibration guide.
When shopping for a wide gamut monitor, here are the key specifications to evaluate.
Wide gamut monitors are powerful tools, but they come with traps that catch even experienced users.
As mentioned above, a wide gamut monitor without proper color management oversaturates everything. This is the single most common complaint from people who buy a P3 or Adobe RGB monitor. The fix is straightforward: ensure the correct ICC profile is loaded and that your operating system's color management is working. On macOS, this is handled automatically for Apple displays and well-supported for most external monitors. On Windows, you may need to manually load the monitor's ICC profile in Display Settings and ensure your applications are color-managed.
Not all software respects ICC profiles. Many games, some video players, and older applications bypass color management entirely and send raw pixel values to the display. On a wide gamut monitor, this makes their output oversaturated. There is no universal fix beyond using the monitor's sRGB emulation mode when running these applications, or choosing software that supports color management.
If you edit photos in a P3 working space but your audience primarily views them on sRGB displays (which is still the majority), your vibrant P3 colors will be clipped or desaturated when displayed in sRGB. Best practice is to work in a wide gamut space for maximum flexibility, then soft-proof in sRGB before exporting. Export files tagged with the sRGB ICC profile if they are destined for the web, or in P3 if targeting Apple devices or HDR-capable displays.
For web developers, wide gamut support opens up new design possibilities. The CSS Color Level 4 specification introduced several new color functions that can express colors beyond sRGB.
The color(display-p3 r g b) function specifies colors directly in the P3 color space. The oklch(lightness chroma hue) function uses a perceptually uniform color model that naturally extends into wide gamut territory when chroma values exceed what sRGB can represent. Modern CSS also supports lab() and lch() color functions.
The practical approach for web development is progressive enhancement. Define an sRGB fallback color for all browsers, then use @supports to apply a P3 color on capable displays. The CSS color-gamut media query can also be used to conditionally load wide gamut images or apply different styles.
/* Detect wide gamut and serve P3 hero image */
.hero { background-image: url('hero-srgb.jpg'); }
@media (color-gamut: p3) {
.hero { background-image: url('hero-p3.jpg'); }
}Pair this approach with the DisplayPixels Color/HDR tool during development to verify that your wide gamut styles are rendering as expected.
Check your monitor's specifications for DCI-P3 coverage percentage. A wide gamut monitor typically covers 90% or more of DCI-P3. You can also use the DisplayPixels Color/HDR test tool in your browser, which checks whether your browser and display support the P3 color space and renders test swatches that only appear correctly on wide gamut displays.
sRGB is the standard color space for the web and most consumer content, covering about 35% of visible colors. DCI-P3 is roughly 25% larger than sRGB and is used in digital cinema and modern Apple devices. Adobe RGB is similar in size to P3 but emphasizes cyan-green tones, making it popular for print photography. Each space defines a different triangle of reproducible colors within the full spectrum of human vision.
For standard web design targeting sRGB content, a wide gamut monitor is not strictly necessary. However, CSS now supports P3 colors via the color() function, and Apple devices have displayed P3 content since 2016. If you want to design for the full range of colors modern browsers can show, a P3-capable monitor lets you see what your users with wide gamut screens will see.
Only if color management is not working correctly. A properly calibrated wide gamut monitor with an accurate ICC profile will display sRGB content exactly as intended, mapping sRGB colors to the correct coordinates within its larger gamut. Oversaturation happens when the OS or application ignores the monitor's profile and sends raw sRGB values to a wide gamut panel.
For best accuracy, use a custom ICC profile created by calibrating your specific monitor with a hardware colorimeter like the Calibrite ColorChecker Display or X-Rite i1Display. If you do not have a colorimeter, use the manufacturer-provided ICC profile as a starting point. Avoid using generic profiles from other monitors, as each panel has unique color characteristics even within the same model.