借助 CSS color-mix() 函数，您可以直接从 CSS 中混合使用任何受支持的颜色空间的颜色。
在 color-mix() 之前，为了调暗、调亮或降低色彩饱和度，开发者会使用 CSS 预处理器或 calc() 处理颜色通道。
.color-mixing-with-sass {
/* Sass: equally mix red with white */
--red-white-mix: color.mix(red, white);
}
Sass 在颜色 CSS 规范方面表现出色。不过，目前还没有一种能在 CSS 中混合使用颜色的真正方法。为了达到接近的效果，您需要计算部分颜色值。下面是一个简化的示例，说明目前 CSS 如何模拟混合：
.color-mixing-with-vanilla-css-before {
--lightness: 50%;
--red: hsl(0 50% var(--lightness));
/* add "white" to red
by adding 25% to the lightness channel
*/
--lightred: hsl(0 50% calc(var(--lightness) + 25%);
}
color-mix() 可以为 CSS 带来混合颜色的功能。开发者可以选择混合到哪种颜色空间，以及每种颜色在混合中的主色程度。
.color-mixing-after {
/* equally mix red with white */
--red-white-mix: color-mix(in oklab, red, white);
/* equally mix red with white in srgb */
--red-white-mix-srgb: color-mix(in srgb, red, white);
}
这正是我们想要的。兼具灵活性、强大功能和功能齐全的 API。太好了，
在 CSS 中混合颜色
CSS 存在于多颜色空间和色域世界中，因此指定用于混合的颜色空间并非可选项。此外，不同的颜色空间可能会显著改变混合的结果，因此了解颜色空间的效果有助于您获得所需的结果。
如需查看互动简介，请尝试使用此 color-mix() 工具：
- 探索每种颜色空间的效果。
- 探索在圆柱体颜色空间（lch、oklch、hsl 和 hwb）中混合时色相插值的效果。
- 点击前两个颜色框中的任意一个来更改混合颜色。
- 使用滑块更改混合比率。
- 已生成的 color-mix() CSS 代码，置于底部。
混合搭配各种色彩空间
用于混合（和渐变）的默认颜色空间为 oklab。提供一致的结果。您还可以指定备用颜色空间，以根据需要定制颜色组合。
以 black 和 white 为例。它们混合的颜色空间不会产生那么大的影响，对吧？错误。
color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);
作用很大！
再以 blue 和 white 为例。我之所以选择这种方法，是因为颜色空间的形状会影响结果。在这种情况下，大多数颜色空间在从白色转换为蓝色时会变为紫色。它还展示了 oklab 为何是一个非常可靠的混合色彩空间，它最接近大多数人对混蓝色和蓝色（非紫色）的期望。
color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);
使用 color-mix() 了解颜色空间的效果对于制作渐变也非常有帮助。颜色 4 语法还允许渐变指定颜色空间，其中渐变会在一个空间区域显示混合效果。
.black-to-white-gradient-in-each-space {
--srgb: linear-gradient(to right in srgb, black, white);
--srgb-linear: linear-gradient(to right in srgb-linear, black, white);
--lab: linear-gradient(to right in lab, black, white);
--oklab: linear-gradient(to right in oklab, black, white);
--lch: linear-gradient(to right in lch, black, white);
--oklch: linear-gradient(to right in oklch, black, white);
--hsl: linear-gradient(to right in hsl, black, white);
--hwb: linear-gradient(to right in hwb, black, white);
--xyz: linear-gradient(to right in xyz, black, white);
--xyz-d50: linear-gradient(to right in xyz-d50, black, white);
--xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}
如果您想了解哪种颜色空间是“最佳”的，那么这根本没有之一。正因如此，我们有这么多选择！即使某个颜色空间是“最佳”的，也不会提出新的颜色空间（请参阅 oklch 和 oklab）。每种颜色空间都有各自的独特亮点，不失为正确的选择。
例如，如果您想获得色彩明快的合辑，请使用 hsl 或 hwb。在下面的演示中，两种鲜艳的颜色（品红色和绿黄色）混合在一起，hsl 和 hwb 都混合产生鲜艳的效果，而 srgb 和 oklab 产生的颜色不饱和。
既注重一致性，又注重细节，请使用 oklab。在下面的演示中，混合了蓝色和黑色，hsl 和 hwb 会产生过于鲜艳和色调偏移的颜色，而 srgb 和 oklab 会产生更深的蓝色。
在 color-mix() Playground 中花五分钟时间测试不同的颜色和空间，然后，您将开始感受每个空间的优势。此外，我们预计还会针对颜色空间提供更多指导，因为我们都会根据界面中的潜力进行调整。
调整色相插值方法
如果您已选择在圆柱体颜色空间（基本上是具有接受角度的 h 色调通道的任何颜色空间）中混合，可以指定插值是否采用 shorter、longer、decreasing 和 increasing。如需了解详情，请参阅高清色彩指南。
下面是一个相同的蓝白混合示例，但这一次，它只是在采用不同色调插值方法的圆柱体空间中。
这是我编写的另一个 Codepen，它可以帮助直观呈现色相插值，但专门用于渐变。不过，我相信这将有助于您了解在指定了色相插值的情况下每个颜色空间如何产生混合结果，请进行研究！
混用不同的颜色语法
到目前为止，我们主要混用了各种 CSS 具名颜色，例如 blue 和 white。CSS 颜色混合已经可以混合来自两种不同颜色空间的颜色。这是指定混合颜色空间的另一个原因，因为当两种颜色不在同一空间时，它会设置通用空间。
color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));
在前面的示例中，hsl 和 display-p3 将转换为 oklch，然后进行混合。既酷又灵活。
调整混合比
这不太可能是每次混合您都需要每种颜色均分的程度，正如目前为止的大多数示例所示。好消息是，有一种语法可以确定每种颜色在生成的混合中应显示多少。
下面开始举例说明这是完全等效的（来自规范）的示例：
.ratios-syntax-examples {
/* omit the percentage for equal mixes */
color: color-mix(in lch, purple, plum);
color: color-mix(in lch, plum, purple);
/* percentage can go on either side of the color */
color: color-mix(in lch, purple 50%, plum 50%);
color: color-mix(in lch, 50% purple, 50% plum);
/* percentage on just one color? other color gets the remainder */
color: color-mix(in lch, purple 50%, plum);
color: color-mix(in lch, purple, plum 50%);
/* percentages > 100% are equally clamped */
color: color-mix(in lch, purple 80%, plum 80%);
/* above mix is clamped to this */
color: color-mix(in lch, purple 50%, plum 50%);
}
我发现这些示例可以很好地说明极端情况。第一组示例展示了 50% 不是必需的，但可以选择性指定。上一个示例展示了一个有趣的情况：当比率的总和超过 100% 时，它们同样会被限制到总计 100%。
另请注意，如果仅一种颜色指定了比率，则系统会假定另一种颜色是余数为 100% 的颜色。下面再举几个例子来说明此行为。
color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */
这些示例说明了两条规则： 1. 当比率超过 100% 时，系统会限制这些比率，并使其平均分配。 1. 如果只提供一个比率，则系统会将另一种颜色设置为 100 减去该比率。
最后一条规则不太明显；如果同时为两种颜色提供百分比，但百分比之和不等于 100%，会出现什么情况？
color-mix(in lch, purple 20%, plum 20%)
这种 color-mix() 组合可产生透明度，即 40% 透明度。当比率之和不等于 100% 时，所得到的混合将是不透明的。
但任何一种颜色都不会完全混合。
嵌套 color-mix()
与所有 CSS 一样，嵌套得到妥善处理，也符合预期；内部函数将首先解析，并将其值返回到父上下文。
color-mix(in lch, purple 40%, color-mix(plum, white))
您可以根据自己的需要随意嵌套，以便获得您追求的结果。
构建浅色和深色配色方案
让我们使用 color-mix() 构建配色方案！
基本配色方案
在以下 CSS 中，浅色主题和深色主题是基于品牌十六进制颜色码创建的。浅色主题会创建两种深蓝色的文本颜色和一种非常浅的白色背景颜色 Surface。然后，在深色偏好设置媒体查询中，系统会为自定义属性分配新的颜色，使背景深，而文本颜色为浅色。
:root {
/* a base brand color */
--brand: #0af;
/* very dark brand blue */
--text1: color-mix(in oklab, var(--brand) 25%, black);
--text2: color-mix(in oklab, var(--brand) 40%, black);
/* very bright brand white */
--surface1: color-mix(in oklab, var(--brand) 5%, white);
}
@media (prefers-color-scheme: dark) {
:root {
--text1: color-mix(in oklab, var(--brand) 15%, white);
--text2: color-mix(in oklab, var(--brand) 40%, white);
--surface1: color-mix(in oklab, var(--brand) 5%, black);
}
}
所有这一切都是通过将白色或黑色混合到一种品牌颜色中来实现的。
中间配色方案
通过添加浅色和深色主题以外的更多主题，这可以更进一步。在以下演示中，对单选按钮组的更改会更新 HTML 标记 [color-scheme="auto"] 上的属性，然后选择器便可有条件地应用颜色主题。
此中级演示还介绍了一种颜色主题技术，在这种技术中，所有主题颜色都列在 :root 中。这样，您就可以轻松查看所有相关信息，并根据需要进行调整。稍后，在样式表中，您可以按照定义的变量使用它们。这样有助于省却在样式表中手动处理颜色的操作，因为它们都包含在初始 :root 代码块中。
更多有趣的用例
Ana Tudor 有一个非常棒的演示，其中包含一些可供研究的使用场景：
使用开发者工具调试 color-mix()
Chrome 开发者工具为 color-mix() 提供了出色的支持。它可识别并突出显示语法，在“样式”窗格中的样式旁边创建混音预览，并允许选择备用颜色。
在开发者工具中显示如下：
祝大家混音愉快！