Wide-gamut color: P3 displays + @media

Modern phones / laptops have P3 screens

P3 covers ~25% more visible color than sRGB. Reds and greens are noticeably more vivid. iPhones, MacBooks, and most modern monitors are P3.

Browsers can render colors OUTSIDE sRGB if you use a color space that supports them:

.vivid-red {
  color: oklch(0.65 0.30 27);     /* high chroma — beyond sRGB on most screens */
}

OKLCH with high chroma values produces colors that sRGB can't represent. On a P3 screen, they show vivid. On an old sRGB screen, the browser falls back to the nearest sRGB equivalent.

Detect support

@media (color-gamut: p3) {
  :root { --brand-vivid: oklch(0.66 0.30 252); }   /* opt into P3-only brand */
}

@media (color-gamut: srgb) {
  :root { --brand-vivid: oklch(0.66 0.20 252); }   /* dial back for sRGB */
}

When this matters

• Brand colors that should "POP" — your hero CTA, logo accent, error red.
• Photo / illustration sites — show fidelity.

For body text and UI greys, sRGB is fine. P3 is for the bright accent colors.

Don't ship a P3-only design

A site that REQUIRES P3 to look right will look washed-out on older displays. Use the @media split or accept that sRGB users get a slightly less vivid palette — but never broken.