目前无法用rgb(from...)直接调饱和度，因该语法不支持对解构变量做算术运算且未被主流浏览器实现；color-mix(in gray,...)仅能降饱和且兼容性差；跨浏览器可靠方案是用HSL变量配合hsl()函数手动调整。
目前无法用 Relative Color 语法（如 rgb(from ...)）直接调整饱和度。 浏览器根本不支持该语法用于颜色派生——它在所有主流引擎中仍处于草案阶段，写上去就是静默失效。
为什么 rgb(from ...) 不能调饱和度
Relative Color 语法（rgb(from <color> ...)</color>、hsl(from <color> ...)</color>）的设计目标是“解构 + 重组”，不是“调节参数”。它把一个颜色拆成 r/g/b 或 h/s/l 变量后，你确实能改其中某一项，但饱和度（s）本身不是独立可读变量：
-
hsl(from red h s l)中的s是原始色的饱和度值（比如red是hsl(0, 100%, 50%)，s就是100%），但你不能写calc(s * 0.7)—— CSS 不允许对from解构出的变量做算术运算 - 即使你硬写
hsl(from red h calc(s - 30%) l)，Chrome/Safari/Firefox 全部忽略整条声明，不报错也不渲染 - 规范里明确写了：
from后面只接受变量名或字面量，不支持表达式
color-mix(in gray, ...) 是唯一原生降饱和方案，但有硬限制
真正能用、且浏览器已实现的降饱和方式只有 color-mix() 配合 gray 色彩空间，但它只能降低，不能提升，且兼容性极窄：
- 必须写成
color-mix(in gray, #3b82f6, black)或color-mix(in gray, var(--primary), white)——gray是色彩空间名，不是颜色值，不能写gray(50%) - 仅 Chromium 111+（Chrome/Edge/Opera）和 Safari 16.4+ 支持
in gray；Firefox 完全不识别，会丢弃整条样式 - 无法提饱和：因为
gray空间里所有颜色都朝零饱和度映射，混合结果永远 ≤ 原色饱和度 - 别用
@supports包裹后就以为安全——它只检测语法支持，不保证渲染一致；DevTools 颜色拾取器显示的 RGB 值，和人眼感知的饱和度变化并不线性对应
实际项目中该怎么做
如果你需要跨浏览器、可预测、能升能降的饱和度控制，回到 hsl() 是最稳妥的选择：
立即学习“前端免费学习笔记（深入）”；
- 把主色定义为 HSL 变量：
--base-h: 200; --base-s: 70%; --base-l: 50%; - 降饱和：
hsl(var(--base-h), 40%, var(--base-l)) - 提饱和（上限注意别爆色）：
hsl(var(--base-h), 95%, var(--base-l)) - 禁用态常用组合：降低
s同时提高l（比如hsl(200, 30%, 85%)），比单纯加灰更易读 - 避免在动画中用
hsl()插值——Chrome 和 Firefox 对它的插值算法不同，悬停变色可能路径不一致
真正棘手的点不在语法多难记，而在于：你得先决定「这个饱和度调整是视觉增强，还是功能必需」。如果是后者（比如无障碍对比度依赖饱和度变化），纯 CSS 方案大概率要 fallback 到 JS 计算 + setProperty()，因为浏览器原生能力目前就是断层式的。
