CSS颜色函数color-mix是近几年得到主流浏览器支持的原生特性，它允许我们在样式表中直接把两种颜色按照指定比例混合，生成新的颜色值，而不再依赖Sass或Less等预处理器。借助这个函数，前端开发者可以更灵活地控制主题色、状态色和叠加效果。
color-mix基本语法
color-mix函数的标准写法如下，其中颜色空间决定混合方式，百分比表示每种颜色的权重：
/* 在 sRGB 空间中，将红色和蓝色按 50% 与 50% 混合 */
.example {
background-color: color-mix(in srgb, red 50%, blue 50%);
}
如果省略某个颜色的比例，浏览器会自动用100%减去另一个比例来补全。例如只写red 30%，则蓝色默认占70%。
常用颜色空间选择
color-mix支持多种颜色空间，不同空间下的混合视觉结果会有差别：
- srgb：最常用，符合屏幕显示直觉
- oklab：感知更均匀，渐变更自然
- hsl：在色相环上插值，适合做色相过渡
混合比例书写技巧
我们可以用具体数值或相对值控制混合结果：
| 写法 | 含义 |
|---|---|
| color-mix(in srgb, #ff0000, #0000ff) | 各占一半 |
| color-mix(in srgb, #ff0000 20%, #0000ff) | 红两成蓝八成 |
| color-mix(in oklab, white 10%, black) | 接近黑略带白 |
实际开发应用场景
1. 主题色自动衍生
基于一个主色生成深色按钮背景：
:root {
--primary: #3b82f6;
}
.btn {
/* 主色与黑色混合得到按下态底色 */
background: color-mix(in srgb, var(--primary) 80%, #000 20%);
}
2. 悬停态轻微变色
鼠标悬停时让链接颜色叠加一点白色：
a {
color: #2563eb;
}
a:hover {
color: color-mix(in srgb, currentColor 85%, white);
}
3. 半透明叠加替代
以往用rgba写半透明，现在可直接混合白色模拟透明度：
.card {
/* 相当于在原色上铺了 15% 的白雾 */
border-color: color-mix(in srgb, #333 85%, white);
}
浏览器兼容与降级
目前Chrome、Edge、Safari和Firefox新版本均已支持color-mix。若需兼容旧浏览器，可用@supports做判断：
.box {
background: #888;
}
@supports (background: color-mix(in srgb, red, blue)) {
.box {
background: color-mix(in srgb, red, blue);
}
}
总体来看，color-mix让CSS拥有了原生的颜色计算能力，书写简单且语义清晰，是值得在项目中逐步采用的新特性。