Description
Functions that enable more dynamic color theming on the web platform. They also rely on expanded color spaces (LAB, LCH, P3).

• color-mix: This function takes two <color> specifications and returns the result of mixing them, in a given <color-space>, by a specified amount.
• color-contrast: This function takes, firstly, a single color (typically a background, but not necessarily), secondly, a list of two or more colors, and thirdly, an optional target luminance contrast [WCAG21]. It selects from that list the first color color to meet or exceed the target contrast. If no target is specified, it selects the first color with the highest contrast to the single color.

Specification
CSS Color 5

Tests
TBD

Rationale
Web developers, design tools and design system developers often use color functions to assist in scaling the design of their component color relationships. With the increasing usage of design systems that support multiple platforms, and increased need to support user preferences like dark themes, dynamic color theming and automated accessibility functions become really handy.

Currently Sass, calc() on HSL values, or PostCSS is used to do this. Preprocessors are unable to work on dynamically adjusted colors, all current solutions are restricted to the sRGB gamut and to the perceptual limitations of HSL (colors are bunched up in the color wheel, and two colors with visually different lightness, like yellow and blue, can have the same HSL lightness).

The perceptually uniform lch() colorspace is used for mixing by default, as this has no gamut restrictions and colors are evenly distributed. However, other colorspaces can be specified, including hsl() or srgb if desired.