Wide Color Gamut Guide: Design for P3 and Beyond
How to design for wide color gamut displays. Use P3 colors in CSS, detect gamut support, and avoid washed-out colors on standard screens.
Published:
Tags: color, css, design
Wide Color Gamut Guide: Design for P3 and Beyond Wide color gamut has crossed the threshold from "advanced feature" to "mainstream display capability." As of 2025, the majority of phones people actually use — every iPhone since 2016, most Android flagships — have P3-capable displays. If you're designing for a general consumer audience and only delivering sRGB colors, a significant portion of your users are seeing a muted version of what's possible. This guide is practical: how to make design decisions, configure tools, write CSS, and ship assets that take advantage of wide gamut without breaking the experience for sRGB users. Display P3 Prevalence in 2025 A quick inventory of common devices and their gamut capabilities: Mobile: iPhone 7 and later: Display P3 (100% of current iPhone users)…
All articles · theproductguy.in