rgb(from)配合calc()实现通道级数值反转是最可控方式，如rgb(from var(--color) calc(255 - r) calc(255 - g) calc(255 - b))，需确保srgb不透明纯色、变量合法且提供兼容性fallback。
直接用 rgb(from ...) 配合 calc() 翻转 RGB 通道，是最可控、语义最清晰的反转方式——它不依赖图层混合、不污染渲染管线、支持任意颜色空间和变量注入。
用 rgb(from var(--color) calc(255 - r) calc(255 - g) calc(255 - b)) 实现真反转
这是最接近“数学意义反转”的写法：对每个通道做 255 - x 运算。前提是原色在 sRGB 空间且为不透明纯色（如 #ff0000 或 rgb(255, 0, 0)）。
- 必须确保变量已定义且是合法颜色值，例如：
--color: rgb(33, 150, 243); - alpha 通道需单独处理，若要保持不透明，得显式写
/ 100%；若原色带透明度，from会解出a变量，可写成/ calc(1 - a)实现 alpha 反转（慎用，视觉上未必合理） - 注意：该方法对灰阶色（如
rgb(128, 128, 128)）结果仍是灰阶，不会增强对比度——它反转的是数值，不是可读性
在 HSL 空间里用 hsl(from var(--color) calc(h + 180deg) s l) 调色相反转
这不是严格意义上的“颜色反转”，而是色相环对角翻转，更适合 UI 中需要保持饱和度与明度、仅改变主色调的场景（比如按钮悬停态从蓝变橙）。
-
h + 180deg是安全的，HSL 角度自动归一化，360deg + 180deg会回绕成180deg - 如果原色饱和度低（
s ），加 180° 几乎无变化；此时建议先判断或 fallback 到亮度调整逻辑 - 不要在深色背景文字上直接用这个做“反色”，因为
l（明度）没变，可能导致浅色文字落在浅背景上——它改的是“色”，不是“对比”
为什么不用 filter: invert(100%) 做 CSS 变量级反转？
filter: invert(100%) 是渲染时像素级操作，无法参与 CSS 自定义属性计算，也不能输出新颜色值供其他规则复用。
- 它不能赋值给
--inverted-color这类变量，你没法用它生成background-color和border-color的配套反色 - 对半透明元素、抗锯齿文本、subpixel 渲染内容，
invert()会产生灰边、色偏或模糊，尤其在 Safari 和旧版 Chrome 中更明显 - 它不区分语义：一个红色警告图标和一段红色辅助文字，被同一行
invert()处理后，可能一个变青、一个变紫，失去设计一致性
兼容性与 fallback 必须手动处理
相对颜色语法目前仅在 Chromium 111+、Firefox 119+、Safari 16.4+ 支持；iOS Safari 16.4 是关键分水岭，低于此版本会直接忽略整条声明。
- 务必配
color: #000;或color: var(--fallback-color);作为降级 - 不要指望
@supports (color: rgb(from red r g b))在所有浏览器中可靠工作——Safari 16.4 之前不支持该@supports检测，需结合 JS 特性检测或 UA sniffing - 如果你的项目仍需支持 iOS 15.x，那就别用相对颜色反转，老实用
contrast()（Less/Sass）或媒体查询 + 预设变量对
真正难的不是写出那行 rgb(from ...)，而是想清楚你到底要“数值反转”“色相翻转”还是“可读性适配”——三者目标不同，技术路径就不可能统一。选错起点，后面所有优化都是在补洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
