lch() 和 oklch() 目前可用但需看浏览器支持：lch() 自 safari 16.4+/chrome 111+/firefox 117+ 起支持，oklch() 需 chrome 112+/firefox 121+/safari 17.4+；不支持时降级至前一条声明，常见错误是漏百分号或误解 l 范围（0%–100%）；oklch() 基于感知更均匀的 oklab 空间，适合深色模式、ui 色阶与无障碍对比度控制，但兼容性较弱且依赖显示设备色域。
lch() 和 oklch() 在 CSS 里到底能不能用
现在就能用，但得看浏览器和场景——lch() 在 Safari 16.4+、Chrome 111+、Firefox 117+ 支持；oklch() 晚一点，Chrome 112+、Firefox 121+、Safari 17.4+ 才稳定支持。Edge 跟 Chrome 一致。不支持时会直接忽略整条声明，不会报错，但颜色就回退到前一条（比如你写 color: oklch(60% 0.2 240); color: #666;，旧浏览器就只认 #666）。
常见错误现象：lch(50% 100 270) 写成 lch(50 100 270)（漏掉百分号），或把 L 当成 0–255（实际是 0–100，对应明度），结果颜色发灰或溢出。
-
L是明度，0% 最黑，100% 最白，不是线性亮度值 -
C是色度，数值越大越饱和，但不同色调下“最大可取值”不同（比如红 vs 绿，在 sRGB 下绿能撑更高C） -
H是色调角，0–360 度，和hsl()一致，但色域更大
oklch() 比 lch() 好在哪，什么时候该换
oklch() 基于 OKLab 色彩空间，感知更均匀——相同 ΔL 变化，在人眼看来明度变化更一致；lch() 基于 CIELAB，蓝紫区域有压缩，调色时容易误判饱和度。简单说：做深色模式渐变、UI 色阶、无障碍对比度微调，优先选 oklch()。
使用场景差异明显：比如想从主色生成一个稍浅又不失饱和的悬停态，oklch(75% 0.25 240) 比 lch(75% 0.25 240) 更可靠，后者在青蓝色系里可能看起来“突然变灰”。
立即学习“前端免费学习笔记（深入）”；
- OKLab 的
L更接近人眼对明暗的响应，尤其在中低亮度区间 -
oklch()的色域略大于lch()，尤其在高饱和蓝/绿区域 - 当前兼容性仍弱于
lch()，Safari 17.4 才开始支持，iOS 17.4 之前全不认
和 hsl()、rgb() 混用时的坑
直接混用没问题，但别指望它们“数值对齐”。比如 hsl(240, 100%, 50%) 和 oklch(54% 0.32 240) 看起来接近蓝，但明度、饱和感实际不同——hsl() 的 S 和 L 是基于 RGB 立方体切割的，非感知均匀；而 oklch() 的 C 是等感知色度距离。
性能影响几乎为零，解析和渲染开销和 rgb() 相当。但要注意：CSS 自定义属性不能跨色彩空间插值，比如 --c1: hsl(0, 100%, 50%); --c2: oklch(60% 0.4 0); transition: color 0.3s;，动画会直接 fallback 到 sRGB 插值，失去 OKLab 的均匀性优势。
- 渐变中混用
oklch()和rgb()节点，浏览器统一转成线性 RGB 插值，中间色可能偏灰或偏艳 - 用
color-mix()时，必须显式指定颜色空间，比如color-mix(in oklch, oklch(60% 0.3 240) 50%, oklch(90% 0.1 240) 50%) - PostCSS 或构建工具自动 fallback 时，别盲目转成
hsl()——它比rgb()更难准确模拟oklch()的明度行为
真正在生产环境用起来要盯住什么
不是加个 oklch() 就算升级了色彩管理。最常被忽略的是显示设备——即使浏览器支持，用户屏幕若没启用 P3 或 Rec.2020，浏览器仍会 clamp 到 sRGB，这时你设的高 C 值根本显示不出来，还可能触发意外降级。
另一个复杂点：CSS Color Level 4 规范里，oklch() 默认使用 display-p3 白点（D65），但如果你的页面指定了 color-profile 或用了 color-gamut 媒体查询，实际渲染路径会动态切换，调试时得用浏览器开发者工具的“颜色拾取器”确认最终输出值，而不是只看代码。
所以真正落地时，第一件事不是改所有颜色，而是挑关键链路——比如品牌主色、状态色（success/warning/error）、深色模式背景——用 oklch() 重定义，并配好 @supports (color: oklch(0 0 0)) 的渐进增强逻辑。
