color-mix() 是 CSS Color Level 5 规范中引入的函数，用于在指定的色彩空间中混合两种颜色。它接受两个颜色值和一个可选的混合比例，返回一个新的颜色值。语法为：
color-mix(in <colorspace>, <color1> [percentage], <color2> [percentage])
这是原生CSS中实现颜色混合的强大工具，无需预处理器。

目前主流浏览器均已支持：Chrome 111+、Edge 111+、Firefox 113+、Safari 16.2+。覆盖了全球约 92%+ 的用户。对于不支持的旧浏览器，可以使用 @supports 查询提供降级方案。

色彩空间决定了颜色混合的插值路径：
• sRGB：在 sRGB 色域内线性插值，简单直接但感知不均匀。
• OKLCH / LCH：在感知均匀空间插值，混合过渡更自然，色相变化更平滑。
• HSL：按色相环最短路径插值，可能产生意想不到的中间色。
• display-P3：在更广的色域中混合，结果可能更鲜艳。

可以。如果省略两个颜色的百分比，默认各占 50%。如果只指定一个颜色的百分比，另一个会自动计算为 100% - 指定百分比。如果两个百分比之和小于100%，浏览器会按比例归一化处理。

• 悬停/激活状态：混合10%的黑色或白色来快速生成 hover 颜色。
• 透明度替代：在不使用 opacity 的情况下创建半透明效果（避免层叠问题）。
• 动态主题：基于品牌色混合生成派生色，构建完整的调色板。
• 渐变优化：在渐变中使用 color-mix 创建更丰富的中间色。
• CSS变量结合：与 var() 配合实现动态颜色系统。

Sass 的 mix() 仅在 sRGB 色彩空间中混合，且是编译时处理。CSS 的 color-mix() 支持多种色彩空间（OKLCH、LCH、display-P3 等），在浏览器运行时计算，可以响应 CSS 变量和动态变化，功能更强大灵活。

OKLCH（也叫 Oklch）是基于感知均匀性设计的色彩空间，解决了 sRGB 和 HSL 在混合时出现的灰色死区问题。在 OKLCH 中混合颜色时，亮度、色度和色相的过渡更加自然流畅，更符合人眼对颜色的感知。CSS 工作组和设计工具（如 Figma）也在推广这一色彩空间。

推荐使用渐进增强策略：
background: #your-fallback-color;
@supports (background: color-mix(in srgb, red, blue)) {
  background: color-mix(in oklch, var(--color1) 70%, var(--color2) 30%);
}
这样在不支持的浏览器中会使用降级颜色，不会破坏页面。