CSS color-mix：颜色混合与色彩空间

---

title: CSS color-mix：颜色混合与色彩空间

keywords:

• color-mix()
• OKLCH
• LAB
• 相对色
• 主题色

description: 使用 color-mix 在不同色彩空间进行颜色混合，改善主题与可视化一致性，并给出空间选择与对比度建议。

categories:

• 文章资讯
• 编程技术

---

概述

color-mix() 允许在指定色彩空间中混合两种颜色并返回新色。常用空间包括 oklch、lab 与 srgb。选择感知均匀的空间（如 OKLCH）可获得更稳定的视觉过渡。

用法/示例

.btn { background: color-mix(in oklch, #4f46e5 70%, white) }
.chart-accent { color: color-mix(in lab, red 40%, blue) }

工程建议

• 选择 OKLCH/LAB 以获得更均匀的混合；在需要与设备一致时使用 sRGB。
• 对文本与背景混合后的对比度进行审查，确保可访问性。
• 为不支持环境提供固定色或在构建时预混合。

参考与验证

• MDN：color-mix() — https://developer.mozilla.org/docs/Web/CSS/color_value/color-mix
• W3C：CSS Color — https://www.w3.org/TR/css-color-5/
• web.dev：Modern color spaces — https://web.dev/articles/color-spaces-and-levels