color-mix()
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 ofsrgb
,srgb-linear
,lab
,oklab
,xyz
,xyz-d50
,xyz-d65
,hsl
,hwb
,lch
,oklch
. There is no default.<color>
is any validcolor
.<percentage>
is the percentage of that color to mix.
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