Wide Gamut Colors

Wide gamut colors extend beyond the traditional sRGB color space to include more saturated, vibrant colors that modern displays can reproduce. Display P3, used by Apple devices, represents approximately 25% more colors than sRGB. Design systems can leverage wide gamut for more vivid brand colors but must handle fallbacks for devices and contexts that do not support extended color spaces.

What Are Wide Gamut Colors

Wide gamut colors exist in color spaces larger than sRGB, the standard color space for web and most digital content. sRGB was designed to match typical CRT and LCD monitors. Modern OLED and advanced LCD displays can reproduce colors outside sRGB boundaries, particularly highly saturated reds, greens, and oranges.

Display P3 is the most common wide gamut color space for consumer devices. Apple has used P3 displays since iPhone 7 and has promoted P3 adoption across iOS development. Other manufacturers use similar wide gamut displays, though standardization varies.

Wide gamut enables colors impossible in sRGB. A brand wanting extremely saturated red or vibrant green may find sRGB limiting. P3 can represent these colors, but only on devices and in contexts supporting wide gamut.

How Wide Gamut Colors Work

Wide gamut color specification requires explicit color space declaration. Standard hex colors and rgb() values are interpreted as sRGB. Accessing wider gamut requires color space-aware syntax.

Wide Gamut Color Specification:

CSS (Color Level 4):
/* Display P3 color */
color: color(display-p3 1 0.5 0);

/* With fallback */
color: rgb(255, 128, 0);
color: color(display-p3 1 0.5 0);

iOS (Swift):
// P3 color
let p3Color = UIColor(displayP3Red: 1.0, green: 0.5, blue: 0, alpha: 1)

// Asset catalog: Set color space to Display P3

SwiftUI:
Color(.displayP3, red: 1.0, green: 0.5, blue: 0)

Android (API 26+):
// Color spaces
val p3 = ColorSpace.get(ColorSpace.Named.DISPLAY_P3)
val color = Color.valueOf(1.0f, 0.5f, 0f, 1.0f, p3)

Gamut Comparison:
- sRGB: Standard gamut, ~35% of visible colors
- Display P3: ~25% larger than sRGB, ~45% of visible colors
- Out-of-gamut sRGB colors: Clipped to sRGB boundary

Fallback handling ensures colors display on sRGB devices. When wide gamut colors are specified without fallbacks, browsers and systems must clip or convert to displayable values. Explicit sRGB fallbacks provide better control.

Asset catalogs on iOS can include color sets with multiple representations. A color set might include P3 representation for P3 devices and sRGB representation for older devices. The system selects appropriate representation automatically.

Gamut mapping converts wide gamut colors to smaller color spaces. Colors outside sRGB cannot be exactly represented in sRGB. Mapping algorithms approximate by reducing saturation or adjusting hue. Different algorithms produce different results.

Key Considerations

• Wide gamut requires explicit specification and fallbacks
• Not all users have wide gamut displays
• Web wide gamut support varies by browser
• Color values differ between sRGB and P3 for same perceived color
• Testing requires wide gamut and sRGB displays
• Accessibility considerations apply to highly saturated colors

Common Questions

When should design systems use wide gamut colors?

Brand requirements may necessitate wide gamut. If brand colors are extremely saturated and cannot be accurately represented in sRGB, wide gamut is necessary for accurate reproduction.

Most design systems do not need wide gamut. sRGB covers a vast range of colors sufficient for most purposes. The complexity of wide gamut management may not be justified without specific requirements.

Strategic use for accent colors can add vibrancy without system-wide complexity. A single hero color might use P3 while the rest of the palette stays in sRGB.

Evaluate actual visibility of difference. Some colors that technically fall outside sRGB have P3 representations that are barely perceptibly different. Use wide gamut where the difference is meaningful.

How do teams handle wide gamut fallbacks?

Progressive enhancement specifies sRGB first with P3 enhancement. CSS can use standard colors followed by color() function. Browsers supporting color() use P3; others use sRGB fallback.

iOS asset catalogs handle fallbacks automatically. Including both P3 and sRGB representations in color sets lets the system choose appropriately.

Token systems can define both representations. A token might have p3Value and srgbValue properties, with transformations outputting appropriate values for each platform.

Testing on sRGB devices validates fallback appearance. If fallback colors look wrong, adjustments may be needed.

What accessibility implications do wide gamut colors have?

Highly saturated colors may be difficult for some users. People with color vision deficiency may struggle to distinguish extremely saturated colors. Moderate saturation within sRGB may actually be more accessible.

Contrast ratios need verification in both color spaces. A wide gamut color pair might have different contrast characteristics than their sRGB approximations.

Wide gamut does not change fundamental accessibility requirements. WCAG contrast requirements apply regardless of color space.

Consider whether wide gamut vibrancy aligns with accessibility goals. The most accessible designs often use less extreme color choices.

Summary

Wide gamut colors extend beyond sRGB to enable more saturated, vibrant colors on modern displays. Display P3 on Apple devices is the most common wide gamut space. Design systems can use wide gamut for specific brand requirements but must provide sRGB fallbacks for devices and contexts without wide gamut support. Most design systems can work effectively in sRGB without wide gamut complexity.