oklch不能显示srgb外的颜色，其l（0–100）、c（受l和h约束，非无上限）、h（0–360）受限于设备色域与浏览器实现；高c值在l极端或特定h下会被截断或映射，导致荧光绿变灰黄，需配合display-p3及媒体查询才可能逼近广色域效果。
OKLCH 不能显示 sRGB 范围外的颜色——它只是另一种表示方式，底层仍受限于设备色域和 CSS 渲染管线。所谓“荧光绿”在 OKLCH 中数值再高，只要超出显示器能发出的光谱范围，浏览器就只能就近映射（clamped 或 gamut-mapped），不会 magically 显示人眼没见过的荧光色。
OKLCH 的 L、C、h 各参数实际约束在哪？
OKLCH 是基于 OKLab 的圆柱坐标变换，L（明度）≈ 0–100，C（色度）理论上无上限，但浏览器实现会截断；h（色相）是角度（0–360）。关键限制在于：C 值不是“越大胆越荧光”，而是受 L 和 h 共同约束——同一 h 下，L 中等时 C 才能拉得最高；L 接近 0 或 100 时，C 会被强制压低（因为纯黑/纯白没有饱和度）。
例如想模拟“荧光绿”（h ≈ 140°），试过 oklch(85% 0.35 140) 看似激进，但多数屏幕在 L=85、h=140 时物理上根本达不到 C=0.35，浏览器会静默降为 oklch(85% 0.22 140) 或转成相近 sRGB 值。
为什么用 OKLCH 写“高饱和绿”反而容易变灰或偏黄？
这是 OKLab 色彩空间在青绿区域的非线性响应 + 浏览器色域映射策略共同导致的。常见现象：
- 直接写
oklch(70% 0.4 140)，Chrome 可能渲染成偏黄的浊绿（因 OKLab 在该 h 区域对 C 过度敏感） - Firefox 对 C 截断更激进，相同值在两浏览器中视觉差异明显
- 未声明
@color-profile或未启用color-gamut: p3媒体查询时，浏览器默认按 sRGB 解析 OKLCH，等于白写
实操建议：先用 Björn’s OKLCH picker 拖动调色，实时看右下角“sRGB fallback”预览；若 fallback 已是灰/黄，OKLCH 值再炫也没用。
真要逼近荧光感，得配合 display-p3 和硬件能力
OKLCH 本身不扩展色域，但它能更平滑地利用广色域屏幕（如支持 P3 的 MacBook/iPhone）。前提是：
- CSS 中必须搭配
color-gamut: p3媒体查询，否则浏览器按 sRGB 解析 - HTML
<meta name="color-scheme" content="light dark">不够，需确保系统级开启“广色域显示”（macOS 设置 > 显示器 > 颜色 > 选 P3） - 避免在
background: oklch(...)外层套opacity或mix-blend-mode，这些会触发回退到 sRGB 合成
示例安全写法：
html {
@media (color-gamut: p3) {
--fluoro-green: oklch(72% 0.28 138);
}
@media (color-gamut: srgb) {
--fluoro-green: #00ff41; /* fallback */
}
}
.element { background: var(--fluoro-green); }
真正难的是：你调出的 OKLCH 值，在用户手机上是否被 Chrome Mobile 当作“超色域”直接 clamped，还是交给 GPU 做 perceptual mapping——这个行为没标准，且随 Chrome 版本变动。别信文档里“支持 OKLCH”就等于“支持荧光”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
