color-mix takes two color specifications and returns the result of mixing them, in a given colorspace, by a specified amount. For example, `color-mix(red yellow 40%)` produces a mixture of 40% red and 60% yellow.
Motivation
This new function will give designers greater flexibility when working with colors. One example is to create tinted variants of a single base color to form a design palette. We also need this function to support a CSSWG resolution related to background-color in forced colors mode. The resolution calls for using color-mix to construct the used background-color from the rgb channels of the appropriate system color plus the alpha channel from the computed color.
Documentation
Specification
Status in Chromium
Proposed (tracking bug)
Consensus & Standardization
- No signal
- No signal
- No signal
- Strongly positive
Owner
Search tags
css, color, mix, color-mix,Last updated on 2021-04-12