Display P3 Color Gamut: The Future of Web Colors

Display P3 is a wide-gamut color space that unlocks significantly more vibrant colors than traditional sRGB. Combined with OKLCH, you can create stunning, true-to-life colors that take full advantage of modern displays.

What is Display P3?

Display P3 is a color space developed by Apple that can display approximately 25% more colors than sRGB. It's now the standard for:

• iPhone displays (since iPhone 7)
• iPad Pro displays
• MacBook Pro displays with True Tone
• iMac 5K displays
• Many modern Android devices
• High-end Windows laptops

sRGB vs Display P3 Comparison

/* sRGB blue - traditional */
.srgb-blue {
  color: oklch(0.60 0.20 250);
}

/* P3 blue - more vivid, only visible on P3 displays */
.p3-blue {
  color: oklch(0.60 0.28 250);
}

The P3 version has higher chroma (0.28 vs 0.20), making it significantly more vibrant on capable displays, while gracefully falling back to the closest sRGB color on older displays.

Browser Support for P3

✅ Safari 10+ (macOS, iOS)
✅ Chrome 111+
✅ Firefox 113+
✅ Edge 111+

Using P3 Colors with OKLCH

OKLCH makes it trivial to use P3 colors:

:root {
  /* sRGB-safe colors (chroma ≤ 0.20) */
  --primary-safe: oklch(0.60 0.18 250);
  
  /* P3 colors (chroma can go higher) */
  --primary-vivid: oklch(0.60 0.28 250);
  
  /* Extreme P3 colors */
  --neon-pink: oklch(0.70 0.32 340);
  --neon-green: oklch(0.80 0.28 140);
}

Gamut Detection

Use CSS to provide fallbacks:

.element {
  /* sRGB fallback */
  background: oklch(0.65 0.20 340);
}

@media (color-gamut: p3) {
  .element {
    /* P3 enhancement for capable displays */
    background: oklch(0.65 0.30 340);
  }
}

Best Practices

1. Start with sRGB - Ensure your design works in sRGB
2. Enhance for P3 - Add vibrancy for modern displays
3. Test on real devices - P3 colors only look right on P3 displays
4. Don't rely on P3 - Critical information shouldn't depend on P3-only colors

Practical Example

/* Brand colors with P3 enhancement */
:root {
  --brand-pink: oklch(0.70 0.22 340);
  --brand-blue: oklch(0.60 0.20 250);
}

@media (color-gamut: p3) {
  :root {
    --brand-pink: oklch(0.70 0.32 340);  /* More vivid */
    --brand-blue: oklch(0.60 0.28 250);  /* More vivid */
  }
}

.hero {
  background: linear-gradient(135deg, var(--brand-pink), var(--brand-blue));
}

Conclusion

Display P3 represents the future of web colors. By using OKLCH, you can easily create designs that look great everywhere while taking full advantage of modern, wide-gamut displays.

Learn more:

• What is OKLCH?
• CSS Color 4 Guide