如何使用 CSS color-mix()

熟悉color-mix()功能

color-mix()函数允许我们指定要混合的两种颜色，然后输出结果。我们可以控制混合中每种颜色的数量，以及颜色插值空间，这决定了颜色如何混合在一起。

颜色插值方法是必需参数。我们将在后面的部分中介绍它。现在，我们将用来srgb演练这些示例。

我们将每种颜色的数量指定为百分比。如果我们省略两种颜色的百分比，color-mix()则默认情况下每种颜色使用 50%。如下所示，将red和blue等份混合后得到了purple预期的色调。

.result {
  background-color: color-mix(in srgb, blue, red);
}

如果我们仅指定一种颜色的百分比，则另一种颜色的百分比会自动调整，以便总数总计为 100%。例如，无论我们指定90%forblue还是10%for red，结果都是相同的 - 颜色主要是蓝色，带有一丝红色。

color-mix(in srgb, blue 90%, red)
color-mix(in srgb, blue, red 10%)

如果两种颜色的百分比总和小于 100%，则color-mix()行为略有不同：总和保存为 Alpha 乘数，并使用此乘数缩放两种颜色，使它们的总和达到 100%。（有关一些示例，请参阅规范中的百分比归一化部分）。

尽管下面的两个color-mix()函数混合了相同数量的每种颜色，但第二个函数（百分比之和为40%）产生相同的颜色，但 alpha 值为0.4：

/* Result: rgb(128 0 128) */
color-mix(in srgb, blue, red)

/* Result: rgb(128 0 128 / 0.4) */
color-mix(in srgb, blue 20%, red 20%)

创建明暗变化的color-mix()

作为一个典型的用例，我们经常需要创建品牌颜色的较浅或较深的变化。为了实现这一点，我们可以将不同数量的白色或黑色混合到我们的基色中color-mix()。

下面的示例演示了如何将不同数量的white和black与基色混合以创建其较亮和较暗的变化，展示了在调整基色强度时blue的使用。color-mix()

/* Initial base color */
.bg-blue {
  background-color: blue;
}

/* 50% blue, 50% white */
.bg-blue-light {
  background-color: color-mix(in srgb, blue, white);
}

/* 25% blue, 75% white */
.bg-blue-lighter {
  background-color: color-mix(in srgb, blue, white 75%);
}

/* 50% blue, 50% black */
.bg-blue-dark {
  background-color: color-mix(in srgb, blue, black);
}

/* 25% blue, 75% black */
.bg-blue-darker {
  background-color: color-mix(in srgb, blue, black 75%);
}

使用自定义属性来重用颜色变化

通过将color-mix()值存储为自定义属性，我们可以在整个代码中重用它们。当我们想要创建品牌主色的浅色或深色变体时，这种方法非常有用。

作为示例，下面的代码说明了如何使用--brand自定义属性创建品牌颜色变化。

:root {
  --brand: rgb(0 0 255);

  --brand-light: color-mix(in srgb, var(--brand), white);
  --brand-lighter: color-mix(in srgb, var(--brand), white 75%);
  --brand-dark: color-mix(in srgb, var(--brand), black);
  --brand-darker: color-mix(in srgb, var(--brand), black 75%);
}

我们还可以通过混合来创建不同不透明度的变体transparent：

:root {
  --brand: rgb(0 0 255);
  --brand-alpha-50: color-mix(in srgb, blue, transparent);
  --brand-alpha-75: color-mix(in srgb, blue 75%, transparent);
}

示例：使用color-mix()自定义属性设置按钮变体的样式

让我们将color-mix()自定义属性应用到实际案例中：设计一个简单的按钮。首先，我们定义主要基色和辅助颜色的自定义属性。作为奖励，我们使用color-mix()辅助颜色将基色与pink.

:root {
  --brand: rgb(0 0 255);
  --brand-light: color-mix(in srgb, blue, white);

  --secondary: color-mix(in srgb, var(--brand), pink);
  --secondary-light: color-mix(in srgb, var(--secondary), white);
}

接下来，我们将这些颜色应用于主要和辅助按钮变体，并使用较浅的颜色变体表示悬停状态。

button {
  background-color: var(--brand);
  color: white;
}

button:where(:hover, :focus) {
  background-color: var(--brand-light);
}

button.secondary {
  background-color: var(--secondary);
}

button.secondary:where(:hover, :focus) {
  background-color: var(--secondary-light);
}

我们不仅限于在根级别定义自定义属性。例如，我们可以为组件的基色设置自定义属性，并使用color-mix(). 对于次要组件变体，我们可以简单地应用不同的基色。如下图所示。

.card {
  --color: blue;
  background: color-mix(in srgb, var(--color), white 80%);
  border-top: 5px solid var(--color);
  padding: 1rem;
}

.secondary {
  --color: deeppink;
}

创建冷暖变化color-mix()

虽然创建现有颜色的较浅或较暗的变化是 的常见用例color-mix()，但除此之外，我们还可以通过将较暖或较冷的颜色混合到原始调色板中来创建暖色和冷色的变化。

