Browser Color Gamut Test - Online P3 or sRGB?

This tool runs three simultaneous checks: (1) JavaScript CSS.supports('color', 'color(display-p3 1 0 0)') to verify P3 CSS syntax support, (2) window.matchMedia('(color-gamut: p3)') to query display hardware capabilities, and (3) a visual CSS @supports test that renders P3 color swatches. The visual comparison lets you see the actual difference — P3 swatches appear more saturated on compatible displays.

If both sRGB and P3 swatches appear identical, your setup is limited to the sRGB color space. This could be because: (a) your monitor only supports sRGB (most standard monitors), (b) your browser doesn't support the color(display-p3 ...) CSS function, or (c) your operating system's color management is mapping P3 values down to sRGB. To see the difference, you need a P3-capable display (like a MacBook Pro or iMac 5K) and a compatible browser (Safari 10+ or Chrome 86+).

Safari has supported P3 since version 10.0 (released 2016). Google Chrome added support in version 86 (2020). Microsoft Edge (Chromium-based) also supports P3 from version 86+. Firefox has experimental support behind flags. On the mobile side, Safari on iOS 10+ and Chrome on Android (with P3 hardware) can render P3 content. The browser must also be running on a P3-capable display for the full effect.

DCI-P3 is the original standard created for digital cinema projection, using a 2.6 gamma and D65 white point with a different luminance response. Display P3 (used in this test) is Apple's adaptation — it uses the same RGB primaries as DCI-P3 but pairs them with an sRGB-like 2.2 gamma and D65 white point, making it compatible with existing sRGB workflows while offering a wider color gamut. Display P3 is what modern Apple devices, CSS, and web standards implement.

Yes! You can use the color(display-p3 r g b) function in CSS with an sRGB fallback for older browsers. Example: background: #FF0000; background: color(display-p3 1 0 0);. Browsers that support P3 will show the more vibrant color; others will use the sRGB fallback. You can also use @supports (color: color(display-p3 1 0 0)) { ... } for conditional styling. This progressive enhancement approach ensures all users see appropriate colors.

As of 2024, a significant portion of web traffic comes from devices with P3 displays — all modern iPhones, iPads, MacBooks, iMacs, and many Android flagships. By using P3 colors with sRGB fallbacks, designers can deliver richer, more vibrant experiences to users with capable hardware without breaking the experience for others. It's especially impactful for brand colors, hero images, gradients, and any design where vivid reds and greens make a difference. Major brands like Apple, Spotify, and Airbnb already leverage wide-gamut colors.

The window.matchMedia('(color-gamut: p3)') query reflects the operating system's reported display capabilities. On macOS and iOS, this is generally accurate — if you have a P3 display, it returns true. On Windows, results depend on the installed ICC profile and display driver. Some wide-gamut monitors may not report P3 capability correctly on Windows. For the most reliable assessment, combine the media query with the visual swatch test above — if the P3 swatches look more vivid, your system supports it regardless of what the API reports.

Modern GPUs (integrated or dedicated) from the last decade all support 10-bit color output and wide gamut. The GPU itself rarely limits color gamut. The bottleneck is usually the display panel (most laptop and budget monitors are sRGB-only) and the operating system's color management. macOS has robust system-level color management; Windows requires proper ICC profiles and sometimes manual configuration. For the best P3 experience, use a display that explicitly advertises P3 or wide-gamut coverage.

Display P3 and HDR are related but distinct concepts. Display P3 defines the range of colors (chromaticity) a display can reproduce — it's about color saturation. HDR (High Dynamic Range) defines the brightness range (luminance) — it's about contrast between dark and bright areas. 10-bit color refers to bit depth (smoothness of gradients). A display can support P3 without HDR, or HDR without full P3. However, premium displays (like Apple's XDR) combine all three: P3 wide gamut + HDR + 10-bit depth for the best visual experience.

Not in a meaningful way. A color that's defined in sRGB already fits within the sRGB gamut — converting its coordinates to P3 doesn't make it more vibrant; it just represents the same color in a different coordinate system. To truly take advantage of P3, you need original content authored in P3 — photos shot in wide gamut, graphics designed with P3 color values, or CSS colors specified directly in the color(display-p3 ...) function with values that exceed sRGB boundaries. Think of it like upscaling a low-res image — you can't create detail that wasn't captured originally.