CSS now helps colour areas that permit us to get entry to colours outdoor of the sRGB gamut. Because of this you’ll toughen HD (top definition) presentations, the use of colours from HD gamuts. This toughen comes with new purposes to make higher use of colour on the net.

Gaining access to colour areas from CSS #

We have already got quite a few purposes that permit us to get entry to colours throughout the sRGB gamut—rgb(), hsl(), and hwb(). Now supported in browsers is the colour() operate, a normalized option to get entry to colours inside of any RGB colour area. This comprises sRGB, Show P3, and Rec2020. You’ll be able to see some examples within the following CSS:

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

Additionally supported are a number of purposes permitting get entry to to paint areas rather then sRGB the use of lch(), lab(), oklch(), and oklab().

You’ll be able to find out about all of those other colour areas within the Top definition CSS colour information.

The color-mix() operate #

In addition to those new colour areas, all engines now toughen the color-mix() operate. This operate allows blending of 1 colour into any other, in any of the colour areas. Within the following CSS, 25% of blue is blended into white, within the srgb colour area.

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

Be told extra about color-mix()

Those new purposes and colour areas promise to convey colourful HD colour to the internet. For inspiration, make a get started via developing some gorgeous gradients the use of the HD gradient generator at gradient.taste.

Hero symbol via Daniele Levis Pelusi