CSS 中的 color-mix（） 函数将两个 <color> 值作为参数，并返回两种指定颜色的混合，在给定的颜色空间中以给定的数量。
可能的值
- color-mix（） 函数的功能表示法是 color-mix（method， color1[ p1]， color2[ p2]）。
- method：它是一种<color-interpolation-method>指定插值颜色空间。
- color1、color2：保存将混合的 <color> 值。
- p1、p2：这是一个可选值，指定要混合的颜色量。以 0% 到 100% 之间的<百分比>值表示。
- 当 p1 和 p2 均未指定时，则 p1 = p2 = 50%。
- 当未指定 p1时，则 p1 = 100% - p2。
- 当未指定 p2时，则 p2 = 100% - p1。
- 当 p1 = p2 = 0% 时，函数无效。
- 当 p1 + p2不等于 100 时，则 p1' = p1 / （p1 + p2） 和 p2' = p2 / （p1 + p2），其中 p1' 和 p2' 是归一化结果。
以下是不同的颜色插值方法：
- <rectangular-color-space>：srgb、srgb-linear、lab、oklab、xyz、xyz-d50、xyz-d65
- <polar-color-space>： HSL， HWB， LCH， OKLCH
- <hue-interpolation-method>：更短、更长、增加、减少
语法
color(display-p3 0.45 1 0) | color(display-p3 0.45 1 0 / 0.4)
CSS color-mix（） - 矩形颜色空间 （srgb）
以下示例显示了根据 p1 和 p2（要混合的颜色量）的值混合颜色（color1 和 color2）。颜色插值方法是矩形颜色空间 （srgb）：
<html>
<head>
<style>
.container {
display: flex;
border: 3px solid blue;
padding: 5px;
width: 350px;
}
#sample-div {
width: 80px;
height: 80px;
border: 2px solid black;
margin-right: 10px;
}
.color-srgb-p1 {
background-color: color-mix(in srgb, #65ef23 90%, yellow);
}
.color-srgb-p2 {
background-color: color-mix(in srgb, #65ef23, yellow 80%);
}
.color-srgb-none {
background-color: color-mix(in srgb, #65ef23, yellow);
}
.color-srgb-both {
background-color: color-mix(in srgb, #65ef23 20%, yellow 45%);
}
</style>
</head>
<body>
<h2>Normalization of colors based on p1 and p2</h2>
<div class="container">
<div class="color-srgb-p1" id="sample-div">p1=90%</div>
<div class="color-srgb-p2" id="sample-div">p2=80%</div>
<div class="color-srgb-none" id="sample-div">none</div>
<div class="color-srgb-both" id="sample-div">p1=20% p2=45%</div>
</div>
</body>
</html>
CSS color-mix（） - 极性颜色空间 （hsl）
以下示例显示了根据 p1 和 p2（要混合的颜色量）的值混合颜色（color1 和 color2）。颜色插值方法是极性颜色空间 （hsl）：
<html>
<head>
<style>
.container {
display: flex;
border: 3px solid blue;
padding: 5px;
width: 350px;
}
#sample-div {
width: 80px;
height: 80px;
border: 2px solid black;
margin-right: 10px;
}
.color-hsl-p1 {
background-color: color-mix(in hsl, #90b 90%, white);
}
.color-hsl-p2 {
background-color: color-mix(in hsl, #90b, white 80%);
}
.color-hsl-none {
background-color: color-mix(in hsl, #90b, white);
}
.color-hsl-both {
background-color: color-mix(in hsl, #90b 20%, white 45%);
}
</style>
</head>
<body>
<h2>Normalization of colors - hsl colorspace</h2>
<div class="container">
<div class="color-hsl-p1" id="sample-div">p1=90%</div>
<div class="color-hsl-p2" id="sample-div">p2=80%</div>
<div class="color-hsl-none" id="sample-div">none</div>
<div class="color-hsl-both" id="sample-div">p1=20% p2=45%</div>
</div>
</body>
</html>
CSS color-mix（） - 色调插值法 （lch）
以下示例显示了根据 p1 和 p2（要混合的颜色量）的值混合颜色（color1 和 color2）。颜色插值法是色相插值法 （lch）：
<html>
<head>
<style>
.container {
display: flex;
border: 3px solid blue;
padding: 10px;
width: 700px;
}
#sample-div {
width: 100px;
height: 100px;
border: 2px solid black;
margin-right: 10px;
}
.color-lch-color1 {
background-color: lch(50% 100% 200);
}
.color-lch-color2 {
background-color: lch(100% 50 200);
}
.color-shorter {
background-color: color-mix(in lch shorter hue,
lch(50% 100% 200),
lch(100% 50 200)
);
}
.color-longer {
background-color: color-mix(in lch longer hue,
lch(50% 100% 200),
lch(100% 50 200)
);
}
.color-increasing {
background-color: color-mix(in lch increasing hue,
lch(50% 100% 200),
lch(100% 50 200)
);
}
.color-decreasing {
background-color: color-mix(in lch decreasing hue,
lch(50% 100% 200),
lch(100% 50% 200)
);
}
</style>
</head>
<body>
<h2>hue interpolation method</h2>
<div class="container">
<div class="color-lch-color1" id="sample-div">p1=90%</div>
<div class="color-lch-color2" id="sample-div">p2=80%</div>
<div class="color-shorter" id="sample-div">shorter</div>
<div class="color-longer" id="sample-div">longer</div>
<div class="color-increasing" id="sample-div">increasing</div>
<div class="color-decreasing" id="sample-div">decreasing</div>
</div>
</body>
</html>
