CSS color-mix() 主题配色与色彩空间实践

CSS color-mix() 主题配色与色彩空间实践概述`color-mix()` 支持在 sRGB/OKLCH 等色彩空间混色，生成更一致的色阶与状态色，便于设计系统落地。核心概念与参数语法：`color-mix(in <space>, <color> <percent>, <color> <percent>)`。色彩空间：优先 `oklch` 获取更线性的感知效果。特性检测：`CSS.supports('color: color-mix(in oklch, red 50%, white)')`。实践示例<style> :root { --brand: oklch(0.68 0.18 250); --brand-weak: color-mix(in oklch, var(--brand) 40%, white); --brand-strong: color-mix(in oklch, var(--brand) 80%, black); } .btn { background: var(--brand); color: white; } .btn:hover { background: var(--brand-strong); } .card { border: 1px solid var(--brand-weak); } </style> 验证方法一致性：在不同设备与浏览器下色阶过渡自然。可用性：状态色（hover/active/disabled）对比度合规。降级：不支持环境使用预计算静态色值。注意事项避免在性能敏感区域大量动态混色，使用变量缓存。统一色彩空间，避免跨空间混用造成不一致。与设计系统协作定义色阶与命名规范。