from语法目前不可用于生成同色系色彩，因chrome仅实验性支持且不支持变量回溯，firefox/safari完全忽略；应预计算亮度值存为独立变量，再直接调用。
from 语法目前（2026 年中）不能直接用于生成同色系色彩，因为所有稳定版浏览器都不支持它——Chrome 111+ 仅实验性支持 color(from ...) 基础形式，且不支持自定义属性回溯；Firefox 和 Safari 完全忽略该语法，静默丢弃整条声明。
你写 hsl(from var(--primary) h s calc(l + 10))，在生产环境里大概率什么都不会发生，控制台也不会报错，样式就“消失”了。
为什么 from + calc() 在真实项目中基本不可用
浏览器对新颜色函数的解析极其严格，一个空格、漏斜杠、单位错位（比如把 l + 10 写成 l + 10%），整条声明就被跳过。更关键的是：
-
from依赖底层颜色通道可被提取，但 CSS 自定义属性本身不携带颜色模型信息——var(--primary)是字符串，不是“已知 HSL 值”，浏览器无法从中解构出h、s、l - 即使你用
hsl(220, 70%, 55%)字面量写死，Safari ≤15.4 仍会静默忽略hsl(from hsl(220, 70%, 55%) h s calc(l + 10)) - PostCSS 插件如
postcss-relative-color需要你提供基准色的具体数值（不能是变量引用），且无法处理var(--base)→var(--derived)的链式推导
真正能落地的同色系生成方式：只动 lightness，用 CSS 变量预计算
人眼对明暗最敏感，固定色相（--h）和饱和度（--s），仅调整亮度（--l），才能保证视觉连贯、不跳色、不发灰。但必须绕开运行时 calc() 嵌套：
- ❌ 错误写法：
background: hsl(var(--h), var(--s), calc(var(--l) + 10%));（Safari ≤15.4 静默失效） - ✅ 正确做法：提前算好各档位亮度值，存为独立变量：
:root { --h-primary: 220; --s-primary: 70%; --l-primary-500: 55%; --l-primary-400: 48%; /* 悬停 */ --l-primary-300: 35%; /* 按下 */ --l-primary-100: 90%; /* 浅底色 */ } - 然后直接调用：
button:hover { background: hsl(var(--h-primary), var(--s-primary), var(--l-primary-400)); }
如果真要动态偏移色相（比如蓝→青→紫蓝），也得避开 from
等距色相变化可用 calc() 直接运算，但前提是基准色相本身是变量（不是从颜色中提取）：
- 定义：
:root { --h-base: 220; --s-base: 70%; --l-base: 60%; } - 使用：
.tone-1 { color: hsl(calc(var(--h-base) - 30), var(--s-base), var(--l-base)); } - 注意：H 范围是 0–360，
calc(220 - 30)得 190 安全，但calc(20 - 30)会得 -10，浏览器自动 clamp 到 0，可能意外变红——建议加边界保护或手动校验
真正容易被忽略的一点：所谓“同色系”，本质是同一套 --h 和 --s 下的 --l 梯度。一旦你试图靠 from 从 HEX 或 RGB 值里反推 HSL 分量，就已经掉进兼容性和语义断层的坑里了——这不是写法问题，是当前 CSS 引擎的能力边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
