Demos / Wide-gamut color
Reds that don't exist in sRGB.
Every iPad sold for the last several years ships with a Display P3 panel. CSS lets you address it directly — the brightest reds, greens, and blues in P3 are visibly more saturated than the brightest reds, greens, and blues in sRGB.
sRGB vs P3, side by side
sRGB#ff0000
P3color(display-p3 1 0 0)
sRGB#00ff00
P3color(display-p3 0 1 0)
sRGB#0000ff
P3color(display-p3 0 0 1)
color-mix() tour
mix in oklabP3 ↔ P3
mix in oklchP3 ↔ P3
mix in srgbhotpink ↔ royalblue 60%
Caveats
The P3 swatches will look identical to the sRGB swatches if you're viewing this on an sRGB display — the browser clamps. On an iPad, there's a visible jump from one to the next.
color-mix() is independent of gamut — it just blends two
colors in a chosen interpolation space. Mixing in oklab
tends to keep perceived lightness even.