所有新的、实验性的颜色功能都是有原因的，CSS正在引入这些功能。而它们所激起的所有兴奋也是有原因的。
颜色是困难的。定义一个基本的调色板可能很耗时，而且涉及到很多利益相关者。这还没有考虑到上下文的颜色，比如悬停、活动和非活动状态。定义这些值需要更多的时间和对可及性的更多关注。这可能会导致一个臃肿的调色板和一个更加臃肿的设计标记集。
这可能是一个需要处理的问题。🤹
虽然CSScolor-mix() 函数可能只是将两种颜色混合在一起，但它是否可以用来简化调色板并精简跨主题的上下文值？
CSS Color-Mix()函数
CSScolor-mix() 函数是一个实验性功能，目前是颜色模块5的一部分。正如它的名字一样，该函数将接受任何两种颜色，将它们混合在一起并返回一个小的颜色弗兰克。
为了本文的目的，让我们在使用这个例子时定义这些参数将如何被调用。
- 色彩空间指的是
HSL。 - 基色指的是
red。 - 基准百分比指的是
50%。 - 混合色指的是
white。 - 混合百分比，在这个例子中没有显示，将参考后面的一个值。
这里有相当多的移动部件，所以让我们有一个快速的互动视觉来模拟基色、基色百分比和混合色。
构建线性色轮是一件非常有趣的事情，是对使用color-mix() 。在试验一个新功能时，如果已经知道视觉结果应该是什么，往往会有帮助。
那么，这是如何工作的呢？
首先，定义基本原色。
--primary-1: #ff0;
--primary-2: #f00;
--primary-3: #00f;
接下来，混合三原色来创造二级色。
--secondary-1: color-mix(in srgb, var(--primary-1) 50%, var(--primary-2));
--secondary-2: color-mix(in srgb, var(--primary-2) 50%, var(--primary-3));
--secondary-3: color-mix(in srgb, var(--primary-3) 50%, var(--primary-1));
最后，将三原色和二原色混合在一起，创造出第三种颜色。
--tertiary-1: color-mix(in srgb, var(--primary-1) 50%, var(--secondary-1));
--tertiary-2: color-mix(in srgb, var(--secondary-1) 50%, var(--primary-2));
--tertiary-3: color-mix(in srgb, var(--primary-2) 50%, var(--secondary-2));
--tertiary-4: color-mix(in srgb, var(--secondary-2) 50%, var(--primary-3));
--tertiary-5: color-mix(in srgb, var(--primary-3) 50%, var(--secondary-3));
--tertiary-6: color-mix(in srgb, var(--secondary-3) 50%, var(--primary-1));
当然，在我上美术课时，只有一套颜料。因此，如果你想要黄色，就只有一种黄色。红色呢？只有一种红色。蓝色？嗯，你懂的。
但是网络和CSS以*"色彩空间 "的方式提供了更广泛的色彩选择。*其中一些色彩空间可能已经很熟悉了，但还有不少我以前没有用过的，包括四个正在逐渐获得支持的新的CSS色彩功能。
色彩空间可以以不同的方式计算出它们的颜色。较新的色彩空间提供了更宽的调色板，具有更鲜艳的色调，以最大限度地利用最新的屏幕技术--如超高清视网膜显示器。这意味着，一种颜色在每个色彩空间中的表现可能是不同的。
知道了CSScolor-mix() 功能支持使用不同的颜色空间，让我们通过用一个自定义属性取代前面例子中对srgb 的使用来试验一下颜色空间，看看色轮的变化。
虽然W3文档很好地解释了这一功能背后的计算方法，但数学有点超出我的能力范围，无法解释清楚--毕竟这是艺术课。但是，我可以尽可能地把它说出来。
--math-bg: color-mix(in srgb, red 20%, white 60%);
在这个例子中，基本百分比是20 ，而混合百分比是60 ，创造了一个总数为80 。这给了我们一个所谓的alpha乘数0.8 ，其中1 = 100 和0.8 = 80% 。
为了填补空白，该函数将把基本百分比和混合百分比乘以这个阿尔法乘数，将它们放大到100%，同时保持与它们的原始权重相对应。
20% * 100/80 = 25%
60% * 100/80 = 75%
--math-bg: color-mix(in srgb, red 25%, white 75%);
如果基本百分比和混合百分比的总和超过100，将采取这种方法的反转，以四舍五入到100。同样，这些数值的比例背后的数学，以及一般的混合计算，已经超出了我的深度。对于那些有兴趣深入研究color-mix() 的技术问题的人，我会指出W3文档。
然而，下面的演示并不需要对数学的理解，基础和混合百分比都可以调整来查看结果。
因为--background-color 属性在技术上被定义，所以回退不会触发。
然而，这并不是说color-mix() ，但不能逐步使用。它可以与@supports() 函数配对，但如果你决定这样做，就要注意了。尽管它可能很令人兴奋，但由于支持有限，而且有可能对语法和/或功能进行修改，最好还是不要把这个小东西混入整个代码库。
@supports (background: color-mix(in srgb, red 50%, blue)) {
--background-color: color-mix(in srgb, red 50%, blue);
}
当前颜色不被支持
CSS的一个强大的小部件是能够使用currentColor 作为一个值，使样式与元素保持相对。不幸的是，这个相对变量不能与color-mix() 一起使用。
button {
background: color-mix(in srgb, currentColor 50%, white);
}
我们希望能对相对颜色有更大的控制，但不幸的是，以这种方式使用currentColor 是行不通的。虽然color-mix() 不能实现相对颜色到这种程度，但新的相对颜色语法也将出现在CSS中。与Stefan Judis一起阅读关于CSS相对颜色语法的文章。
结束语
虽然color-mix() 可能没有像color-contrast() 那样强大，但它在CSS工具带中绝对有一席之地--或者说是厨房的橱柜。无论在哪里。
情景色彩的用例很吸引人，而与设计系统和主题的整合（有可能简化调色板，同时保留巨大的灵活性）是我最想在这个功能中进行实验的地方。然而，由于目前的浏览器支持，这些实验可能还需要一段时间。
就个人而言，将color-mix() 与color-contrast() 结合起来是一个似乎特别令人兴奋的领域，但如果没有适当的浏览器支持，仍然难以充分探索。
你会在哪里首先实现color-mix() ？🤔
也许它可以作为一个混合函数来大致复制lighten() 和darken() SCSS函数。在用户生成的主题领域，是否会有更大的潜力？甚至是基于网络的图形编辑器和工具？也许它可以被用作基于设备能力的简单颜色格式转换器。
尽管如此，CSS正在为网络提供大量新的和令人兴奋的成分。在我们开始混合一些令人难以置信的食谱之前，这只是一个时间问题。
