CSS相对颜色是CSS Color Level 5特性，需配合calc()才能实现动态颜色变换，单独使用from仅作颜色分解无实际意义。
相对颜色语法不是“CSS4”，而是 CSS Color Level 5 的特性，目前在 Chrome 111+、Firefox 119+、Safari 16.4+ 中稳定支持；不加 calc() 的基础用法几乎没实用价值，真正有用的是 from + calc() 的组合。
为什么 from 单独写没用
单独写 rgb(from red r g b) 等价于 rgb(255 0 0)，只是把颜色“拆开再拼回去”，没有任何动态性。它真正的意义是把颜色通道暴露成可计算的变量——r、g、b、h、s、l、alpha 这些名字才开始有含义。没有 calc()，它们就是静态数字，改不了。
常见错误现象：
- 写了
color: hsl(from var(--primary) h s l)，发现 hover 颜色和原色一模一样 - 以为
from本身就能“变暗”或“提亮”，结果什么都没发生
from 必须搭配 calc() 才算真正启用
所有有意义的衍生色（比如 hover 变暗、禁用态降透明度、文字自动适配背景）都依赖对通道值做算术运算。核心逻辑是：先用 from 拆出变量，再用 calc() 修改它。
立即学习“前端免费学习笔记（深入）”；
使用场景示例：
- 按钮 hover 时亮度降低 10%：
background: hsl(from var(--primary) h s calc(l - 10)) - 统一将任意品牌色的 alpha 改为 70%：
color: rgb(from var(--brand) r g b / 0.7) - 从红色生成绿色（r→0, g→255）：
color: rgb(from var(--red) calc(r - 255) calc(g + 255) b)
注意：calc() 内部不能写单位（如 10%），HSL 的 l 和 s 是无单位数值（0–100），RGB 的 r/g/b 是 0–255 整数。
HSL vs RGB vs OKLCH：选哪个颜色空间更稳
不是所有颜色空间都适合调光/调饱和。HSL 最直观，但存在色相断层（比如从蓝到紫，h 从 240 跳到 300）；RGB 直观但亮度控制不自然；OKLCH 是新标准，亮度（L）和色度（C）解耦更好，但 Safari 当前不支持 oklch() 函数。
实操建议：
- 日常 UI 状态（hover/disabled）优先用
hsl()，兼容性好、语义清晰 - 要做精确亮度对比（比如文字是否满足 WCAG 对比度）用
oklch()，但得加降级（如@supports (color: oklch(0 0 0)) { ... }） - 避免在 RGB 空间里调
l或lightness——RGB 没有l通道，rgb(from ...)里只能访问r、g、b
容易被忽略的空格与斜杠语法细节
新版颜色函数强制使用空格分隔，且 alpha 必须用 / 引入——写成 rgb(255,0,0,0.5) 或 rgb(255 0 0 0.5) 都会失效。
正确写法必须是：
rgb(255 0 0 / 0.5)hsl(200 80% 60% / 0.8)hsl(from var(--c) h s calc(l - 5) / 0.9)
漏掉斜杠、多写逗号、alpha 值写成百分数（如 / 50%）都会导致整条声明被浏览器忽略——它不会报错，只是静默失效，调试时极难定位。
