OKLCH的L值必须用0–1小数（如0.6），因CSS Color Level 4规范禁止百分比写法（如60%），否则整条声明被所有浏览器静默忽略；正确写法为oklch(0.6 0.2 260)，错误写法包括oklch(60% 0.2 260)或尾随零形式。
因为 OKLCH 是目前唯一能在 CSS Modules 中实现「亮度可控、主题可预测、无障碍达标」三重目标的颜色模型，其他模型（包括 HSL、RGB、LAB）在构建时或运行时都会掉链子。
OKLCH 的 L 值为什么必须用小数而非百分比？
写成 oklch(60% 0.2 260) 会被所有浏览器直接忽略——CSS Color Level 4 规范明确要求 L 参数是 0–1 范围的纯数字。Dart Sass 编译器也不会报错，它会原样输出这个非法值，导致样式静默失效。
- 正确写法：
oklch(0.6 0.2 260) - 错误写法：
oklch(60% 0.2 260)、oklch(0.60 0.2 260)（尾随零虽合法但易被 PostCSS 插件误删） - 在 CSS Modules 中尤其危险：类名哈希后无法肉眼定位问题，只能靠
CSS.supports('color', 'oklch(0.6 0 0)')在 JS 层兜底检测
为什么不能在 CSS Modules 里混用 color-mix() 和 HSL/RGB？
color-mix() 要求所有输入颜色使用同一色彩空间，且语法必须严格一致。一旦你在 color-mix(in srgb, ...) 中混入 hsl(240 100% 50%) 或 rgba(0, 123, 255, 0.8)，整个表达式会被浏览器当作无效声明丢弃——连 fallback 都没有。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 安全组合：
color-mix(in oklch, oklch(0.7 0.1 240) 50%, oklch(0.3 0.05 240) 50%) - 危险组合：
color-mix(in srgb, #007bff, hsl(240, 100%, 50%))→ 全部失效 - 在 CSS Modules 场景下，变量值来自
:root或主题层，你无法保证下游传入的是 OKLCH 还是 legacy 写法，必须在定义变量时就锁定色彩空间
如何让 CSS Modules 中的 OKLCH 变量真正支持无障碍对比度？
color-contrast() 是唯一能自动选中满足 WCAG AA/AAA 的文本色的函数，但它依赖 OKLCH 的亮度线性特性。如果你用 HSL 定义基础色，再试图用 color-contrast() 计算，结果会因 HSL 的亮度非感知均匀而不可靠。
立即学习“前端免费学习笔记（深入）”；
- 正确路径：所有主题色变量都用 OKLCH 定义，例如
--color-surface-card: oklch(0.95 0.01 240);，再用color-contrast(var(--color-surface-card) vs oklch(0.15 0.1 240) oklch(0.05 0.05 240)) - 必须配合 polyfill：Safari 17.4 不支持
color-contrast()，需用@supports not (color: color-contrast(...))降级到固定值 - 注意：CSS Modules 的作用域不会影响
color-contrast()查找范围，它始终从全局:root获取变量，所以变量必须定义在全局上下文
最常被忽略的一点：OKLCH 变量一旦定义在 CSS Modules 文件内部（比如 .button { --color-bg: oklch(0.8 0.05 240); }），它就脱离了主题系统管控，无法被 color-contrast() 或外部主题切换逻辑读取——逻辑颜色属性必须定义在全局作用域，模块文件只负责消费。
