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, plum, pink);
color-mix(in lch, plum 40%, pink);
color-mix(in srgb, #34c9eb 20%, white);
color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white);
Values
Functional notation: color-mix(in colorspace[ hue-interpolation-method hue], color[ p1], color[ p2])
in
-
A literal token as a component of the syntax.
colorspace
-
One of
srgb
,srgb-linear
,lab
,oklab
,xyz
,xyz-d50
,xyz-d65
,hsl
,hwb
,lch
, oroklch
, specifying the color space for interpolation. hue-interpolation-method
Optional-
One of
shorter
,longer
,increasing
, ordecreasing
, specifying how<hue>
values of the colors are interpolated.Note: This value is only valid if
colorspace
is one ofhsl
,hwb
,lch
, andoklch
. hue
-
A literal token as a component of the syntax.
color
-
Any valid
<color>
. p1
,p2
Optional-
<percentage>
values between0%
and100%
, specifying the amount of each color to mix. They are normalized as follows:- If both
p1
andp2
are omitted, thenp1 = p2 = 50%
. - If
p1
is omitted, thenp1 = 100% - p2
. - If
p2
is omitted, thenp2 = 100% - p1
. - If
p1 = p2 = 0%
, the function is invalid. - If
p1 + p2 ≠ 100%
, thenp1' = p1 / (p1 + p2)
andp2' = p2 / (p1 + p2)
, wherep1'
andp2'
are the normalization results.
- If both
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
Mixing two colors
In a supporting browser, the items have more blue, and therefore less white, as a higher percentage of #34c9eb
is mixed in. When no value is given, the percentage defaults to 50%.
HTML
<ul>
<li>0%</li>
<li>25%</li>
<li>50%</li>
<li>75%</li>
<li>100%</li>
<li></li>
</ul>
CSS
li:nth-child(1) {
background-color: color-mix(in srgb, #34c9eb 0%, white);
}
li:nth-child(2) {
background-color: color-mix(in srgb, #34c9eb 25%, white);
}
li:nth-child(3) {
background-color: color-mix(in srgb, #34c9eb 50%, white);
}
li:nth-child(4) {
background-color: color-mix(in srgb, #34c9eb 75%, white);
}
li:nth-child(5) {
background-color: color-mix(in srgb, #34c9eb 100%, white);
}
li:nth-child(6) {
background-color: color-mix(in srgb, #34c9eb, white);
}
Result
Using hue interpolation methods
Hue interpolation methods can be used to control how the <hue>
is interpolated between two colors.
For shorter
the result will be the shortest distance between the two angles (the default) and conversely, longer
uses the larger value between the two angles in a circle.
For increasing
, the result will be the angle between 0 and 360 degrees and for decreasing
the result will be the angle between -360 and 0 degrees.
HTML
<div id="shorter">shorter</div>
<div id="longer">longer</div>
<div id="increasing">increasing</div>
<div id="decreasing">decreasing</div>
CSS
/* 20 degrees */
#shorter {
background-color: color-mix(
in hsl shorter hue,
hsl(10 100% 50%),
hsl(350 100% 50%)
);
}
/* 340 degrees */
#longer {
background-color: color-mix(
in hsl longer hue,
hsl(10 100% 50%),
hsl(350 100% 50%)
);
}
/* The resulting angle is between 0 and 360 degrees */
#increasing {
background-color: color-mix(
in hsl increasing hue,
hsl(10 100% 50%),
hsl(350 100% 50%)
);
}
/* The resulting angle is between -360 and 0 degrees */
#decreasing {
background-color: color-mix(
in hsl decreasing hue,
hsl(10 100% 50%),
hsl(350 100% 50%)
);
}
Result
Specifications
Specification |
---|
CSS Color Module Level 5 # color-mix |
Browser compatibility
BCD tables only load in the browser