CSS变量不能只存OKLCH的色相值（H）并单独复用，因为oklch()是原子函数，浏览器不支持拆解或动态拼接其分量；若参数含var()，整条声明静默失效。
CSS变量不能只存OKLCH的色相值（H）并单独复用——oklch()是原子函数，浏览器不支持拆解或动态拼接oklch(L C H)中的单个分量。你写--hue: 258.5，再试图组合成oklch(60% 0.28 var(--hue))，整条声明会静默失效。
为什么var(--hue)不能直接塞进oklch()参数里
浏览器解析oklch()时要求所有参数在语法层面就合法：L必须带%，C必须是无单位小数，H必须是纯数字（不能含deg，也不能是变量）。一旦任一参数为var()，整个oklch()声明被跳过，不报错、不降级、不继承。
- ❌
background-color: oklch(60% 0.28 var(--hue));→ 渲染为空白或 fallback 色 - ✅
background-color: oklch(60% 0.28 258.5);→ 正常生效 - ✅
background-color: var(--primary-color, #3b82f6);→ 变量存完整颜色值，安全
真正可落地的简化方案：用语义变量封装整组OKLCH值
多主题系统要“简化”，不是靠拆解OKLCH，而是靠把设计意图映射到语义变量上，并让每个主题覆盖整套值。例如：
- 定义角色变量：
--color-primary、--color-primary-hover、--color-primary-disabled - 每个主题（
:root和[data-theme="dark"] :root）都完整声明这些变量，值为完整的oklch(L% C H) - 禁用态不用“算”C值，而是在主题块里直接写好：
--color-primary-disabled: oklch(0.45 0.12 258.5); - 所有组件只引用
var(--color-primary)，不关心底层是HEX、HSL还是OKLCH
想复用色相？用color-mix()替代“提取H”
如果你需要同一色相下的不同明度/色度变体（比如主色 + 浅色背景 + 深色文字），不要试图抽H，而是用color-mix()在OKLCH空间内混合：
立即学习“前端免费学习笔记（深入）”；
button {
--primary: oklch(62% 0.28 258.5);
background-color: var(--primary);
}
button:hover {
/* 同H，提升C和L，视觉更鲜活 */
background-color: color-mix(in oklch, var(--primary) 90%, white 10%);
}
button:disabled {
/* 同H，压低C，微调L防深色模式灰雾 */
background-color: color-mix(in oklch, var(--primary) 60%, black 40%);
}注意：color-mix()两端必须同为oklch()格式，且仅Chrome 112+/Safari 17.5+支持；旧环境需fallback到HEX或HSL。
最容易被忽略的是：OKLCH的H值本身不具备跨主题复用价值——浅色模式下H=258.5可能饱满，深色模式下同一H若C/L不匹配，会立刻掉对比度或发灰。主题适配永远是L-C-H三者耦合调整，不是换汤不换药地搬色相。
