Color Gamut: A Complete Guide to Wide Color on the Web

What Is Color Gamut

Color gamut refers to the complete range of colors that a device can display or capture. Think of it as the boundaries of a color palette--a display with a wider gamut can represent more distinct colors than one with a narrower gamut. The concept is fundamental to color management because it determines what colors are possible, what colors will be clipped or approximated, and how colors will appear across different devices.

Every color space defines a specific range of colors using a mathematical model. The most common model for digital displays is RGB (Red, Green, Blue), where colors are created by combining different intensities of these three primary lights. The specific primaries, white point, and transfer function (gamma) define a color space and determine its gamut.

The CIE 1931 color space, established by the International Commission on Illumination, represents all colors visible to the human eye as a horseshoe-shaped diagram. Any color space that can be displayed on current technology falls within this diagram as a triangle, with the three vertices representing the primaries. The larger the triangle, the wider the gamut--the more colors the space can represent.

The CSS color-gamut Media Feature

The color-gamut media feature is part of the CSS Media Queries Level 4 specification and provides a way to detect the approximate color gamut capabilities of a user's display device. This enables developers to conditionally apply styles based on whether the device supports sRGB, Display P3, or Rec.2020 color spaces.

For modern web development projects, this capability opens new possibilities for creating visually stunning experiences that adapt to the user's display hardware.

Syntax

The color-gamut feature accepts three keyword values, representing increasingly wide color spaces. When you query for a specific value, the query returns true if the display can support approximately that gamut or wider. This cascading behavior means that a device supporting Display P3 will also match a query for sRGB.

@media (color-gamut: srgb) {
 /* Styles for devices that support at least sRGB */
}

@media (color-gamut: p3) {
 /* Styles for devices that support approximately Display P3 or wider */
}

@media (color-gamut: rec2020) {
 /* Styles for devices that support approximately Rec.2020 or wider */
}

The sRGB value is the baseline--virtually every display in use today supports at least sRGB, making this query almost always true. The P3 value checks for Display P3 support, which includes most modern Apple devices, many high-end Windows displays, and newer smartphones. The Rec.2020 value targets the widest color space commonly discussed, though few consumer displays fully support it.

CSS Color Module Level 4: Modern Color on the Web

The CSS Color Module Level 4 specification brings significant advances in color capabilities to the web platform, moving beyond sRGB to support wide gamut colors, new color functions, and more precise color specification.

New Color Functions

CSS Color 4 introduces several new ways to specify colors that go beyond the traditional sRGB-based methods. These functions allow direct specification in various color spaces, enabling developers to take advantage of wide gamut displays.

The color() function allows specification in various color spaces:

/* Display P3 colors using normalized 0-1 values */
.p3-color {
 color: color(display-p3 1 0 0); /* Pure red, wider than sRGB */
}

/* A98 RGB */
.a98-color {
 color: color(a98-rgb 0.8 0.2 0.1);
}

CIELAB and LCH

The lab() and lch() functions provide access to the CIELAB color space, which is designed to be perceptually uniform--meaning the numerical distance between colors roughly corresponds to human perception of color difference.

/* CIELAB colors - perceptual uniformity */
.lab-color {
 color: lab(50% 40 20);
}

/* LCH - polar form of CIELAB */
.lch-color {
 color: lch(50% 60 30);
}

Relative Color Syntax

CSS Color 4 also introduces relative color syntax, allowing you to modify existing colors while preserving color space characteristics:

/* Lighten a color while maintaining its space */
.lightened {
 color: hsl(from var(--brand-color) h calc(s + 10%) l);
}

Implementing these modern color features is a key aspect of advanced web design that helps brands stand out with vibrant, accurate color representation across all devices.

Practical Implementation Strategies

Progressive Enhancement Approach

The most effective approach to wide color is progressive enhancement--provide excellent experiences for all users, then enhance for users with capable displays. This ensures no one is left with broken or missing content while rewarding users with better displays.

/* Foundation: Reliable sRGB colors */
.cta-button {
 background-color: #0066cc;
 color: white;
 border: 2px solid #004499;
}

/* Enhancement: More vibrant P3 colors */
@media (color-gamut: p3) {
 .cta-button {
 background-color: color(display-p3 0 0.4 0.8);
 border-color: color(display-p3 0 0.2 0.6);
 }
}

Image Considerations

Images present unique challenges for wide color support. Traditional image formats like JPEG and PNG use sRGB color spaces by default. Newer formats like AVIF and WebP can support wider color spaces, but not all browsers support them.

For images, use the picture element with source sets for different color profiles:

<picture>
 <source srcset="image-p3.avif" type="image/avif" media="(color-gamut: p3)">
 <source srcset="image-p3.jpg" type="image/jpeg" media="(color-gamut: p3)">
 <img src="image-srgb.jpg" alt="Description">
</picture>

Design System Integration

For design systems, consider building color palettes that work across color spaces. Define colors using CSS custom properties that can adapt to the display capability:

:root {
 /* Define colors that work across spaces */
 --brand-primary: #0066cc;
 --brand-primary-p3: color(display-p3 0 0.4 0.8);
}

@media (color-gamut: p3) {
 :root {
 --brand-primary: var(--brand-primary-p3);
 }
}

This strategy centralizes color definitions and makes them easy to update while maintaining compatibility with all users.

By implementing wide color support thoughtfully, you create modern web experiences that delight users with capable displays while ensuring consistent, professional results for everyone.

Sources

1. MDN Web Docs - color-gamut - Comprehensive documentation covering syntax, values, and browser compatibility
2. W3C ColorWeb CG - HDR and Wide Gamut Color on the Web - Official W3C analysis of HDR and wide color on the web
3. Wikipedia - DCI-P3 - Technical reference for the P3 color space
4. CSS Media Queries Level 4 Specification - Official W3C specification
5. CSS Color Module Level 4 Specification - Official W3C color specification
6. WebKit - Wide Gamut Examples - Practical examples demonstrating wide-gamut color