Gamut

As explained in CSS in Depth, Second Edition

A gamut is the range of colors that a color space, display, or other device can represent or reproduce.

A gamut is the range of colors a device can display or a color notation can represent. This matters when choosing CSS colors: a screen may support colors that an older notation cannot specify. section 11.2.1

Common display gamuts differ in reach:

• sRGB is the familiar, narrower range. Hex and rgb() values are limited to it. section 11.2.1 section 11.2.2
• Display P3 spans approximately 25% more colors than sRGB and is available on many smartphones and high-end laptops. section 11.2.1
• Rec2020 reaches about 75% of visible color, but only select monitors support it. section 11.2.1

Check before using a wider gamut

When a design calls for color beyond sRGB, choose a newer CSS color notation rather than assuming a hex value can express it. Use @media (color-gamut: p3) to apply styles only when the browser and hardware support P3. section 11.2.1

Figure 11.9 Representation of display gamut color ranges

Compare the illustrated ranges to see how much visible color lies outside sRGB. section 11.2.1

A color picker can help keep a chosen color within the desired gamut while adjusting a palette. section 11.3.4

How CSS in Depth, Second Edition covers it

How deep it goes

Defines gamut and compares three display ranges, without detailing device color reproduction.

Examples

Compares illustrated display ranges and uses @media (color-gamut: p3) as a support check.

What it assumes

Builds from familiar hex colors and defines gamut before comparing display ranges.

What you can do after

Evaluate/understand whether a CSS color notation can express the intended range and when to check for P3 support.

How it connects

Connects gamut to sRGB, Display P3, Rec2020, hex color, rgb(), and CSS color-gamut media queries.

liveBookmanning.com

Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Related concepts

• sRGBincludes · sRGB is a standardized RGB color space with defined primaries, white point, and transfer characteristics for consistent digital color representation.
• Display P3includes · Display P3 is a standardized wide-gamut color space that represents a broader range of colors than sRGB.

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.