CSS color-mix 颜色系统与主题配色实践

CSS color-mix 颜色系统与主题配色实践概述`color-mix()` 提供在指定色彩空间中按比例混合颜色的能力，便于生成 hover/active 等语义色并保持感知均衡。核心概念与参数色彩空间：`in oklch`、`lab`、`srgb` 等选择不同空间混色。比例控制：`color-mix(in oklch, colorA 70%, colorB)`。语义色板：基于基础色生成状态色，减少手工维护。实践示例<button class="btn">按钮</button> <style> :root { --primary: oklch(0.65 0.12 260); } .btn { background: var(--primary); } .btn:hover { background: color-mix(in oklch, var(--primary) 85%, white); } </style> 验证方法浏览器支持：Chrome 111+、Safari 16.4+、Firefox 117+。测试环境：Windows 11 / macOS 14；不同屏幕与主题模式下颜色感知一致。设计一致性：基于同一空间生成的色板在亮暗主题下对比度充足。注意事项推荐在 `oklch` 空间进行混色以保持感知线性与对比度。与 `color-contrast()`、系统主题变量协同实现可访问性配色。在不支持的环境提供预编译或回退色值。