The color-mix()
functional notation takes two color
values and returns the result of mixing them in a given colorspace by a given amount.
color-mix(in lch, peru 40%, lightgoldenrod); color-mix(in srgb, #34c9eb 20%, white);
color-mix( in <colorspace> , [ <color> && <percentage>? ]#{2})
<colorspace>
is one of srgb
, hsl
, hwb
, xyz
, lab
, lch
. If no colorspace is specified the default is lch
.
[ <color>
is any valid color
.
<percentage>
is the percentage of that color to mix.
<ul> <li>10% #34c9eb</li> <li>40% #34c9eb</li> <li>70% #34c9eb</li> </ul>
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); }
In a supporting browser the three items become more blue as a higher percentage of #34c9eb
is mixed in.
Specification |
---|
CSS Color Module Level 5 (CSS Color 5) # color-mix |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
color-mix() |
No |
No |
88 |
No |
No |
15 |
No |
No |
88 |
No |
15 |
No |
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix()