现代CSS渐变中根本不需要、也不能声明in srgb,因linear-gradient()不支持该语法,浏览器会直接忽略整条规则;所有插值强制在sRGB空间进行,无论起止色格式如何;真正支持in srgb的仅有color-mix()和color()函数。

in srgb —— 这个写法在 linear-gradient() 里是非法语法,浏览器会直接忽略整条规则。
你看到的“默认用 sRGB”不是因为你写了 in srgb,而是因为浏览器根本没得选。
linear-gradient() 不支持 in srgb 语法
现行 CSS 渐变规范强制所有插值都在 sRGB 空间进行,无论你写不写 in srgb,也无论起止色是 rgb()、hsl() 还是 oklch()。浏览器会先把它们转成 sRGB 值,再线性混合。
-
linear-gradient(in srgb, red, blue)→ 解析失败,整条声明被丢弃(Chrome/Safari/Firefox 均如此) -
linear-gradient(to right, oklch(0.5 0.2 240), oklch(0.8 0.2 240))→ 起止色被转为 sRGB,中间仍是灰带 - 真正支持
in srgb的只有color-mix()和color()函数,但那不是渐变
为什么有人误以为 in srgb 有用
常见混淆点来自三类场景:
- 把
color-mix(in srgb, red, blue)的合法写法,错套到linear-gradient()上 - 看到 MDN 或旧教程里错误示例(如
linear-gradient(in hsl, ...)),误以为所有in <space></space>都通用;实际上in hsl在部分浏览器曾短暂支持过,但已被移除或降级处理 - 用 Safari 测试时发现颜色更亮,就归因于“用了 P3”,其实是 Safari 对未声明空间的 HEX 默认走 Display P3 解析,和
in srgb无关
真正需要显式声明色彩空间的地方
不是为了启用 sRGB(它本来就是默认),而是为了绕开 sRGB:
立即学习“前端免费学习笔记(深入)”;
-
color-mix(in lch, lch(50 80 30) 70%, lch(50 80 270) 30%):静态生成感知均匀中间色 -
background-color: lch(50% 80 30); transition: background-color 300ms;:动画中保持明度稳定 -
@media (dynamic-range: high)+color(display-p3 ...):配合系统 HDR 模式做色域扩展,但亮度仍受限于 SDR
最容易被忽略的一点:alpha 通道永远独立线性插值,哪怕你用了 oklch() 写颜色,透明度变化依然生硬——必须单独控制底色或用 background-color + background-image 拆开处理。


















