mdn · wbamberg · Apr 5, 2022 · Apr 2, 2022 · Apr 2, 2022 · Apr 2, 2022
@@ -0,0 +1,20 @@
+---
+title: Gamut
+slug: Glossary/Gamut
+tags:
+  - Color
+  - Glossary
+---
+A color **gamut** is a subset of colors, usually representing the colors that a display or a printing device can represent.
+
+No display or printer can represent the whole range of colors that a human eye can perceive. The device _gamut_ represents the set that it supports.
+
+Traditionally, in web development, the only gamut used was _[sRGB](https://en.wikipedia.org/wiki/SRGB)_ (Standard Red-Green-Blue), where each color is described using three bytes, one for each primary color. Professional printers support a wider range of colors, making it difficult to use a web application to develop for the print industry. More, "wide-color" monitors started to reach the mass market.
+
+Since 2021, browsers have started to provide functionality for other gamuts, like _[P3](https://en.wikipedia.org/wiki/DCI-P3)_, widely used in the movie industry, and _[rec2020](https://en.wikipedia.org/wiki/Rec._2020)_.
+
+Developpers can define different set of colors for devices supporting larger gamuts using the [`color-gamut`](/en-US/docs/Web/CSS/@media/color-gamut) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries). They can describe colors outside the RGB gamut using specific CSS function like [`lch()`](/en-US/docs/Web/CSS/color_value/lch) for the LCH cylindrical coordinate system, or [`lab()`](/en-US/docs/Web/CSS/color_value/lab) for the Lab coordinate system.
+
+## See also
+
+- [_Gamut_](https://en.wikipedia.org/wiki/Gamut) on _Wikipedia_.
@@ -48,7 +48,7 @@ There are a myriad of video and audio codecs. Different browsers support differe
 
 Whether a device uses hardware or software decoding impacts how smooth and power efficient the video decoding is and how efficient the playback will be. The Media Capabilities API enables determining which codecs are supported and how performant a media file will be both in terms of smoothness and power efficiency.
 
-The Media Capabilities API provide more powerful features than say {{DOMxRef("MediaRecorder.isTypeSupported()")}} or {{DOMxRef("HTMLMediaElement.canPlayType()")}}, which only address general browser support, not performance. The API also provides abilities to access display property information such as supported color gamut, dynamic range abilities, and real-time feedback about the playback.
+The Media Capabilities API provide more powerful features than say {{DOMxRef("MediaRecorder.isTypeSupported()")}} or {{DOMxRef("HTMLMediaElement.canPlayType()")}}, which only address general browser support, not performance. The API also provides abilities to access display property information such as supported color {{glossary("gamut")}}, dynamic range abilities, and real-time feedback about the playback.
 
 To test support, smoothness and power efficiency of a video or audio file, you define the [media configuration](/en-US/docs/Web/API/MediaConfiguration) you want to test, and then pass the audio or video configuration as the parameter of the {{DOMxRef("MediaCapabilities")}} interface's `encodingInfo()` and `decodingInfo()` methods.
 
@@ -59,7 +59,7 @@ Media capabilities information enables websites to enable adaptive streaming to
 - {{DOMxRef("MediaCapabilities")}}
   - : Provides information about the decoding abilities of the device, system and browser based on codecs, profile, resolution, and bitrates. The  information can be used to serve optimal media streams to the user and determine if playback should be smooth and power efficient .
 - ScreenColorGamut
-  - : Will describe the color gamut, or the range of color, the screen can display (not currently supported anywhere).
+  - : Will describe the color {{glossary("gamut")}}, or the range of color, the screen can display (not currently supported anywhere).
 - ScreenLuminance
   - : Will describe the known luminance characteristics of the screen (not currently supported anywhere).
 

@@ -20,7 +20,7 @@ The **`VideoColorSpace`** interface of the {{domxref('WebCodecs API','','',' ')}
 ## Properties
 
 - {{domxref("VideoColorSpace.primaries")}}{{ReadOnlyInline}}
-  - : A {{domxref("DOMString", "string")}} containing the color primary describing the color gamut of a video sample.
+  - : A {{domxref("DOMString", "string")}} containing the color primary describing the color {{glossary("gamut")}} of a video sample.
 - {{domxref("VideoColorSpace.transfer")}}
   - : A {{domxref("DOMString", "string")}} containing the transfer characteristics of video samples.
 - {{domxref("VideoColorSpace.matrix")}}

@@ -11,7 +11,7 @@ browser-compat: api.VideoColorSpace.primaries
 ---
 {{DefaultAPISidebar("WebCodecs API")}}
 
-The **`primaries`** read-only property of the {{domxref("VideoColorSpace")}} interface returns the color gamut of the video.
+The **`primaries`** read-only property of the {{domxref("VideoColorSpace")}} interface returns the color {{glossary("gamut")}} of the video.
 
 ## Value
 

@@ -38,7 +38,7 @@ VideoDecoder.configure(config)
     - `colorSpace`
       - : An object. representing a {{domxref("VideoColorSpace")}}, containing the following members:
         - `primaries`
-          - : A string representing the color gamut of the video sample. One of:
+          - : A string representing the color {{glossary("gamut")}} of the video sample. One of:
             - `"bt709"`
             - `"bt470bg"`
             - `"smpte170m"`

@@ -29,14 +29,14 @@ The **`@color-profile`** [CSS](/en-US/docs/Web/CSS) {{cssxref("at-rule")}} defin
   - : Specifies the URL to retrieve the color-profile information from.
 - `rendering-intent`
 
-  - : If the color profile contains more than one rendering intent, this descriptor allows one to be selected as the one to use to define how to map the color to smaller gamuts than this profile is defined over.
+  - : If the color profile contains more than one rendering intent, this descriptor allows one to be selected as the one to use to define how to map the color to smaller {{glossary("gamut")}}s than this profile is defined over.
 
     If used, it must be one of the following keywords:
 
     - `relative-colorimetric`
-      - : Media-relative colorimetric is required to leave source colors that fall inside the destination medium gamut unchanged relative to the respective media white points. Source colors that are out of the destination medium gamut are mapped to colors on the gamut boundary using a variety of different methods.
+      - : Media-relative colorimetric is required to leave source colors that fall inside the destination medium {{glossary("gamut")}} unchanged relative to the respective media white points. Source colors that are out of the destination medium gamut are mapped to colors on the gamut boundary using a variety of different methods.
     - `absolute-colorimetric`
-      - : ICC-absolute colorimetric is required to leave source colors that fall inside the destination medium gamut unchanged relative to the adopted white (a perfect reflecting diffuser). Source colors that are out of the destination medium gamut are mapped to colors on the gamut boundary using a variety of different methods.
+      - : ICC-absolute colorimetric is required to leave source colors that fall inside the destination medium {{glossary("gamut")}} unchanged relative to the adopted white (a perfect reflecting diffuser). Source colors that are out of the destination medium gamut are mapped to colors on the gamut boundary using a variety of different methods.
     - `perceptual`
       - : This method is often the preferred choice for images, especially when there are substantial differences between the source and destination (such as a screen display image reproduced on a reflection print). It takes the colors of the source image and re-optimizes the appearance for the destination medium using proprietary methods.
     - `saturation`

@@ -18,11 +18,11 @@ The **`color-gamut`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web
 The `color-gamut` feature is specified as a keyword value chosen from the list below.
 
 - `srgb`
-  - : The output device can support approximately the [sRGB](https://en.wikipedia.org/wiki/SRGB) gamut or more. This includes the vast majority of color displays.
+  - : The output device can support approximately the [sRGB](https://en.wikipedia.org/wiki/SRGB) {{glossary("gamut")}} or more. This includes the vast majority of color displays.
 - `p3`
-  - : The output device can support approximately the gamut specified by the [Display P3](https://www.color.org/chardata/rgb/DisplayP3.xalter)  Color Space or more. The p3 gamut is larger than and includes the srgb gamut.
+  - : The output device can support approximately the {{glossary("gamut")}} specified by the [Display P3](https://www.color.org/chardata/rgb/DisplayP3.xalter)  Color Space or more. The p3 gamut is larger than and includes the srgb gamut.
 - `rec2020`
-  - : The output device can support approximately the gamut specified by the [ITU-R Recommendation BT.2020 Color Space](https://en.wikipedia.org/wiki/Rec._2020) or more. The rec2020 gamut is larger than and includes the p3 gamut.
+  - : The output device can support approximately the {{glossary("gamut")}} specified by the [ITU-R Recommendation BT.2020 Color Space](https://en.wikipedia.org/wiki/Rec._2020) or more. The rec2020 gamut is larger than and includes the p3 gamut.
 
 ## Examples
 

@@ -899,7 +899,7 @@ The first four components are required; everything from `CC` (chroma subsampling
               <td><code>09</code></td>
               <td>
                 BT.2020; BT.2100. Used for ultra-high definition (4K) High
-                Dynamic Range (HDR) video, these have a very wide color gamut
+                Dynamic Range (HDR) video, these have a very wide color {{glossary("gamut")}}
                 and support 10-bit and 12-bit color component depths.
               </td>
             </tr>