New CSS shade areas and capabilities in all main engines

CSS now helps shade areas that permit us to entry colours outdoors of the sRGB gamut. This implies which you can assist HD (excessive definition) shows, utilizing colours from HD gamuts. This assist comes with new capabilities to make higher use of shade on the internet.

Accessing shade areas from CSS #

We have already got various capabilities that permit us to entry colours inside the sRGB gamut—rgb(), hsl(), and hwb(). Now supported in browsers is the shade() operate, a normalized option to entry colours inside any RGB shade area. This contains sRGB, Show P3, and Rec2020. You may see some examples within the following CSS:

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

Additionally supported are a number of capabilities permitting entry to paint areas apart from sRGB utilizing lch(), lab(), oklch(), and oklab().

You may study all of those totally different shade areas within the High definition CSS color guide.

The color-mix() operate #

In addition to these new shade areas, all engines now assist the color-mix() operate. This operate permits mixing of 1 shade into one other, in any of the colour areas. Within the following CSS, 25% of blue is combined into white, within the srgb shade area.

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

Learn more about color-mix()

These new capabilities and shade areas promise to deliver vibrant HD shade to the online. For inspiration, make a begin by creating some lovely gradients utilizing the HD gradient generator at gradient.style.

Hero picture by Daniele Levis Pelusi