Senior LevelCSS & Modern Layouts
How do wide-gamut color spaces (Display P3, Rec.2020) work in CSS?
❓ Interview Prompt: Explain sRGB limitations, Display P3 gamut, the color() function, and gamut mapping strategies.
sRGB Limitations:
Traditional CSS colors (hex, rgb, hsl) are limited to the sRGB gamut — only about 35% of colors visible to the human eye.
Wide-Gamut in CSS:
•
`color(display-p3 r g b)`: Access the P3 gamut (~50% larger than sRGB). Supported on modern Apple displays and flagship Android screens.
•
`oklch(lightness chroma hue)`: Perceptually uniform color space with wider-than-sRGB gamut.
•
`color(rec2020 r g b)`: Even wider gamut for HDR displays.
Gamut Mapping:
Browsers automatically map out-of-gamut colors to the closest displayable color. Use @media (color-gamut: p3) to detect P3-capable displays.
Code Implementation Example
css
:root {
/* Standard sRGB fallback */
--brand-red: #ff4444;
/* Wide gamut P3 for capable displays */
@media (color-gamut: p3) {
--brand-red: color(display-p3 1 0.2 0.1);
}
}
/* oklch() automatically uses wide gamut */
.accent { color: oklch(65% 0.25 30); }💡Wide-gamut P3 colors with sRGB fallback.
🎯 Interview Key Takeaway
Use oklch() or color(display-p3) for vibrant wide-gamut colors with @media (color-gamut: p3) for progressive enhancement.
#Wide Gamut#P3#Color Spaces#Senior
Back to all CSS & Modern Layouts Questions→