color-mod() 函数已废弃，不被任何主流浏览器支持，被 CSS Color Module Level 4 正式移除；现代替代方案包括 color()、lch()、oklch()、color-mix() 和 color-contrast()。
color-mod() 函数现在还能用吗？
不能直接在浏览器里用。它早已被废弃，不是标准的一部分，也从未进入任何主流浏览器的稳定支持列表。CSS Color Module Level 4 正式移除了 color-mod()，转而推广更精确、可组合的函数，比如 color()、hwb()、lch() 和 oklch()。你如果在旧项目里看到 color-mod(black lightness(20%)) 这类写法，那基本是靠 PostCSS 插件（如 postcss-color-mod-function）编译出来的——它只是个构建时转换工具，不是运行时能力。
- 它不参与 CSSOM，JS 读不到计算后的值
- 它无法响应 CSS 变量变化（
var(--bg) 套进去会直接报错或静默失败）
- 所有颜色调整必须在构建阶段固化，失去动态性
替代 color-mod() 的现代方案有哪些？
真正可用、有标准背书、且逐步落地的是 CSS Color Module Level 4/5 提出的一组新函数。它们不是“增强版 color-mod”，而是从色彩空间底层重构的表达方式：
-
color(display-p3 0.2 0.4 0.8)：指定色域，比 sRGB 更广
-
lch(65% 40 280)：用亮度、彩度、色相描述，调色更符合人眼感知
-
oklch(65% 0.15 280)：改进版 LCH，均匀性更好，WCAG 对比度计算更准
-
color-mix(in oklch, red 30%, blue 70%)：真·色彩空间内插值混合，不是简单 RGB 加权
var(--bg) 套进去会直接报错或静默失败） -
color(display-p3 0.2 0.4 0.8)：指定色域，比 sRGB 更广 -
lch(65% 40 280)：用亮度、彩度、色相描述，调色更符合人眼感知 -
oklch(65% 0.15 280)：改进版 LCH，均匀性更好，WCAG 对比度计算更准 -
color-mix(in oklch, red 30%, blue 70%)：真·色彩空间内插值混合，不是简单 RGB 加权
这些函数在 Chrome 111+、Safari 16.4+（需开启实验特性）、Firefox Nightly 中已部分可用；@supports (color: oklch(0 0 0)) 可安全做特性检测。
为什么 color-mod() 被淘汰？根本问题在哪？
它设计上就违背了现代 CSS 的两个关键原则：**色彩空间不可知**和**不可逆变换**。
- 它默认在 sRGB 下做“lightness(20%)”这种操作，但 sRGB 的 lightness 不是线性亮度，调出来颜色偏灰、失真严重
- “saturation(80%)”这类操作在不同色相上效果不一致，美术同学根本没法预测结果
- 没有明确输入/输出色域声明，导致跨设备显示偏差大，尤其对 OLED 屏或广色域显示器
相比之下，lch() 和 oklch() 显式绑定到感知均匀空间，color-mix(in oklch, ...) 保证混合路径可预测、可复现。
想快速适配背景色的文字颜色，别碰 color-mod()，试试这个color-contrast() 是目前唯一原生支持“根据背景自动选字色”的函数，而且它基于 WCAG 算法，结果可验证：
.card {
background-color: var(--bg);
color: color-contrast(var(--bg) vs #000, #fff to WCAG20/AA);
}
- 它不依赖 JS，不触发重排，纯 CSS 计算
- 浏览器支持已在 Chrome 114+ / Edge 114+ / Safari 16.4+（需开启
Experimental Web Platform Features）
- 注意：候选色必须是具体颜色值（不能是变量嵌套），且至少两个；
to WCAG20/AA 是必需语法，漏掉会无效
Experimental Web Platform Features） to WCAG20/AA 是必需语法，漏掉会无效 兼容性兜底时，用 @supports not (color: color-contrast(...)) 降级为 mix-blend-mode: difference 或亮度阈值 JS 判断——但那是另一条路了。
color-mod() 是个过时的过渡方案，它的坑不在写法，而在底层假设已经崩了。现在动手，应该直接面向 oklch() 和 color-contrast() 去组织颜色逻辑。
立即学习“前端免费学习笔记（深入）”；
