color-mix()函数可混合两种颜色生成新色，语法为color-mix(颜色空间, 颜色1 百分比, 颜色2 百分比)，支持srgb、lch等空间，其中lch/oklch混合更自然；常用于主题切换与渐变设计，需注意浏览器兼容性及回退方案。
css的color-mix()函数是一个全新的颜色混合功能，允许你将两种颜色按指定比例混合，生成新的颜色。这个函数让设计系统、主题切换和渐变效果变得更加灵活和直观。它目前在现代浏览器中逐步支持，是CSS Color Module Level 5的一部分。
基本语法
color-mix()的语法如下：
color-mix(<color-space>, <color1> <percentage1>?, <color2> <percentage2>?)
- color-space：指定颜色混合所用的空间，如
srgb、lch、oklch等。 - color1 和 color2：参与混合的两个颜色。
- percentage：每个颜色所占的比例，默认为50%。
如果只写一个百分比，另一个会自动补足到100%。例如：color-mix(srgb, red 70%, blue) 表示红占70%，蓝占30%。
常用颜色空间对比
不同的颜色空间会影响混合结果的视觉效果：
立即学习“前端免费学习笔记（深入）”；
- srgb：传统RGB空间，混合可能显得灰暗或不自然。
- lch / oklch：感知均匀的颜色空间，混合更平滑、更符合人眼感受，推荐用于高质量色彩设计。
举例：
background: color-mix(in lch, red, yellow); /* 生成更鲜艳的橙色 */
实际使用技巧
你可以用color-mix()实现动态主题、悬停效果或背景渐变过渡。
- 按钮悬停时轻微加深背景色： background: color-mix(in srgb, #007bff 80%, black);
- 在深色主题中混合文字颜色： color: color-mix(in oklch, white 60%, #333);
- 创建柔和的背景过渡替代渐变： background: color-mix(in lch, #ff6b6b, #4ecdc4);
注意事项与兼容性
目前color-mix()在chrome 118+、edge 118+等新版浏览器中支持，但需启用实验性功能或默认开启。safari和firefox正在跟进。
为了确保兼容性，建议搭配备用颜色使用：
.element { background: #007bff; /* 回退颜色 */ background: color-mix(in srgb, #007bff, #ffffff 20%); }
可以结合@supports做特性检测：
@supports (background: color-mix(in srgb, red, blue)) { .element { background: color-mix(in srgb, red, blue); } }
基本上就这些。掌握color-mix()能让你更精细地控制色彩表现，尤其是在设计系统中统一色调层次时非常实用。不复杂但容易忽略细节，比如颜色空间的选择对最终效果影响很大。