New CSS Color Functions(part 1)

You might already be familiar with Hex, RGB, and HSL color formats. The CSS Color Module Levels 4 and 5 include a whole host of new color functions that enable us to specify and manipulate colors in CSS like never before. They include:

• hwb(): Hue, Whiteness, Blackness.
• lab(): Lightness, along with a and b values, which determine the hue.
• lch(): Lightness, Chroma, Hue.

hwb()

The hwb() functional notation expresses a given color according to its hue, whiteness, and blackness. An optional alpha component represents the color's transparency.

Syntax

hwb(194 0% 0%) /* #00c3ff */
hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */

Note: The HWB function does not use commas to separate its values as with previous color functions and the optional alpha value needs to be preceded with a forward slash (/) if specified.

Browser compatibility

"hwb()" | Can I use... Support tables for HTML5, CSS3, etc

lab()

The lab() functional notation expresses a given color in the CIE L*a*b* color space. The lab represents the entire range of colors that humans can see.

Syntax

lab(29.2345% 39.3825 20.0664);
lab(52.2345% 40.1645 59.9971);
lab(52.2345% 40.1645 59.9971 / .5);

Note: Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Browser compatibility

"lab()" | Can I use... Support tables for HTML5, CSS3, etc

lch()

The lch() functional notation expresses a given color in the LCH color space. It has the same L axis as lab(), but uses polar coordinates C (Chroma) and H (Hue).

Syntax

lch(29.2345% 44.2 27);
lch(52.2345% 72.2 56.2);
lch(52.2345% 72.2 56.2 / .5);

Note: Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Browser compatibility

"lch()" | Can I use... Support tables for HTML5, CSS3, etc

Thanks for reading.