New CSS coloration areas and capabilities in all main engines

CSS now helps coloration areas that permit us to entry colours outdoors of the sRGB gamut. This implies that you would be able to help HD (excessive definition) shows, utilizing colours from HD gamuts. This help comes with new capabilities to make higher use of coloration on the net.

Accessing coloration areas from CSS #

We have already got numerous capabilities that permit us to entry colours inside the sRGB gamut—rgb(), hsl(), and hwb(). Now supported in browsers is the coloration() perform, a normalized technique to entry colours inside any RGB coloration house. This consists of sRGB, Show P3, and Rec2020. You possibly can see some examples within the following CSS:

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

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

You possibly can study all of those completely different coloration areas within the Excessive definition CSS coloration information.

The color-mix() perform #

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

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

Be taught extra about color-mix()

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

Hero picture by Daniele Levis Pelusi