Display P3
Embed This Widget
Add the script tag and a data attribute to embed this widget.
Embed via iframe for maximum compatibility.
<iframe src="https://colorfyi.com/iframe/glossary/display-p3/" width="420" height="400" frameborder="0" style="border:0;border-radius:10px;max-width:100%" loading="lazy"></iframe>Paste this URL in WordPress, Medium, or any oEmbed-compatible platform.
https://colorfyi.com/glossary/display-p3/Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/glossary/display-p3/)Use the native HTML custom element.
A wide-gamut color space developed by Apple, offering approximately 25% more colors than sRGB, used in modern displays.
Display P3 is based on the DCI-P3 cinema standard and was adopted by Apple starting with the iMac in 2015. It covers a significantly larger range of colors than sRGB, particularly in the red and green regions, enabling more vivid and lifelike imagery. CSS Color Level 4 supports Display P3 via the color() function, and modern browsers can render P3 colors on compatible displays. When designing for the web, it is best practice to provide both sRGB fallbacks and P3-enhanced colors for users with wide-gamut displays.
Try It Out
Related Articles
CSS color-mix(): Blend Colors Natively in the Browser
Learn CSS color-mix() to blend colors natively in the browser. Master syntax, color spaces, practical use cases, and create dynamic palettes without JavaScript.
Perceptual Color Spaces: Lab, LCH, Oklab, OKLCH
Explore perceptually uniform color spaces — CIE Lab, LCH, Oklab, and OKLCH. Learn how each was designed, where it excels, and which to use for CSS and design work.
Color Management Workflow: From Screen to Print
Master color management from monitor calibration to print proofing. Learn how ICC profiles, soft proofing, and a consistent workflow keep colors accurate from screen to print.
Color Gamut Explained: sRGB, P3, and Rec. 2020
Understand color gamuts—sRGB, Display P3, and Rec. 2020—and how to use CSS wide-gamut colors with @media (color-gamut) for modern displays. Practical examples included.
What Is a Color Gamut? Everything You Need to Know
Understand color gamut — the range of colors a device can display or print. Compare sRGB, Display P3, and Rec. 2020 gamuts for web and print design.
What Is Pantone? The Universal Color Language
Understand the Pantone Matching System — how Pantone numbers work, PMS vs CMYK differences, Color of the Year tradition, and when to specify Pantone colors.