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 新版支持逐步完善主题色梯度与状态色统一；可读性与对比度稳定