| Component name | color_gamut |
|---|---|
| In the visitorId | yes |
| structuredId group | prefs (display and accessibility preferences) |
| 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 |
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, so a result where only that part moved usually means a display or accessibility setting changed, not a different device. See 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, Edge, Safari, iOS browsers and 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.