oklch 是基于人眼感知建模的色彩空间，调 l 不偏色、调 c 不变亮、调 h 不失饱和；参数需带百分号（l 为 0%–100%），混用色彩空间会导致插值失效，全程统一使用才能发挥感知均匀优势。
OKLCH 不是“更高级的 HSL”，它是把人眼怎么感知明暗、鲜艳、色调这三件事，真正拆开建模的结果——调 L 不偏色，调 C 不变亮，调 H 不失饱和。直接用它定义品牌色、做深色模式或禁用态，能避开大量 HSL 下“改了色相，文字突然看不清”这类问题。
oklch() 函数参数必须带百分号，L 范围是 0%–100%，不是 0–1
很多人写 oklch(0.62 0.28 258.5)，浏览器会直接忽略整条声明（尤其 Safari 16.x 和旧 Firefox）。正确写法是 oklch(62% 0.28 258.5) 或 oklch(0.62 0.28 258.5) ——但后者仅 Chrome 112+/Firefox 121+/Safari 17.4+ 支持，且必须确保小数点后不超过一位（258.5 可，258.543 在某些 Safari 版本里解析失败）。
- L 是感知亮度：0% 最黑，100% 最白，中间值对应人眼实际明暗感受，不是线性光值
- C 是色度：数值越大越鲜艳，但不同色调下最大可取值不同（比如 OKLCH 蓝可到 0.4，绿可能撑到 0.45）
- H 是色相角：0–360°，和
hsl()一致，但映射更均匀——H 从 240→250，视觉变化比hsl()更平滑
混用 oklch() 和 rgb() / hsl() 时，CSS 自定义属性无法跨空间插值
如果你写：--primary: oklch(62% 0.28 258.5); --hover: hsl(240, 70%, 70%);，再用 transition: background-color 0.3s;，动画不会按 OKLCH 空间插值，而是 fallback 到 sRGB 线性插值——结果就是悬停时颜色“先灰一下再蓝”，失去感知均匀性优势。
- 想做平滑过渡，两个关键色都得用同一色彩空间，比如全用
oklch() - 渐变节点也一样：
background: linear-gradient(oklch(62% 0.28 258.5), oklch(75% 0.28 258.5))才能保证亮度提升是视觉等距的 - 自定义属性中避免写
color-mix(in oklch, ...)，部分旧版 Safari 对函数嵌套解析不稳定
@supports 检测必须写在 fallback 颜色之后，且不能用 oklab() 替代
错误写法：@supports (color: oklab(0 0 0)) { ... }——这个检测在当前所有主流浏览器（包括 Safari 17.4、Chrome 117）里都返回 false，因为 oklab() 函数本身支持极差。正确检测只能用 @supports (color: oklch(0% 0 0))，而且必须把降级色写在 @supports 块外面。
- 顺序不能反：先写
background-color: #2563eb;，再写@supports块覆盖它 - 别用
@supports not (color: oklch(0% 0 0))写 fallback——安卓 WebView 里有解析 bug - 检测
color-mix()要单独来：@supports (color-mix: oklch(0% 0 0) 50%, red)，它比基础oklch()支持晚一两个版本
最常被忽略的一点：OKLCH 的“感知均匀”只在你全程用它时才成立。一旦在某个地方悄悄切回 hsl() 调一个 hover 色，或者用 opacity 模拟禁用态，整个亮度/色度关系就断了——不是浏览器不支持，是你主动放弃了它的设计前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
