hex 颜色必须经 js（如 culori）转为线性 rgb/xyz，再转 lab/lch/oklch，不可直接写 lch(#3498db)；css 中需用派生变量（如 --color-primary-lch）配合 from 语法和 @supports 降级，transition 不支持 lch 插值，须用 color-mix 或 @keyframes。
现有 HEX 颜色怎么转成 LCH 或 OKLCH
不能直接写 lch(#3498db) 或 oklch(#3498db)——浏览器不解析，会报错或静默降级为 rgb()。所有 HEX 值都得先转成线性 RGB 或 XYZ，再进 LAB/LCH 空间，这一步必须靠 JS 或构建时预处理。
常见错误现象：background-color: lch(60% 70 240); 看起来生效了，但和 #3498db 并不对应——因为没做空间映射，只是随便填的数。
- 用 culori 是最稳妥的：它支持
culori.lab(culori.srgb("#3498db"))，输出是真实 LAB 坐标，再转 LCH 即可 - 构建脚本里批量处理：读取
:root中所有--color-*变量值，调 culori 转成lch(L c h)格式，写回 CSS 自定义属性（如--color-primary-lch: 62 75 238;） - 别在运行时用 JS 解析 HEX → LCH → 写
style.setProperty，性能差且无法被@property动画识别
transition 里颜色变灰/脏怎么办
你写的 transition: background-color 300ms 永远在 sRGB 空间插值，哪怕起止色都是 lch() 或 oklch()。这不是 bug，是规范行为——transition 不接管色彩空间语义。
典型翻车点：oklch(70% 0.2 240) → oklch(40% 0.2 240) 本该只变明度，结果中间帧出现紫灰调，因为浏览器偷偷转成 RGB 插值了。
- 真正能走 LCH 插值的只有
@keyframes（Chrome 112+ / Safari 16.4+），且所有关键帧必须用同一种函数（全lch()或全oklch()） - 想用
transition实现感知均匀过渡？只能绕开颜色属性本身：注册@property --t，用color-mix(in lch, var(--start), var(--end) calc(var(--t) * 1%))计算中间色 -
linear-gradient(in lch, ...)是唯一原生支持 LCH 插值的 CSS 特性，但仅限渐变，不能用于单色背景
怎么让旧变量名兼容新颜色函数
别改 --color-primary 这类语义变量的值——它们仍要保留为原始 HEX 或 sRGB，供老代码、第三方组件、内联样式等兜底使用。新体系应该加一层“派生变量”。
错误做法：--color-primary: lch(62 75 238); → 所有依赖它的老 CSS 会失效（var(--color-primary) 在不支持 LCH 的浏览器里 fallback 失败）。
- 保持基础变量不变：
--color-primary: #3498db; - 新增派生变量：
--color-primary-lch: 62 75 238;和--color-primary-oklch: 0.62 0.22 238; - 新样式里统一用
lch(from var(--color-primary-lch) l c h)或oklch(from var(--color-primary-oklch) l c h)，这样既复用原始值，又获得相对计算能力 - 用
@supports (color: lch(0 0 0))包裹新写法，旧浏览器自动走 HEX fallback
主题切换时 LCH 值要不要重算
不需要。LCH 是设备无关的感知均匀空间，同一组 LCH 坐标在深色/浅色主题下依然保持相对关系——比如 lch(90% 5 0)（极亮灰）和 lch(10% 5 0)（极暗灰）的对比度天然稳定。
但注意：如果你用 color(display-p3 ...) 定义品牌色，那在 sRGB 屏幕上会自动色域映射；而 LCH 值不会自动适配，得靠设计系统自己约定深色模式下的 L 值偏移量（例如整体 -15% L）。
- 深色模式优先调 L（明度）通道，c（彩度）通常同步微调（-10%～-20%），h（色相）一般不动
- 避免在
:root里写--color-bg: lch(95% 2 0);→ 深色模式切到.dark类时，应覆盖为--color-bg: lch(15% 2 0);，而不是重新计算整套 LCH - 用
color-mix(in lch, white, var(--color-primary-lch) 20%)这类混合方式做 hover 色，比硬写--color-primary-hover更可靠
迁移最难的不是转换工具，而是把“颜色是固定值”的思维换成“颜色是可推导的状态”。一旦接受这点，后续所有派生、动画、主题适配都会自然成立。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
