Wider color gamuts arrive in CSS
Every major browser engine now supports the new CSS color spaces and functions that give web designers access to colors beyond the traditional sRGB gamut. With support for high-definition (HD) color spaces, stylesheets can now take advantage of the wider range of colors that modern displays are capable of rendering.
Alongside the existing rgb(), hsl(), and hwb() functions that work within sRGB, there is now a standardized color() function that can access colors in any RGB-based color space, including Display P3 and Rec2020. In addition, the lch(), lab(), oklch(), and oklab() functions enable working with color spaces outside sRGB as well.
For those unfamiliar with the differences between these color spaces, the High definition CSS color guide covers the details of each model, what gamut they target, and when each is likely to be the appropriate choice.
Mixing colors across spaces
The other key addition that all engines now support is the color-mix() function. It lets you blend one color into another within any supported color space. For instance, mixing 25% blue into white in the sRGB color space is a one-line declaration.
These new tools open the door to more vibrant HD color on the web. Designers looking for inspiration or a practical starting point can experiment with gradients built in wider gamuts using the HD gradient generator at gradient.style.
