Display P3

As explained in CSS in Depth, Second Edition

Display P3 is a standardized color gamut with a wider range of colors than sRGB, commonly supported by modern displays.

Display P3 is a color gamut: a range of colors a device can show. It spans approximately 25% more colors than sRGB and is available on most smartphones and many high-end laptops. A gamut is not a CSS color notation or a color space; those describe ways to represent and arrange colors. section 11.2.1

Choose how to use that extra range based on the result you need:

• Use a newer wide-gamut CSS color notation to specify colors beyond sRGB. Older notations can express only sRGB colors, even on a P3 display. section 11.2.1 section 11.2.2
• Let the browser approximate a specified P3 color on a display that cannot show it. The result may be close, but it will not be exact. section 11.3 section 11.2.2
• Use `@media (color-gamut: p3)` when styles should apply only where P3 color is supported. section 11.2.1

Check a color in DevTools

In a wide-gamut color picker, the thin white line marks the sRGB limit. Colors beyond it can belong to Display P3: an sRGB monitor will show its closest approximation instead. section 11.3

Figure 11.9 Representation of display gamut color ranges

Compare the represented ranges of sRGB, Display P3, and Rec2020 to see what a wider gamut adds. section 11.2.1

How CSS in Depth, Second Edition covers it

How deep it goes

Defines its range relative to sRGB, then explains support detection and out-of-gamut approximation without detailing its underlying color specification.

Examples

Uses a gamut-range figure and a DevTools color picker whose white line separates sRGB colors from wider-gamut choices.

What it assumes

Introduces gamut and color space from their basic meanings while placing them in the context of CSS color notations.

What you can do after

Evaluate/understand it when choosing a wide-gamut CSS color and deciding whether to test for P3 support.

How it connects

Connects Display P3 to sRGB, Rec2020, color spaces, CSS color notations, and the color-gamut media query.

liveBookmanning.com

Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Related concepts

• gamutkind of · A gamut is the range of colors that a color space, display, or other device can represent or reproduce.
• sRGBcontrasts with · sRGB is a standardized RGB color space with defined primaries, white point, and transfer characteristics for consistent digital color representation.
• OKLCHused by · OKLCH is a perceptually uniform cylindrical color space representing color by lightness, chroma, and hue.

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.