CSS Color Level 4引入lab()、lch()、oklch()不是炫技，而是解决HSL调亮度偏色、RGB插值发灰、sRGB色域窄导致“正红变暗红”等真实配色失效问题；它们基于人眼感知模型解耦L/C/H，实现调明度不偏色、调色相不失饱和、深色模式保色调稳定。
为什么CSS Color Level 4要加lab()、lch()、oklch()这些函数
不是为了炫技，而是旧模型在真实配色任务中频繁失效：HSL调亮度会偏色，RGB插值会发灰，sRGB色域太窄导致设计师指定的“正红”在屏幕上只能凑合成暗红。
lab()和lch()基于CIE 1976感知模型，把明度（L）、彩度（C）、色相（H）解耦——改L不牵动饱和度，转H不损失鲜艳度。oklch()更进一步，用OKLab空间替代CIELAB，在蓝紫区域的感知均匀性提升约35%，避免hsl(240, 100%, 50%)那种“看着是蓝，实际像灰”的问题。
-
lab(50% 20 -10)的 L 值直接对应人眼感知明暗，不是RGB最大最小值的算术平均 -
lch(50% 22.36 296.6)的 C 和 H 可独立调节，做按钮悬停渐变时不会中途“褪色” -
oklch(0.6 0.28 258.5)的 L 是无量纲感知标度（0=黑，1=白），深色模式下统一降L就能保色调稳定
color(display-p3)和color(rec2020)根本不是同一类东西
color(display-p3)是当前唯一有实用价值的广色域声明；color(rec2020)写了等于没写——Chrome、Firefox、Safari全都不解析，整条CSS规则被静默丢弃，连fallback都不会触发。
display-p3比sRGB宽约25%，主要扩展绿色和红色区域，iPhone X之后的苹果设备、MacBook Pro视网膜屏能真实渲染color(display-p3 1 0 0)那种高饱和红；但Windows笔记本或老iPad上，浏览器只能就近映射，结果颜色发灰或过饱和。
立即学习“前端免费学习笔记（深入）”；
- 必须配合系统级设置：macOS默认启用广色域输出，Windows需手动开HDR+广色域支持
- 浏览器flag不能少：Firefox需开启
layout.css.color-functional-notation.enabled，Chrome 111+已默认开 - 辅助功能会覆盖：开了“简化色彩”或“降低动画效果”，
color(display-p3)直接退化为sRGB
rgb()新语法空格敏感是构建流程里的隐形炸弹
Chrome 117+和Firefox 119+已切换到新解析器：只认rgb(255 0 0)（参数间**单空格、无逗号、无环绕空白**），而把rgb(255, 0, 0)当legacy fallback处理。问题在于PostCSS、esbuild等工具压缩时可能抹掉空格，把rgb(255 0 0)变成rgb(255 0 0)（少一个空格），浏览器直接无法识别。
- Safari 17.4对
rgb(255 0 0)支持不完整，JS里赋值el.style.color = 'rgb(255 0 0)'会被忽略 - 检测必须用
CSS.supports('color', 'rgb(0 0 0)')，不能用oklab()（所有浏览器都返回false） - 预处理器要改写法：Sass里别用
rgb($r, $g, $b)，改用插值rgb(#{$r} #{$g} #{$b})
color-contrast()不是“自动选字色”，而是对比度优先的工程函数
color-contrast(var(--bg), white, black, #333)的行为常被误解：它不保证返回第一个满足WCAG AA（4.5:1）的色，而是计算所有候选色与背景的对比度，选数值最高的那个——哪怕只有2.1:1（刚好过AA），而跳过对比度更高但未达AA的3.8:1颜色。
这意味着你不能靠它“兜底可访问性”，而要主动控制候选集。比如深色背景上放#333，对比度可能只有3.2:1，低于AA标准，但它仍可能被选中，因为white和black在该背景下对比度更低。
- 真正可靠的写法是限定高对比候选：
color-contrast(var(--bg), white, black, #111, #fff) - 目前仅Safari 16.4+部分支持，Chrome/Firefox仍需polyfill，且polyfill无法复现原生函数的WCAG 2.1算法细节
- 混合空间会失效：如果候选色里混了
hsl()或rgba()，整个color-contrast()表达式被丢弃
color(display-p3 1 0 0)被解析，到最终像素点亮之间那七层渲染管线——每层都可能重映射、gamma补偿、子像素抗锯齿调整，甚至被系统级夜览模式覆盖。实机多端验证永远比DevTools里看到的数值更可信。 
