oklch是唯一能在不改色相前提下精准控制亮/暗/灰三态的css颜色函数，其l与c解耦特性确保状态指示灯按感知逻辑响应：正常态设中l高c，警告态只升l，禁用态大幅降c；必须正确使用@supports检测、全链路统一oklch()、深色模式仅调l，且c值须严格稳定。
OKLCH 是目前唯一能让你在不改色相的前提下，精准控制“亮/暗/灰”三态的 CSS 颜色函数——只要写对单位、不混空间、不跨 180° 色相跳变，状态指示灯就能真正“按感知逻辑响应”，而不是靠人眼反复调色凑数。
oklch() 中 L 和 C 必须分离控制，否则状态语义就崩了
状态指示灯的核心是让不同状态（正常 / 警告 / 禁用）在视觉上可区分，又保持同一色相的识别一致性。OKLCH 的 L 和 C 解耦特性正好匹配这个需求：
- 正常态：固定
H（如258.5），设中等L（如62%）和较高C（如0.28） - 警告态（如 hover 或 focus）：只升
L（72%），C不动 → 更亮但不更艳，避免刺眼 - 禁用态：固定
H和L（或仅微调 ±0.02），大幅降C（0.12）→ 颜色变灰但不偏紫/发青，文字仍保可读性 - 绝对不要用
opacity或rgba()模拟禁用态：它会同时压低 L 和 C，导致对比度断崖下跌，尤其在浅底上文字直接糊掉
@supports 检测必须写在 fallback 之后，且值带 %
安卓 WebView 和旧 Safari 会跳过整个规则块，如果 @supports 写错位置或检测值缺单位，你的指示灯在部分设备上会直接变黑或全灰——不是颜色不对，是整条声明被静默丢弃。
- 错误写法：
@supports (color: oklch(0 0 0)) { ... }—— 缺%，Safari 16.x 及多数 WebView 返回 false - 错误顺序：
background-color: oklch(62% 0.28 258.5); background-color: #2563eb;—— 老浏览器取后一条，新浏览器反而被覆盖 - 正确结构必须是：
button { background-color: #2563eb; }<br>@supports (color: oklch(0% 0 0)) {<br> button { background-color: oklch(62% 0.28 258.5); }<br>} - 检测值不能用
oklab()替代：所有主流浏览器目前都返回 false，白写
渐变和过渡必须全链路统一用 oklch()
哪怕你定义了 --primary: oklch(62% 0.28 258.5)，只要 hover 状态用了 hsl() 或 rgb()，浏览器就会 fallback 到 sRGB 线性插值——动画过程不是平滑变亮，而是中间帧“先灰一下再显色”，指示灯闪烁感极强。
- 禁止混用：
transition: background-color 200ms;+background-color: oklch(62% 0.28 258.5);→background-color: hsl(240, 70%, 70%); - 正确做法：hover 状态也用
oklch()，只调L（如72%），C和H完全不变 - 渐变同理：不要写
linear-gradient(oklch(62% 0.28 258.5), hsl(240, 70%, 70%))，整条渐变降级为 sRGB 计算，中间必出灰带 - 色相差 >180° 时（比如从
350°切到10°），必须手动拆段：linear-gradient(oklch(0.7 0.25 350), oklch(0.7 0.25 0), oklch(0.7 0.25 10))
深色模式下只调 L，C/H 一动不动
很多人以为深色模式要“整体变暗”，结果把 L 降到 30% 同时还调了 C，导致蓝色指示灯突然泛紫——这不是设计意图，是 OKLCH 单位或逻辑误用的副作用。
- 深色模式适配公式就是：
oklch(38% 0.28 258.5)（从62%直接减24%），C和H严格保持一致 - 别把
L当 sRGB 亮度百分比用：oklch(50% 0.28 258.5)不等于“50% 亮度”，它是无量纲感知标度（0 = 黑，1 = 白） - 如果用了 CSS 自定义属性做主题切换，确保变量值本身是
oklch()字符串，而非拼接出来的字符串；JS 无法解析或计算oklch()值，只能靠 CSS 层驱动 - 宽色域增强（
@media (color-gamut: p3)）建议只用于装饰性指示灯，核心状态色优先保证 sRGB 兼容性，避免 D65/D50 白点不一致引发跨屏漂移
最常被忽略的其实是 C 值的稳定性：一旦在某个状态里不小心改了 C，哪怕只动 0.01，人眼对鲜艳度变化极其敏感，指示灯就从“状态提示”变成了“视觉干扰”。写 OKLCH 不是换了个函数名，而是换了一套色彩控制逻辑——L 控明暗，C 控呼吸感，H 控身份，三者谁动谁不动，得想清楚再下手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
