relative color syntax（如oklch(from ...)、hsl(from ...)）在2026年中所有稳定版浏览器均不支持，解析时静默丢弃整条声明；当前唯一可靠方案是使用color-mix()、hsl手动计算或构建时postcss转译。
relative color syntax 在 HTML 中写 CSS 时根本不会生效——你写的 oklch(from var(--base) l c h)、hsl(from var(--color) h s l) 或 rgb(from var(--c) r g b / 0.5) 这类语法，浏览器会静默丢弃整条声明，不报错、不警告、不渲染。
这不是你代码写错了，而是当前（2026 年中）所有稳定版浏览器都不支持 from 关键字。
下面说清楚三个关键点：哪些写法会失效、为什么失效、现在能用什么替代。
哪些 relative color syntax 写法会被浏览器直接忽略
以下所有写法在 Chrome 119、Firefox 125、Safari 17.5 等稳定版本中均无效：
-
oklch(from var(--primary) l c h)—— 即使启用了#css-relative-color-syntax实验 flag，Chrome 也只支持color(from ...)基础形式，且不支持var(--x)回溯 -
hsl(from var(--text) h s calc(l * 0.9))——hsl()函数本身不接受from，该语法属于草案，未进入任何浏览器稳定通道 -
color(display-p3 r g b / var(--alpha))——color()函数要求参数是具体数值（如color(display-p3 0.3 0.4 0.5 / 0.8)），不能传变量或函数调用 -
--derived: rgb(from var(--c) r g b);放在:root里 —— 预处理器（Sass/Less）和 PostCSS 插件都解析不了这种嵌套引用，构建时无法展开
为什么这些语法“看起来像能用”，但实际跑不通
根本原因不是兼容性差，而是规范尚未落地：
-
from关键字目前仅存在于 CSS Color 5 草案，没有一个浏览器将其纳入正式支持列表；Chrome 的实验性支持需手动开启 flag，且关闭后立即失效 - 浏览器解析器遇到不认识的函数（如
oklch(from ...)）时，按 CSS 错误处理规则跳过整条声明，而非降级或报错 - 即使你在 DevTools 里看到这条 CSS 规则显示为“已应用”，那也只是样式面板的误判；实际 computed value 是
initial或继承值，不是你期望的颜色 - 自定义属性（
var(--x)）无法在from语法中被求值 —— 它们不是运行时变量，而是静态字符串，在解析阶段就被当作未知 token 处理
现在真正能用的“相对颜色”替代方案
别等 from，用已广泛支持的方案组合实现相同目标：
- 用
color-mix()混合黑白灰生成深浅色：color-mix(in lch, var(--primary) 80%, black 20%)—— 注意必须指定in lch才能线性控明度，in srgb易发灰 - 用
currentColor+color-mix()动态响应背景：color: color-mix(in lch, currentColor 70%, white 30%)，适合按钮文字随背景自动提亮 - 透明度改写必须绕开
from：color: color-mix(in srgb, var(--base), transparent 40%)等效于 60% 不透明度，但注意这是混合比例，不是 alpha 值 - 若原始色是 HSL 格式（如
--base: hsl(200 80% 60%)），可用hsl()手动计算：hsl(200, 80%, calc(60% - 10%))，但 HEX/RGB 变量无法直接提取分量
构建时想写 from 语法？得靠 PostCSS 提前转译
如果你坚持源码用 oklch(from var(--c) l c h)，必须引入构建步骤：
- PostCSS +
postcss-relative-color插件可将oklch(from #3b82f6 l c h)展开为具体 RGB 值，但前提是--c是硬编码色值，不能是另一个变量 -
postcss-preset-env（stage: 3）对from语法支持极弱，基本不处理，不要依赖它 - 最终输出的 CSS 必须是确定值，比如
rgb(120 180 255)或#78b4ff，而不是保留原样；否则上线就失效 - Vite/Webpack 项目里启用插件后，务必检查生成的 CSS 文件内容，确认没残留
from字样
真正难的不是写出 from 表达式，而是让它的结果在所有设备上稳定可控。现在最稳妥的做法，是把“相对推导”这件事交给构建时或 JS，而不是指望 CSS 运行时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
