Color Gamut
The range of colors a device, medium or color space can represent — and the reason a color on your screen may be impossible to print.
Why gamuts exist
The human eye can perceive roughly 10 million distinguishable colors — far more than any single display or printer can reproduce. Every device is limited by its primaries (the wavelengths of light it can emit) or its inks (the pigments it can lay down). The result is a gamut: a bounded region within the full range of human-visible color.
Gamuts are usually visualized as a shape on a chromaticity diagram — the CIE 1931 xy plot. Each color space occupies a triangle within that plot, representing its primaries.
Common gamuts compared
| Gamut | Coverage (of human vision) | Typical devices |
|---|---|---|
| sRGB | ~35% | Most consumer displays, most websites |
| Display-P3 | ~45% | Modern Macs, iPhones, high-end monitors |
| Adobe RGB | ~50% | Professional photography monitors, print proofing |
| Rec.2020 | ~75% | HDR televisions, cinema, UHD broadcast |
| ProPhoto RGB | ~90% | Raw photo editing, very-high-end workflows |
| CMYK (SWOP) | ~25% | Standard offset printing on coated paper |
Where gamuts differ
Wider gamuts do not simply extend uniformly — they usually widen in specific regions:
- P3 vs sRGB: wider in saturated reds, oranges and greens. Blues are similar. This is why P3 makes skin tones and warm colors feel more vivid.
- Adobe RGB vs sRGB: much wider in cyan-green region, important for print (which can reproduce some of those saturated cyans).
- Rec.2020: extends dramatically in reds, greens and especially blues compared to sRGB.
- CMYK: narrower than sRGB in saturated colors, but can reach some deep earth tones (dark browns, muted greens) that are harder for screens to display.
Out-of-gamut colors
When a color lies outside the gamut of a target device or space, it must be mapped to the nearest reproducible color. There are three common approaches:
| Method | How it works | Result |
|---|---|---|
| Hard clipping | Clamp each channel to its maximum or minimum | Fast but can shift hue noticeably |
| Per-channel scaling | Scale all channels to bring the color into range | Preserves hue but alters saturation and lightness |
| Perceptual gamut mapping | Reduce chroma while keeping lightness and hue | Best results — used by professional color tools |
OKLCH makes the third approach straightforward: reduce C (chroma) until the color fits inside the target gamut, leaving L and H unchanged. This is the technique modern CSS browsers use when rendering wide-gamut colors on sRGB displays.
Gamut in practice
Screens
Every screen has a physical gamut determined by its backlight and color filters. Cheap laptop screens often cover only ~65% of sRGB. High-end displays cover 100% sRGB plus a large chunk of P3 or Adobe RGB.
Printers have narrower gamuts than most screens and cannot reproduce many vivid colors. Neon greens, bright oranges and pure RGB blues are the most common problem colors. Designers often have to accept a compromise or use additional spot colors (Pantone).
Web
CSS uses sRGB by default, so all your colors will look the same on any device. To take advantage of P3 displays, you can specify colors in color(display-p3 ...) and the browser will use them where supported.
Practical guidance
- Ship in sRGB by default. It is universal and predictable.
-
Add P3 as an enhancement. Use
@supports (color: color(display-p3 1 0 0))to detect and apply wide-gamut colors where available. - Do not rely on very saturated colors for UI. A vivid orange in P3 might clip to a duller orange on sRGB screens.
- Test on real devices. A gamut that looks fine in a color picker may behave very differently on an actual screen or printer.
Continue reading
Frequently asked questions
What is a color gamut?
A color gamut is the complete range of colors a device, medium or color space can represent. sRGB has a baseline gamut; Display-P3 is wider; Rec.2020 is much wider. If a color lies outside a gamut, the device cannot display it faithfully.
How much wider is Display-P3 than sRGB?
Display-P3 covers roughly 25% more of the visible color range than sRGB, mainly by extending into more saturated reds, oranges and greens. Blues are similar between the two.
What happens when a color is out of gamut?
The color must be mapped to the nearest reproducible color. Hard clipping is fast but shifts hue; perceptual gamut mapping (reducing chroma while preserving lightness and hue) is usually the best approach.
Should I use Display-P3 in CSS?
Use it as an enhancement. Define your colors in sRGB as the default and add P3 versions with CSS color() syntax when you need more saturated colors. Browsers that do not support P3 will fall back to the sRGB version.