CSS `color-mix()` (提案)：在 CSS 中混合颜色与通道控制

各位观众老爷，晚上好！今天咱们来聊聊 CSS 里一个挺有意思的新玩意儿，叫做 color-mix()。这玩意儿，说白了，就是让你在 CSS 里像个调色师一样，可以混合颜色，而且还能控制各个颜色通道的比例。听起来是不是有点小激动？别急，咱们慢慢来，保证让你听得懂，用得爽。

开场白：颜色，不止红黄蓝

以前，我们在 CSS 里玩颜色，要么用十六进制码（#FF0000），要么用 RGB（rgb(255, 0, 0)），要么用颜色名字（red）。这些方法固然简单直接，但总觉得少了点什么。想象一下，你想把红色和蓝色混合成紫色，还得自己算 RGB 值，是不是有点麻烦？ color-mix() 的出现，就是为了解决这个问题，让你更方便地玩转颜色。

color-mix() 的基本语法

color-mix() 函数的基本语法如下：

color-mix( [ color-space , ] color percentage , color percentage [, ... ] )

看起来有点复杂，咱们拆开来慢慢看：

• color-space (可选): 指定颜色空间。这个参数告诉浏览器用什么方式来混合颜色。常用的颜色空间有 srgb、srgb-linear、lab、oklab、lch、oklch、display-p3、rec2020、a98-rgb。 如果省略，默认是 srgb。 不同颜色空间混合出来的效果可能会有细微差别，就像不同的颜料混合出来的效果不同一样。
• color: 你要混合的颜色。可以是任何 CSS 颜色值，比如十六进制码、RGB、HSL、颜色名字等等。
• percentage: 颜色所占的比例。必须是一个百分比值，比如 20%、50%、80%。所有颜色的百分比加起来必须等于 100%。 如果只有一个颜色，可以省略百分比，默认就是 100%。

实战演练：颜色混合初体验

光说不练假把式，咱们来几个实际的例子。

例子 1：红蓝变紫

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

这段代码的意思是，把红色和蓝色按照 50% 的比例混合，结果就是紫色。 in srgb 表示使用 sRGB 颜色空间进行混合。

例子 2：深浅不一的绿

.element {
  background-color: color-mix(in srgb, green 80%, white 20%);
}

这里我们把绿色和白色混合，绿色占 80%，白色占 20%。结果就是一个比较浅的绿色，类似于淡绿色。

例子 3：只有一个颜色？没问题！

.element {
  background-color: color-mix(in srgb, red); /* 相当于 color-mix(in srgb, red 100%) */
}

如果只有一个颜色，百分比可以省略，默认就是 100%。

颜色空间的选择：选哪个好？

color-mix() 最有意思的地方在于，你可以选择不同的颜色空间进行混合。不同的颜色空间，混合出来的效果可能会有微妙的差别。

• srgb (默认): 标准 RGB 颜色空间，也是我们最常用的颜色空间。大多数情况下，选择 srgb 就足够了。
• srgb-linear: sRGB 的线性版本。在某些情况下，使用线性颜色空间可以得到更自然、更真实的混合效果。
• lab 和 oklab: 这两个颜色空间是基于人类视觉感知的。它们在处理颜色渐变和混合时，通常能得到更平滑、更自然的过渡效果。oklab是lab的改进版本，色彩感知更加均匀。
• lch 和 oklch: 类似于 lab 和 oklab，但使用了极坐标表示颜色（亮度、色度和色相）。 oklch同样是lch的改进版本。
• display-p3: 一种比 sRGB 更广的颜色空间，可以显示更多的颜色。如果你的显示器支持 display-p3，可以尝试使用它来获得更丰富的色彩。
• rec2020: 用于超高清电视的颜色空间，比 display-p3 还要广。
• a98-rgb: Adobe RGB 颜色空间，通常用于印刷行业。

那么，到底该选哪个颜色空间呢？一般来说，如果没有特殊需求，选择默认的 srgb 就行了。 如果你需要更平滑、更自然的颜色过渡，可以尝试 lab、oklab、lch 或 oklch。 如果你的显示器支持更广的颜色空间，可以尝试 display-p3 或 rec2020。

高级技巧：通道控制

color-mix() 不仅仅可以混合颜色，还可以控制各个颜色通道的比例。 这意味着你可以单独调整红、绿、蓝、透明度等通道的比例，从而得到更精确的颜色效果。

例子 4：调整透明度

.element {
  background-color: color-mix(in srgb, rgba(255, 0, 0, 0.5) 50%, blue 50%);
}

