CSS颜色函数color-mix怎么用_CSS新特性混合两种颜色技巧

color-mix()函数可混合两种颜色生成新色，语法为color-mix(颜色空间, 颜色1 百分比, 颜色2 百分比)，支持srgb、lch等空间，其中lch/oklch混合更自然；常用于主题切换与渐变设计，需注意浏览器兼容性及回退方案。

CSS的color-mix()函数是一个全新的颜色混合功能，允许你将两种颜色按指定比例混合，生成新的颜色。这个函数让设计系统、主题切换和渐变效果变得更加灵活和直观。它目前在现代浏览器中逐步支持，是CSS Color Module Level 5的一部分。

基本语法

color-mix()的语法如下：

• color-space：指定颜色混合所用的空间，如 srgb、lch、oklch 等。
• color1 和 color2：参与混合的两个颜色。
• percentage：每个颜色所占的比例，默认为50%。

如果只写一个百分比，另一个会自动补足到100%。例如：color-mix(srgb, red 70%, blue) 表示红占70%，蓝占30%。

常用颜色空间对比

不同的颜色空间会影响混合结果的视觉效果：

立即学习“前端免费学习笔记（深入）”；

• srgb：传统RGB空间，混合可能显得灰暗或不自然。
• lch / oklch：感知均匀的颜色空间，混合更平滑、更符合人眼感受，推荐用于高质量色彩设计。

举例：

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

20

查看详情

实际使用技巧

你可以用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正在跟进。

为了确保兼容性，建议搭配备用颜色使用：

可以结合@supports做特性检测：

基本上就这些。掌握color-mix()能让你更精细地控制色彩表现，尤其是在设计系统中统一色调层次时非常实用。不复杂但容易忽略细节，比如颜色空间的选择对最终效果影响很大。

以上就是CSS颜色函数color-mix怎么用_CSS新特性混合两种颜色技巧的详细内容，更多请关注php中文网其它相关文章！