rcs目前仅hsl(from...)和rgb(from...)基础形式受支持，且需配合calc()使用；oklch、lch等处于实验阶段，未实现浏览器会静默丢弃声明。
相对颜色语法（RCS）目前**不能直接在生产环境无条件使用**，Chrome 111+、Firefox 119+、Safari 16.4+ 仅支持 hsl(from ...) 和 rgb(from ...) 的基础形式，且必须配合 calc() 才有实际效果；oklch(from ...)、lch(from ...)、color(from ...) 等全部处于实验或未实现阶段，稳定版浏览器会静默丢弃整条声明。
hsl(from var(--c) h s calc(l - 10)) 是唯一可落地的写法
这是当前兼容性最好、最可控的 RCS 用法。它要求：
- 基准色必须是 HSL 格式（如
--primary: hsl(216 64% 61%)），HEX 或 RGB 值无法解构出h、s、l变量 -
h是 0–360 范围内的纯数字（无单位），s和l是 0–100 的无单位数值（不是60%） - 空格不能省：
hsl(fromvar(--c) ...)❌，hsl(from var(--c) ...)✅ - 只改亮度时写
calc(l - 10)，别写calc(l - 10%)（百分比单位会导致整条失效）
rgb(from ...) 只适合调 alpha，不适合调明暗
RGB 通道和人眼感知亮度非线性，calc(r - 20) 可能让蓝色偏紫、绿色发灰，视觉不可控。
但它对透明度处理很稳妥：
-
rgb(from var(--c) r g b / 0.6)✅ 安全降透 -
rgb(from var(--c) r g b, 0.6)❌ 逗号语法已废弃，会被忽略 - alpha 后面支持小数（
/ 0.6）或百分比（/ 60%），两者等价
补色计算必须用 hsl(from ...) + calc(h + 180)
这是目前唯一被三大浏览器原生支持的补色方案，但要注意：
-
hsl(from var(--bg) calc(h + 180) s l)中的h自动取模，超出 360 会回绕，不用手动% 360 - 补色不等于可用色：浅背景上补色太亮、深背景上太暗，需同步缩放
l和s，例如：hsl(from var(--bg) calc(h + 180) calc(s * 0.8) calc(l * 0.4))（浅底） - CSS 没有运行时亮度判断函数，
l > 50这类逻辑只能靠预设阈值或 JS 补充
@supports 是高保真方案的必要守门员
想用 oklch() 或 lch() 做更精准的亮度控制，必须包裹在特性检测中：
code
@supports (color: oklch(0 0 0)) {
.text { color: oklch(from var(--bg) calc(L - 0.1) C H); }
}
Safari 目前不支持 oklch() 函数（仅支持 oklab()），而 lch() 在 Firefox 中部分通道计算不一致。没加 @supports 就直接写，等于在 Safari/Firefox 上交白卷。
真正难的不是写出一行 hsl(from var(--c) calc(h + 180) s l)，而是整套变量是否分层命名、亮度调整是否符合人眼感知曲线、以及是否为 l 或 <code>s > 95% 这类边界情况做了 clamp 或降级 —— 这些地方一漏，UI 在 OLED 屏或深色模式下就容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
