Display P3 CSS Fallbacks: Syntax Support and Screen Gamut

Ask separately about syntax and output gamut

CSS.supports("color", "color(display-p3 1 0 0)") asks whether this browser supports that declaration. It does not measure the display. CSS Conditional Rules describes support in terms of accepted and usable property/value behavior in the user-agent context. [1]

matchMedia("(color-gamut: p3)").matches asks about the user agent’s reported approximate output gamut. Media Queries describes sRGB, P3 and rec2020 ranges. A true result is not a calibration certificate or a measurement of every physical primary. [2]

Keep the observations separate. A parser can accept the value while your conditional enhancement deliberately keeps a fallback for the reported output condition.

Keep P3 coordinates in their own space

color(display-p3 1 0 0) has three components in the Display P3 RGB space. CSS Color 4 describes its primaries, D65 white point and sRGB transfer function. Identical component numbers do not make that space identical to sRGB. [3]

Choose a usable sRGB fallback for the actual role. Here #E04545 is a deliberate red fallback, not an exact conversion. An exact conversion claim would need a defined transformation and handling of out-of-gamut results, beyond this support example.

Keep the space name with its coordinates. Rewriting P3 components as six-digit sRGB HEX substitutes a different coordinate system, rather than merely tidying the string.

Start with a complete fallback and enhance conditionally

.sample { background-color: #e04545; }
@supports (color: color(display-p3 1 0 0)) {
  @media (color-gamut: p3) {
    .sample { background-color: color(display-p3 1 0 0); }
  }
}

The base declaration stands on its own. This enhancement requires both accepted syntax and the reported P3 condition. That gate is an explicit choice for this example, not a universal requirement for every P3 declaration. [1] [2]

Keep the fallback outside the query. A value present only inside an unmet condition leaves the example without its intended base color. Inspect the actual cascade instead of assuming the conditional block always applies.

Try the signals and actual applied background

The checkbox below enables the conditional rule; it does not alter the screen or force a media-query result. Refresh rereads support, the reported P3 condition and the patch’s computed background.

On a phone, scroll within the table. Focus its region and use arrow keys for keyboard reading.

The returned string identifies an applied CSS value. Its presence does not demonstrate physical gamut, calibration or appearance accuracy. This example performs no hardware measurement.

Review the actual reading surface and role

A supported wide-gamut background may still be unsuitable behind its label. Review text, adjacent component parts and states in the actual supported color and compositing context. This detector is not a contrast calculator.

The single-backdrop transparent-text calculator explicitly uses sRGB and excludes wide-gamut cases. Pasting P3 coordinates into its six-digit RGB field cannot establish the result for that other space.

Record the intended fallback, enhancement, browser, reported output condition and actual applied style. For color-critical reproduction, obtain appropriate physical display and color-management evidence separately. A successful feature query is one useful observation, not that larger proof.

Try two complete support decisions

These cases describe the conditional rule without inventing a screen test.