Unlocking the Power of CSS Colors

New Color Functions and Improvements

CSS Color Module Level 5 introduces several new color functions and improvements, including:

• LCH (Lightness, Chroma, Hue): provides access to approximately 50% more colors than traditional RGB.
• HWB (Hue, Whiteness, Blackness): similar to HSL, but with whiteness and blackness parameters.
• LAB (CIELAB): represents colors in a way that closely matches human perception.
• color-mix: returns the result of two colors mixed in specified percentages.
• color-contrast: helps developers build accessible websites by comparing color contrast.
• color: allows the browser to display colors in any color space.
• accent-color: changes the color of accented form controls.

Exploring the New Color Functions

HWB (Hue, Whiteness, Blackness)

HWB is a color specification method similar to HSL. The hue argument can be any number between 0 and 360, and it refers to a specific color on the color wheel. Whiteness and blackness parameters range from 0 to 100%.

hwb(0 20% 40%) /* hue: 0, whiteness: 20%, blackness: 40% */

LAB (CIELAB)

LAB color functions are based on the CIELAB color space, which represents colors in a way that closely matches human perception. The L in LAB indicates lightness, while A and B are chromaticity coordinates.

lab(29.567% 68.298 -112.0294) /* lightness: 29.567%, A: 68.298, B: -112.0294 */

LCH (Lightness, Chroma, Hue)

LCH is a color space that provides access to approximately 50% more colors than traditional RGB. The L in LCH indicates lightness, while C is chroma, and H is hue.

lch(50% 100 0) /* lightness: 50%, chroma: 100, hue: 0 */

color-mix

The color-mix function returns the result of two colors mixed in specified percentages.

color-mix(in lch, purple 50%, plum 50%) /* mix 50% purple and 50% plum in LCH color space */

color-contrast

The color-contrast function helps developers build accessible websites by comparing color contrast.

color-contrast(#fff vs #000, #ccc, #aaa) /* compare contrast of #fff and #000, #ccc, #aaa */

color

The color function allows the browser to display colors in any color space.

color(display-p3 1 0 0) /* display color in display-p3 color space */

accent-color

The accent-color property changes the color of accented form controls.

accent-color: #f00; /* change accent color to #f00 */

Browser Support

Some of the new color functions and improvements are still considered experimental and may not have full browser support. Here’s a summary of current browser support: