sRGB vs Display-P3 — differences, a side-by-side table, and when to use each.
For twenty years every web color lived in sRGB. Modern phone and laptop screens can display noticeably more — the Display-P3 gamut — and CSS now lets you ask for those extra colors. The question is what P3 buys you, and how to use it without breaking older screens.
sRGB is the default color space of the web, standardized in 1996 to match typical CRT monitors. Every un-tagged hex, rgb() and hsl() value is sRGB. Its gamut is the safe common denominator: every device made this century can display all of it, which is exactly why it remains the baseline.
Display-P3 is a wide-gamut color space derived from the DCI-P3 cinema standard, popularized by Apple displays and now common on quality phones, tablets and laptops. It covers roughly 25% more visible colors than sRGB — mostly richer greens, more vivid reds and oranges — addressable in CSS via color(display-p3 r g b) and reachable through oklch().
| sRGB | Display-P3 | |
|---|---|---|
| Role | Universal baseline | Wide-gamut upgrade |
| Gamut size | Standard | ≈25% more visible colors |
| Biggest gains | — | Saturated greens, reds, oranges |
| CSS syntax | HEX, rgb(), hsl() | color(display-p3 …), oklch() |
| Hardware support | Every screen | Modern quality displays |
| Fallback story | Is the fallback | Needs an sRGB fallback for old screens |
Stay in sRGB for brand-critical UI colors that must look identical everywhere, for anything exported to formats/tools that assume sRGB, and as the fallback layer in progressive enhancement. If you never specify otherwise, sRGB is what you're already using — and that's fine.
Reach for Display-P3 when vividness is the point: photography, gradients, hero art, brand accents that should glow on modern screens. Ship it as a progressive enhancement — declare the sRGB value first, then override with color(display-p3 …) or oklch() inside an @supports block.