New CSS color spaces and functions in all major engines

CSS now supports color spaces that allow us to access colors outside of the sRGB gamut. This means that you can support HD (high definition) displays, using colors from HD gamuts. This support comes with new functions to make better use of color on the web.

Accessing color spaces from CSS

We already have a number of functions that allow us to access colors within the sRGB gamut—rgb(), hsl(), and hwb(). Now supported in browsers is the color() function, a normalized way to access colors within any RGB color space. This includes sRGB, Display P3, and Rec2020. You can see some examples in the following CSS:

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

Also supported are several functions allowing access to color spaces other than sRGB using lch(), lab(), oklch(), and oklab().

You can learn about all of these different color spaces in the High definition CSS color guide.

The color-mix() function

As well as these new color spaces, all engines now support the color-mix() function. This function enables mixing of one color into another, in any of the color spaces. In the following CSS, 25% of blue is mixed into white, in the srgb color space.

As well as these new color spaces, all engines now support the color-mix() function. This function enables mixing of one color into another, in any of the color spaces. In the following CSS, 25% of blue is mixed into white, in the srgb color space.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

Learn more about color-mix().

These new functions and color spaces promise to bring vibrant HD color to the web. For inspiration, make a start by creating some beautiful gradients using the HD gradient generator at gradient.style.

Hero image by Robert Katzki and article by Rachel Andrew on web.dev