在这个例子中，我们把半透明的红色和蓝色混合。 rgba(255, 0, 0, 0.5) 表示红色，透明度为 0.5。 混合后的颜色，透明度也会受到影响。

例子 5：使用关键词 transparent

.element {
  background-color: color-mix(in srgb, red 50%, transparent 50%);
}

transparent 关键词表示完全透明。 把红色和 transparent 混合，相当于降低了红色的透明度。

与 CSS 变量结合：更灵活的颜色控制

color-mix() 可以和 CSS 变量结合使用，从而实现更灵活的颜色控制。

例子 6：使用 CSS 变量

:root {
  --primary-color: red;
  --secondary-color: blue;
}

.element {
  background-color: color-mix(in srgb, var(--primary-color) 60%, var(--secondary-color) 40%);
}

在这个例子中，我们定义了两个 CSS 变量 --primary-color 和 --secondary-color，分别表示红色和蓝色。 然后，在 color-mix() 函数中使用这两个变量，从而可以方便地修改颜色。

例子 7：动态调整颜色比例

:root {
  --primary-percentage: 60%;
}

.element {
  background-color: color-mix(in srgb, red var(--primary-percentage), blue calc(100% - var(--primary-percentage)));
}

/* 当 --primary-percentage 改变时，颜色也会动态变化 */

这里我们使用 calc() 函数，动态计算蓝色所占的比例。 当 --primary-percentage 改变时，颜色也会动态变化。 这可以用于创建交互式的颜色效果。

应用场景：无限可能

color-mix() 的应用场景非常广泛，只要涉及到颜色，都可以用到它。

• 主题切换: 可以根据用户选择的主题，动态调整颜色。
• 强调色: 可以根据主色调，自动生成强调色。
• 渐变效果: 可以用于创建更复杂的渐变效果。
• 数据可视化: 可以用于根据数据值，动态调整颜色。
• 动态调色板: 可以根据一个基准颜色，自动生成一个完整的调色板。

兼容性：且用且珍惜

虽然 color-mix() 很强大，但目前（2024年）的兼容性还不是很好。 只有部分现代浏览器支持它。 在使用时，需要注意兼容性问题，并提供合适的 fallback 方案。

你可以使用 Can I Use 网站来查看 color-mix() 的兼容性：https://caniuse.com/?search=color-mix

总结：颜色，任你掌控

color-mix() 是 CSS 中一个非常有用的新特性。 它可以让你更方便地混合颜色、控制颜色通道，从而实现更丰富的颜色效果。 虽然目前兼容性还不是很好，但相信随着时间的推移，它会得到更广泛的应用。

表格总结：

特性	描述
基本语法	color-mix( [ color-space , ] color percentage , color percentage [, ... ] )
color-space	指定颜色空间，如 srgb、srgb-linear、lab、oklab、lch、oklch、display-p3、rec2020、a98-rgb。默认 srgb。
color	要混合的颜色，可以是任何 CSS 颜色值。
percentage	颜色所占的比例，必须是百分比值。所有颜色的百分比加起来必须等于 100%。
透明度控制	可以使用 rgba() 或 transparent 关键词来控制透明度。
CSS 变量结合	可以和 CSS 变量结合使用，实现更灵活的颜色控制。
应用场景	主题切换、强调色、渐变效果、数据可视化、动态调色板等。
兼容性	兼容性还不是很好，需要注意兼容性问题，并提供合适的 fallback 方案。

代码示例总结:

示例	描述
color-mix(in srgb, red 50%, blue 50%)	将红色和蓝色以 50% 的比例混合，结果为紫色。
color-mix(in srgb, green 80%, white 20%)	将绿色和白色混合，绿色占 80%，白色占 20%，结果为一个较浅的绿色。
color-mix(in srgb, red)	只有一个颜色时，默认比例为 100%，相当于 color-mix(in srgb, red 100%)。
color-mix(in srgb, rgba(255, 0, 0, 0.5) 50%, blue 50%)	将半透明的红色和蓝色混合。
color-mix(in srgb, red 50%, transparent 50%)	将红色和透明色混合，降低红色的透明度。
:root {--primary-color: red; --secondary-color: blue;} .element { background-color: color-mix(in srgb, var(--primary-color) 60%, var(--secondary-color) 40%);}	使用 CSS 变量进行颜色混合。

好了，今天的讲座就到这里。 希望大家能从中学到一些东西，并在实际项目中灵活运用 color-mix()。 如果有什么问题，欢迎提问。 咱们下期再见！