感谢您关注 Google I/O 大会！观看点播内容。

此页面由 Cloud Translation API 翻译。

CSS color-mix()

Adam Argyle

CSS color-mix() 函数，您可以直接在 CSS 中混合任何受支持的颜色空间中的颜色。

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

在 color-mix()之前，为了调暗、调亮或降低颜色的饱和度，开发者使用 CSS 预处理器或颜色：calc() 渠道。

使用 SCSS 之前

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

Sass 表现不错以确保始终领先于颜色 CSS 规范。不过，一种在 CSS 中混合颜色的真正方式要接近，您需要计算局部变量颜色值。下面的简要示例说明了 CSS 目前如何模拟混合：

采用 HSL 之前

.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);

7 种颜色空间（srgb、Linear-srgb、lch、oklch、lab、oklab、xyz）分别显示了黑白混合的效果。显示了大约 5 种不同的色调，表明每种颜色空间甚至会以不同的方式混合到灰色。 — 试用演示

确实有很大影响！

我们再以 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);

7 种颜色空间（srgb、Linear-srgb、lch、oklch、lab、oklab、xyz），每个颜色空间显示不同的结果。很多颜色是粉色或紫色的，但实际上仍然是蓝色的。 — 试用演示

使用 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。这是高清配色指南。

注意：如果颜色空间是圆柱形，则 color-mix() Playground 会添加一个额外的 select 下拉菜单。您可以在那里演奏，了解混合效果。

本示例同样是蓝白混合的示例，但这一次，只在使用不同色相插值方法的圆柱形空间。

这是我制作的另一个 Codepen，可帮助直观呈现色相插值，尤其是梯度。我相信这有助于您了解不过，在指定色相插值的情况下，颜色空间会生成混合结果，来研究一下吧！

警告：为非圆柱形提供色调插值方法颜色空间是 color-mix() 中的语法错误。

使用不同颜色语法进行混合

到目前为止，我们主要使用了 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% 不是必需的，但可以选择指定 50%。最后一个总和为 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 中，系统根据品牌十六进制颜色值创建了浅色和深色主题 color 决定。浅色主题会创建两种深蓝色的文本颜色和一个非常浅的白色背景颜色。然后，在深色偏好设置媒体查询中，自定义属性会分配新颜色，因此背景颜色较暗，文本颜色也为都是低强度

: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 代码块中。

使用开发者工具调试 color-mix()

Chrome 开发者工具为 color-mix() 提供了出色的支持。它可以识别并突出显示语法，样式窗格中，并允许选择替代颜色。

它在 DevTools 中应如下所示：

Chrome 开发者工具检查 color-mix 语法的屏幕截图。

祝大家混音愉快！

CSS color-mix()

在 CSS 中混合颜色

混合各种颜色空间

调整色调插值方法

使用不同颜色语法进行混合

调整混音比

嵌套 color-mix()

构建浅色和深色配色方案

基本配色方案

中间配色方案

更多有趣的用例

使用开发者工具调试 color-mix()

嵌套 `color-mix()`