截至2024年底，css中lab()函数未被主流浏览器稳定支持，chrome和safari仅实验性启用需手动开启flag，firefox完全未实现；可行方案是将lab值转为srgb色值并用color(srgb...)或hex表示，或使用已广泛支持的oklab()配合color-mix()实现感知均匀调色。
Lab 颜色在 CSS 中根本不能直接用 lab() 函数
目前（截至 2024 年底），lab() 函数尚未被任何主流浏览器稳定支持。Chrome 111+ 和 Safari 16.4+ 虽已实验性启用，但需手动开启 flag（如 Chrome 的 chrome://flags/#enable-css-color-adjust），且默认禁用；Firefox 完全未实现。你写 color: lab(50% 80 20);，绝大多数用户看到的只会是回退色或无效声明。
想用 Lab 坐标定义高饱和度颜色？得靠转换工具 + color() 或 srgb
Lab 本身不是显示色域，它的 a/b 通道无界，能表达人眼可见但 sRGB 显示不了的颜色（比如超饱和青、品红）。但网页最终必须落到设备能渲染的色值上。可行路径只有一条：先用工具把目标 Lab 值转成最接近的、在 sRGB 色域内的 color(srgb ...) 或十六进制。
- 推荐用 Björn Ottosson’s Color Picker —— 输入 L/a/b，它实时显示 sRGB 近似值和是否溢出
- 若需批量处理，用 Python 的
colour-science库：colour.Lab_to_RGB([L, a, b], illuminant='D65')，再 clamp 到 [0,1] 并转 hex - 输出后，优先用
color(srgb 0.92 0.15 0.88)（比 hex 更语义化，且支持 alpha）；fallback 写#ec26e0
color-mix() + oklab 是当前最靠谱的“类 Lab 操作”方案
虽然 lab() 不行，但 oklab()（更均匀、更易插值的 Lab 变体）已被 Chrome 111+、Safari 16.4+、Firefox 117+ 原生支持。配合 color-mix()，你能做真正基于感知均匀空间的调色，比如让两个高饱和色线性混合不发灰。
background-color: color-mix(in oklab, red 70%, blue 30%);
注意点：
-
oklab()的参数顺序是oklab(l c h / a)，c（色度）越大越饱和，h 是色调角；oklab(0.7 0.3 270)比oklab(0.7 0.1 270)饱和得多 - 混合时务必指定
in oklab，否则默认在 sRGB 空间混合，结果偏暗偏浊 - 仍需 fallback：
background-color: #ff0000; background-color: color-mix(in oklab, red 70%, blue 30%);
别迷信“Lab 数值高 = 屏幕上更艳”，设备才是硬约束
Lab 的 a/b 值可以无限大，但你的显示器只有 sRGB 或 Display P3 色域。一个 lab(50 120 0) 在多数屏幕上看和 lab(50 80 0) 几乎没区别——超出部分被裁剪（clamped）或映射（gamut mapped），实际渲染的仍是色域边缘值。真正影响视觉饱和度的，是对比环境光、周围颜色、以及你是否用了 color-gamut: p3 媒体查询适配广色域屏。
如果目标是“在普通屏上显得更艳”，与其硬塞高 Lab 值，不如提高明度差、降低邻近灰度干扰、用 filter: contrast(1.1) 微调——这些手段更可控，也无需依赖未普及的语法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
