color-mix()

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

The color-mix() functional notation takes two color values and returns the result of mixing them in a given colorspace by a given amount.

Syntax

color-mix(in lch, peru 40%, lightgoldenrod);
color-mix(in srgb, #34c9eb 20%, white);

Values

Functional notation: color-mix( in <colorspace> , [ <color> && <percentage>? ]#{2})

<colorspace> is one of srgb, srgb-linear, lab, oklab, xyz, xyz-d50, xyz-d65, hsl, hwb, lch, oklch. There is no default.

<color> is any valid color.

<percentage> is the percentage of that color to mix.

Formal syntax

<color-mix()> = 
color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2} )

<color-interpolation-method> =
in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

<rectangular-color-space> =
srgb |
srgb-linear |
lab |
oklab |
xyz |
xyz-d50 |
xyz-d65

<polar-color-space> =
hsl |
hwb |
lch |
oklch

<hue-interpolation-method> =
[ shorter | longer | increasing | decreasing ] hue

Examples

HTML

<ul>
  <li>10% #34c9eb</li>
  <li>40% #34c9eb</li>
  <li>70% #34c9eb</li>
</ul>

CSS

li:nth-child(1) {
  background-color: color-mix(in srgb, #34c9eb 10%, white);
}

li:nth-child(2) {
  background-color: color-mix(in srgb, #34c9eb 40%, white);
}

li:nth-child(3) {
  background-color: color-mix(in srgb, #34c9eb 70%, white);
}

Result

In a supporting browser the three items become more blue as a higher percentage of #34c9eb is mixed in.

Specifications

Specification
CSS Color Module Level 5
# color-mix

Browser compatibility

BCD tables only load in the browser