# color_gamut

> The widest colour range the display and browser support, from the color-gamut media query: rec2020, p3 or srgb.

Source: https://whiskerjs.com/signals/color-gamut/ (last updated 2026-10-26)

**color_gamut at a glance (from the library code, signalsVersion 9)**

| Field | Value |
| --- | --- |
| Component name | `color_gamut` |
| In the visitorId | yes |
| structuredId group | [prefs (display and accessibility preferences)](https://whiskerjs.com/docs/identifiers/#structuredid) |
| Hashing | plain value; a digest only when longer than 128 characters or not printable ASCII |
| Excluded under | no browser class |
| Inner timeout | 1000 ms |
| Added in | [signalsVersion 1](https://whiskerjs.com/whats-new/) |

> **In plain words:**
>
> Screens can show a wider or narrower range of colours. Ordinary monitors cover the standard range (sRGB); many newer phones, laptops and monitors cover a wider one (Display P3), and a few even more (Rec. 2020). The browser lets pages ask which range the screen supports. WhiskerJS records the widest one that matches.

## What it reads

The CSS `color-gamut` media feature through `window.matchMedia()`.

## How the technique works

WhiskerJS asks three queries in this order and reports the first that matches:

| Order | Query | Value reported |
| --- | --- | --- |
| 1 | `(color-gamut: rec2020)` | `rec2020` |
| 2 | `(color-gamut: p3)` | `p3` |
| 3 | `(color-gamut: srgb)` | `srgb` |

A wider gamut also matches the narrower queries, so asking from widest to narrowest gives the real capability. If none matches, the component is `unavailable` with `no_match`.

## Why it helps

It separates wide-gamut displays (common on recent Apple devices and high-end phones and monitors) from standard ones. Only three values exist, so it tells few devices apart alone, but it is a hardware property that rarely changes.

On your server, read it together with the other four preference components. They share the `prefs` part of the [structuredId](https://whiskerjs.com/glossary/#structured-id), so a result where only that part moved usually means a display or accessibility setting changed, not a different device. See [Comparing two results](https://whiskerjs.com/docs/identifiers/#comparing-two-results).

## Stability

Stable for a given main display. It changes when the browser window is on a different monitor, or the user changes the primary display.

## Browser support and what blocks it

Current [Chrome](https://whiskerjs.com/browsers/chrome-desktop/), [Edge](https://whiskerjs.com/browsers/edge/), [Safari](https://whiskerjs.com/browsers/safari-macos/), [iOS browsers](https://whiskerjs.com/browsers/safari-ios/) and [Firefox](https://whiskerjs.com/browsers/firefox/) answer `color-gamut` queries. A browser that does not understand the feature matches none of them and reports `no_match`. No browser class excludes it.

## Privacy

It describes the display hardware, shared by everyone with similar screens. It is not a personal setting.

## How WhiskerJS handles noise and failures

| Status | ruleId | When |
| --- | --- | --- |
| `ok` |   | `rec2020`, `p3` or `srgb` |
| `unavailable` | `no_api` | no `matchMedia` |
| `unavailable` | `no_match` | no query matched |
| `blocked` | `threw`, `security_error` | `matchMedia` throws |
| `excluded` | `caller_excluded` | you excluded it |
| `timed_out` | `timeout`, `aborted` | budget or abort |

## Example value

All three headless test browsers in the container reported `srgb` (a virtual display). A recent MacBook or iPhone typically reports `p3`.

## Questions and answers

### Why does my MacBook report p3?

Many recent Apple displays and phones cover the Display P3 colour space, and the browser reports that through the color-gamut media query. Most other monitors report srgb.

### Can color_gamut change on the same computer?

Yes, when the browser window moves to another monitor with a different gamut, or a different screen becomes the main display.

## Related pages

- [dynamic_range](https://whiskerjs.com/signals/dynamic-range/): HDR or standard, the other display capability query.
- [color_depth](https://whiskerjs.com/signals/color-depth/): Bits per pixel from screen.colorDepth.
- [screen_resolution](https://whiskerjs.com/signals/screen-resolution/): The screen size.