快速总结↬ 定义调色板和主题可能需要大量工作，尤其是在考虑元素各种状态的上下文颜色时。虽然 CSS​​color-mix()​​ 仅将两种颜色混合在一起，但这个小功能可能是无需最大努力即可最大化颜色的关键。

CSS 引入所有新的、实验性的颜色特性是有原因的。他们激起的所有兴奋都是有原因的。

颜色很难。定义基本调色板可能很耗时，并且涉及很多利益相关者。这甚至没有考虑上下文颜色，例如悬停、活动和非活动状态。定义这些值需要更多时间和更多关注可访问性。这可能会导致一个臃肿的调色板和一组更加臃肿的设计标记。

杂耍可能很多。🤹

虽然 CSS​​color-mix()​​函数只能将两种颜色混合在一起，但它是否可以用于简化调色板并简化跨主题的上下文值？

CSS Color-Mix() 函数 

CSS​​color-mix()​​​功能是一项实验性功能，目前是​​Color Module 5​​的一部分。顾名思义，该函数将接受任何两种颜色，将它们混合在一起并返回一点颜色 Frankenstein。

使用 CSS Color-Mix() 简化你的调色板_firefox

CSS Color-Mix() 所需语法

为了本文的目的，让我们定义在使用此示例时如何调用这些参数。

  • 颜色空间指的是​​HSL​​；
  • 基色将指​​red​​;
  • Base Percent指的是​​50%​​;
  • 混合颜色指的是​​white​​；
  • 本示例中未显示的混合百分比将引用稍后介绍的值。

这里有很多移动的部分，所以让我们有一个快速的交互式视觉来模拟基础颜色、基础百分比和混合颜色。



颜色混合混合两种不同百分比的颜色的结果

与任何实验性功能一样，语法或功能可能会在浏览器广泛采用之前发生变化。但是，颜色模块 5 中的功能似乎足够稳定，至少可以开始修补我们自己。

虽然​​color-mix()​​​可能没有类似的东西那么强大​​color-contrast()​​，但它肯定在 CSS 工具带或厨柜中占有一席之地。无论在哪里。

上下文颜色的用例很有趣，而与设计系统和主题的集成（以潜在地简化调色板同时保持极大的灵活性）是我最想在该功能中进行试验的地方。但是，由于当前的浏览器支持，这些实验可能还有一段路要走。

就个人而言，结合​​color-mix()​​​是​​color-contrast()​​一个看起来特别令人兴奋的领域，但如果没有适当的浏览器支持，仍然很难充分探索。

您将首先在哪里实施​​color-mix()​​？🤔

也许它可以用作一个 mixin 来粗略地复制​​lighten()​​​和​​darken()​​SCSS 功能。用户生成主题领域是否有更大的潜力？甚至是基于网络的图形编辑器和工具？也许它可以用作基于设备功能的简单颜色格式转换器。

然而，CSS 为网络提供了大量新的和令人兴奋的成分。我们开始混合一些令人难以置信的食谱只是时间问题。