**CSS** `color-mix()`：在 **CSS** 中实现颜色混合，告别预处理器

CSS 的新玩具：`color-mix()`，调色盘从此不再单调

各位前端的弄潮儿们，大家好！今天咱们聊点新鲜的，一个让你的 CSS 调色板瞬间丰富起来的小玩意儿：color-mix()。

说起颜色，那可真是前端开发里的一门大学问。从最初的 #FFFFFF 到各种花里胡哨的色彩库，我们为了给网页穿上漂亮的“衣服”，可谓是绞尽脑汁。以前，想要实现一些复杂的颜色混合效果，要么祭出强大的预处理器（比如 Sass、Less），要么就得依赖 JavaScript 脚本。但现在，有了 color-mix()，这一切都将成为过去式！

color-mix() 是 CSS Color Module Level 5 规范中的一个新函数，它允许我们直接在 CSS 中混合两种颜色，而且还能控制混合的比例和颜色空间。简单来说，它就像一个调色师，可以把两种颜色像颜料一样混合在一起，创造出新的色彩。

告别预处理器：让 CSS 变得更纯粹

先来说说为什么 color-mix() 这么让人兴奋。相信不少同学都用过 Sass 或 Less 这样的预处理器。它们确实能大大提升 CSS 的编写效率，提供了变量、循环、函数等强大的功能。但是，预处理器也引入了额外的编译步骤，增加了项目的复杂度。

想象一下，为了实现一个简单的颜色渐变效果，你需要在 Sass 文件里定义变量、编写混合函数，然后编译成 CSS。这就像为了喝一杯橙汁，你得先去种橙子、买榨汁机、清洗橙子、榨汁，最后才能享用。

而 color-mix() 的出现，就像是直接在冰箱里拿出一盒橙汁，开盖即饮。它让我们可以在 CSS 中直接进行颜色混合，无需依赖预处理器，简化了开发流程，让 CSS 变得更加纯粹。

color-mix() 的基本语法：简单易懂，上手无压力

color-mix() 的语法非常简单：

color-mix( [ color-space ,] <color> , <color> [ , <percentage> ] )

看起来有点长，但其实很好理解。让我们逐一拆解：

color-space (可选)：指定颜色混合时使用的颜色空间。如果不指定，默认使用 lrgb 颜色空间。后面我们会详细介绍颜色空间。
<color>：要混合的颜色。可以是任何有效的 CSS 颜色值，比如 #FFFFFF、rgb(255, 0, 0)、hsl(0, 100%, 50%) 或者颜色关键字 red、blue 等等。
<percentage> (可选)：指定第一个颜色所占的比例。如果省略，则默认两种颜色各占 50%。

举个例子：

/* 混合红色和蓝色，红色占 30%，蓝色占 70% */
color: color-mix(in srgb, red 30%, blue);

/* 混合绿色和黄色，各占 50% */
color: color-mix(in srgb, green, yellow);

是不是很简单？就像在调色盘里倒入两种颜料，然后用刷子搅拌均匀一样。

颜色空间的奥秘：不同的空间，不同的味道

color-mix() 最有趣的地方在于它可以指定颜色空间。不同的颜色空间会影响颜色混合的结果，就像用不同的滤镜拍摄照片一样，会呈现出不同的风格。

常见的颜色空间包括：

srgb：标准的 RGB 颜色空间，也是 Web 上最常用的颜色空间。
lrgb：线性 RGB 颜色空间，在颜色混合时更符合人眼的感知。
oklab：一个感知均匀的颜色空间，可以避免颜色混合时出现“脏”颜色。
oklch：基于 oklab 的颜色空间，使用色相、饱和度、亮度来表示颜色，更方便进行颜色调整。
hsl：色相、饱和度、亮度颜色空间，比较直观，方便调整颜色的鲜艳程度和明暗度。
hwb：色相、白度、黑度颜色空间，也比较直观，适合创建柔和的颜色。

那么，应该选择哪个颜色空间呢？一般来说，oklab 和 oklch 是比较好的选择，因为它们能产生更自然、更和谐的颜色混合效果。但具体选择哪个，还是要根据实际需求和个人喜好来决定。

让我们用几个例子来说明不同颜色空间的效果：

/* 在 srgb 颜色空间中混合红色和蓝色 */
.srgb {
  background-color: color-mix(in srgb, red, blue); /* 结果：紫色 */
}

/* 在 lrgb 颜色空间中混合红色和蓝色 */
.lrgb {
  background-color: color-mix(in lrgb, red, blue); /* 结果：稍微偏暗的紫色 */
}

