toolhq.io

All posts
5 min readby Jameel Haider

sRGB, P3, and color gamuts

A brand color that looks electric on a new phone can look flat and gray on an older laptop. Nothing is broken; the two screens simply reproduce different ranges of color. That range is called a gamut, and understanding it is the difference between colors that pop on capable hardware and colors that quietly clip.

What a gamut actually is

A color gamut is the set of colors a system can represent or display. Human vision covers a large horseshoe shaped region of color. Any device reproduces only a triangle inside that horseshoe, with the three corners defined by its red, green, and blue primaries. A wider triangle means more saturated, more vivid colors are reachable, especially in the greens and reds.

A gamut is not about having more shades; 8 bit sRGB and 8 bit P3 both offer 256 steps per channel. It is about how far apart the endpoints sit. Wide gamut spreads the same number of steps across a larger area.

The three gamuts you will meet

  • sRGB is the long standing default of the web. Almost every device can show it, and it is the safe baseline. Its triangle is the smallest of the three.
  • Display P3 is roughly 25 percent larger than sRGB, mostly extending into richer reds and greens. It is standard on recent phones, tablets, and laptops and is the practical wide gamut target for the web today.
  • Rec. 2020 is far wider still, aimed at high end video and HDR. Very few displays can show all of it yet, so it is more a destination than a daily working space.

Using P3 in CSS with a fallback

CSS lets you specify colors directly in a wide gamut with the color() function. The important discipline is to always provide an sRGB fallback first, because a browser or display that cannot handle P3 needs something to fall back to.

.brand {
  color: #0a84ff;                      /* sRGB fallback */
  color: color(display-p3 0 0.52 1);   /* wider, if supported */
}

A browser that understands the second line and runs on a P3 capable screen uses the vivid version. Everything else keeps the first line. You can also gate wider styles behind a feature query:

@media (color-gamut: p3) {
  .brand { color: color(display-p3 0 0.52 1); }
}

Clipping and what it means for design

When a P3 color is shown on an sRGB only display, it is clipped into the smaller triangle. The nearest reproducible color is substituted, which usually means a loss of saturation. This is why a design should never rely on wide gamut color to carry meaning. Keep contrast, state, and legibility working in sRGB, and treat P3 as an enhancement that makes capable screens look better rather than a requirement.

You can convert and inspect colors in the Color Converter & Contrast Checker, which runs in your browser so nothing you test is uploaded. For the perceptual color space that pairs naturally with wide gamut work, see OKLCH and modern CSS colors, and for the underlying format conversions, convert HEX, RGB, and HSL colors.

The practical takeaway: a gamut is the triangle of colors a device can show, P3 is the realistic wide target today, and you unlock it safely by declaring an sRGB value first and the P3 value second so older screens never get left blank.