Wide Color Gamut Detection (P3, Rec2020)

Detecting Wide Color Gamut Displays

The color-gamut media feature detects the range of colors a display can render, letting you serve more vivid colors to capable screens.

The Query

@media (color-gamut: p3) {
  :root {
    --brand-red: color(display-p3 1 0.2 0.1);
    --brand-green: color(display-p3 0.2 0.9 0.3);
  }
}

Gamut Levels

Value	Coverage	Devices
srgb	Standard (most monitors)	Nearly all screens
p3	Wide (Display P3)	iPhone, MacBook Pro, iPad Pro, many new monitors
rec2020	Ultra-wide	Professional HDR monitors

Fallback Pattern

/* Standard sRGB fallback */
:root {
  --accent: #ff4444;
}

/* Wide color gamut upgrade */
@media (color-gamut: p3) {
  :root {
    --accent: color(display-p3 1 0.15 0.15);
  }
}

.btn-primary { background-color: var(--accent); }

Why This Matters

Display P3 covers approximately 25% more colors than sRGB. This means:

• Reds can be more vivid and saturated
• Greens are brighter and more lifelike
• Gradients have smoother transitions with less banding

Testing

In Safari DevTools, you can inspect computed colors in the P3 color space. Chrome also supports the color() function for P3 colors.

Browser Support

color-gamut is supported in Safari 10+, Chrome 58+, Firefox 110+, and Edge 79+. The color() function for defining P3 colors is supported in Safari 15+, Chrome 111+, and Firefox 113+.