/* 在 oklab 颜色空间中混合红色和蓝色 */
.oklab {
  background-color: color-mix(in oklab, red, blue); /* 结果：更柔和的紫色 */
}

你可以把这段代码复制到你的 HTML 文件中，然后用浏览器打开，看看不同颜色空间的效果。你会发现，即使是相同的颜色，在不同的颜色空间中混合，也会产生微妙的差异。

color-mix() 的应用场景：创意无限，等你来探索

color-mix() 的应用场景非常广泛，只要你想得到，就能用它来实现。下面是一些常见的例子：

创建主题色： 可以用 color-mix() 来创建网站的主题色。比如，你可以根据用户的选择，动态地调整主题色的亮度、饱和度，或者和其他颜色进行混合，从而打造出个性化的用户体验。

:root {
  --primary-color: #007bff; /* 蓝色 */
}

/* 混合主题色和白色，创建一个更亮的颜色 */
.button {
  background-color: color-mix(in srgb, var(--primary-color), white 80%);
}

/* 混合主题色和黑色，创建一个更暗的颜色 */
.header {
  background-color: color-mix(in srgb, var(--primary-color), black 80%);
}

实现颜色渐变： 虽然 CSS 提供了 linear-gradient 和 radial-gradient 等渐变函数，但 color-mix() 也可以用来实现一些简单的颜色渐变效果。

/* 从红色渐变到蓝色 */
.gradient {
  background-color: color-mix(in srgb, red, blue);
  background-image: linear-gradient(to right, red, color-mix(in srgb, red 50%, blue), blue);
}

创建阴影效果： 可以用 color-mix() 来创建阴影效果。比如，你可以将元素的背景色和黑色混合，然后调整混合比例，从而模拟出不同深度的阴影。

/* 创建一个浅灰色的阴影 */
.shadow {
  box-shadow: 0 2px 4px color-mix(in srgb, black 20%, transparent);
}

/* 创建一个深灰色的阴影 */
.shadow-dark {
  box-shadow: 0 4px 8px color-mix(in srgb, black 40%, transparent);
}

动态调整颜色： 可以用 JavaScript 结合 CSS 变量，动态地调整颜色。比如，你可以创建一个颜色选择器，让用户选择自己喜欢的颜色，然后用 color-mix() 将其和其他颜色进行混合，从而实现更丰富的颜色效果。

<input type="color" id="color-picker">
<div class="element"></div>

<style>
  :root {
    --selected-color: #FFFFFF; /* 默认颜色 */
  }

  .element {
    width: 100px;
    height: 100px;
    background-color: color-mix(in srgb, var(--selected-color), red 50%);
  }
</style>

<script>
  const colorPicker = document.getElementById('color-picker');
  const element = document.querySelector('.element');

  colorPicker.addEventListener('input', function() {
    document.documentElement.style.setProperty('--selected-color', this.value);
  });
</script>

这些只是 color-mix() 的一些简单应用。实际上，它的潜力远不止于此。只要你发挥想象力，就能用它创造出更多令人惊艳的颜色效果。

兼容性：时代的眼泪？不用担心！

虽然 color-mix() 是一个很棒的新特性，但它的兼容性目前还不是很好。截至目前，只有 Chrome、Edge 和 Safari 等现代浏览器完全支持它。对于一些老旧的浏览器，可能需要使用 Polyfill 或者回退方案。

不过，随着浏览器的不断更新，相信 color-mix() 的兼容性会越来越好。我们可以提前学习和掌握它，为未来的开发做好准备。

总结：拥抱变化，玩转颜色

color-mix() 是 CSS 发展的一个重要里程碑。它让我们可以直接在 CSS 中进行颜色混合，简化了开发流程，提升了开发效率。虽然它的兼容性目前还不是完美，但相信随着时间的推移，它会成为 Web 开发中不可或缺的一部分。

所以，各位前端er们，不要犹豫，赶快拥抱这个新玩具，玩转颜色，创造出更加绚丽多彩的网页吧！记住，技术日新月异，保持学习的热情，才能在前端的浪潮中乘风破浪！

CSS `color-mix()`：在 CSS 中实现颜色混合，告别预处理器

CSS 的新玩具：`color-mix()`，调色盘从此不再单调

发表回复取消回复

CSS 的新玩具：color-mix()，调色盘从此不再单调

发表回复 取消回复

CSS 的新玩具：`color-mix()`，调色盘从此不再单调

发表回复取消回复