在这里，我们定义一个初始调色板（从Coolors获取的颜色），以及我们想要混合以使用自定义属性创建暖色和冷色变体的颜色。

:root {
  --yellow: rgb(221 215 141);
  --peach: rgb(220 191 133);
  --chocolate: rgb(139 99 92);
  --khaki: rgb(96 89 77);
  --grey: rgb(147 162 155);

  --mix-warm: red;
  --mix-cool: blue;
}

.palette > div {
  --color: var(--yellow);

  &:nth-child(2) {
    --color: var(--peach);
  }

  &:nth-child(3) {
    --color: var(--chocolate);
  }

  &:nth-child(4) {
    --color: var(--khaki);
  }

  &:nth-child(5) {
    --color: var(--grey);
  }
}

然后，我们使用自定义属性将第二种颜色应用到原始基色中，并指定数量。我们还指定了默认值，因此如果没有给定值--mix，则将使用原始基色。

.palette > div {
  background: color-mix(
    in srgb,
    var(--color),
    var(--mix, var(--color)) var(--amount, 10%)
  );
}

这样，我们就可以混合不同的颜色并将它们应用到整个调色板。

.cool {
  --mix: var(--mix-cool);
}

.cool--20 {
  --amount: 20%;
}

.warm {
  --mix: var(--mix-warm);
}

.warm--20 {
  --amount: 20%;
}

指定插值颜色空间color-mix()

在前面的章节中，我们使用srgb（标准红绿蓝）作为颜色插值方法。我们可以通过修改用于插值的颜色空间来彻底改变结果。颜色空间是一个复杂的主题，远远超出了本文的范围，但在决定在color-mix().

探索色彩空间选项

颜色插值确定一种颜色如何过渡到另一种颜色。可视化这一点的一个好方法是使用渐变，正如Adam Argyle 的"颜色插值"部分中所做的那样，该部分深入探讨了颜色空间和色域。

经典 RGB 插值可能会导致中心插值区域（渐变的中间区域）出现浑浊的颜色，而使用lch或时颜色仍保持鲜艳oklch。如下图所示，当应用于上一个示例中的暖色和冷色调色板时，结果明显不同。

srgb与和不同hsl， 和 两者oklch在oklab感知上是一致的。

了解较短和较长的插值路径

在极坐标（或圆形）颜色空间中，例如oklch、oklab和hsl，我们还可以选择颜色插值的方向。当我们均匀混合两种颜色时，得到的色调角度将位于两种颜色角度的中间。这将根据插值是否遵循色环周围较短或较长的路径而有所不同。

color-mix(in hsl, rgb(255 88 88), rgb(86 86 255));
color-mix(in hsl longer hue, rgb(255 88 88), rgb(86 86 255));

浏览器支持color-mix()

color-mix()自 2023 年中期以来，所有现代浏览器均支持该功能。与往常一样，请记住，并非所有用户都会拥有最新的浏览器。确保每个人都获得可用体验的一种方法是设置初始颜色值。不支持的浏览器color-mix()将忽略第二个声明。

div {
  background: rgb(150 0 255);
  background: color-mix(in srgb, blue, red);
}

或者，我们可以使用功能查询来检测浏览器是否支持color-mix()并相应地提供样式：

.card {
  background: lightblue;
}

@supports (color-mix(in srgb, blue, white)) {
  .card {
    --color: blue;
    background: color-mix(in srgb, var(--color), white 80%);
    border-top: 5px solid var(--color);
  }
}

如果您使用 PostCSS，则有一个与postcss-preset-env捆绑在一起的PostCSS 插件。该插件允许您编写函数而无需担心浏览器支持，因为您的代码在构建时会自动转换为跨浏览器兼容的 CSS。例如：color-mix()

.some-element {
  background-color: color-mix(in srbg, red, blue);
}

变成：

.some-element {
  background-color: rgb(128 0 128);
}

值得注意的是，这仅适用于静态值，不适用于 JavaScript 中设置的自定义属性或动态值。

[概括]

我们已经了解了如何使用该函数color-mix()创建颜色变化，以及如何将该函数与自定义属性结合使用以在项目和设计系统中使用。浏览器支持已经相当出色，我们可以期待在网络上使用颜色的新时代！

点赞收藏支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

往期热门精彩推荐

# 关于浏览器调试的30个奇淫技巧

# Next.js 的路由为什么是这样的

# 2024最新程序员接活儿搞钱平台盘点

解锁 JSON.stringify() 5 个鲜为人知的功能

解锁 JSON.stringify() 7 个鲜为人知的坑

如何去实现浏览器多窗口互动

面试相关热门推荐

前端万字面经------基础篇

前端万字面积------进阶篇

简述 pt、rpx、px、em、rem、%、vh、vw的区别

实战开发相关推荐

前端常用的几种加密方法

探索Web Worker在Web开发中的应用

不懂 seo 优化？一篇文章帮你了解如何去做 seo 优化

【实战篇】微信小程序开发指南和优化实践

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂？这篇文章帮你彻底搞定虚拟 DOM

移动端相关推荐

移动端横竖屏适配与刘海适配

移动端常见问题汇总

聊一聊移动端适配

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

更多精彩详见：个人主页