Gamut swatch

Each color appears twice at the same lightness and hue: once inside sRGB, the web's default gamut, and once more saturated, inside Display P3 but outside sRGB. On a wide-gamut screen the right-hand swatch of each pair looks more vivid. On an sRGB screen the browser maps it to the nearest color it can show, and the two may look the same.

What your screen reports

CSS says
about sRGB: no wide gamut (color-gamut: p3 does not match).Display P3 or wider (color-gamut: p3 matches).Rec. 2020 or wider (color-gamut: rec2020 matches).
matchMedia() says
needs JavaScript
High dynamic range
needs JavaScript

Three pairs

  1. Green, hue 145

    Aa sRGB token oklch(70% 0.2 145) 7.3:1 Aa P3 token oklch(70% 0.28 145) 7.5:1 as written

  2. Red, hue 29

    Aa sRGB token oklch(70% 0.17 29) 6.3:1 Aa P3 token oklch(70% 0.23 29) 6.1:1 as written

  3. Cyan, hue 200

    Aa sRGB token oklch(70% 0.11 200) 7.1:1 Aa P3 token oklch(70% 0.155 200) 7.2:1 as written

One progressive token

This swatch uses the green sRGB token, and switches to the P3 token inside @media (color-gamut: p3). On your screen it is showing the sRGB tokenP3 tokenP3 token.

Aa Progressive green 7.3:1