CSS color-mix 主题梯度与色彩治理实践 OKLCH

概览`color-mix()` 能按比例在指定颜色空间混合颜色。使用 OKLCH 可获得更稳定的感知一致性，适合构建品牌与状态色的梯度系统。基础混合:root { --brand: oklch(60% 0.12 250); --surface: oklch(98% 0.02 250); } .btn { background: var(--brand); } .btn:hover { background: color-mix(in oklch, var(--brand) 80%, white 20%); } .btn:disabled { background: color-mix(in oklch, var(--brand) 40%, var(--surface) 60%); } 文本与边框.text-muted { color: color-mix(in oklch, black 70%, white 30%); } .card { border-color: color-mix(in oklch, var(--brand) 30%, black 70%); } 治理要点在 OKLCH 空间混合获得更稳定的视觉一致性；与令牌化协作统一品牌与状态梯度。控制混合比例与底色，避免对比不足与可读性下降。与 `prefers-color-scheme` 协同，在暗色模式下调整底色与比例。验证与指标浏览器：Chrome 120+、Safari 17+；Firefox 新版支持逐步完善主题色梯度与状态色统一；可读性与对比度稳定