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

Working draft or equivalent

Status in Chromium

Blink>CSS


Proposed (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • No signal
  • No signal
  • No signal
  • Strongly positive

Owner

Search tags

css, color, mix, color-mix,

Last updated on 2021-04-12