如何使用 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%forred，成果都是相同的 – 色彩首要是蓝色，带有一丝赤色。

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开发中的运用

不懂 搜索引擎优化 优化？一篇文章帮你了解怎么去做 搜索引擎优化 优化

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

前端性能优化实战

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

获取文件blob流地址完成下载功用

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

移动端相关引荐

移动端反正屏适配与刘海适配

移动端常见问题汇总

聊一聊移动端适配

Git 相关引荐

通俗易懂的 Git 入门

git 完成主动推送

更多精彩详见：个人主页