相对颜色语法无法实现精准颜色反转，因其不读取运行时背景色、不支持background-color输入，且rgb(from var(--bg) calc(255-r)...)在浏览器中未实现、rgb取反违背可读性、忽略透明度与色彩空间；color-mix(in lch)+@property是唯一可行的亮度驱动方案。
相对颜色语法本身不能实现“精准颜色反转”——它不读取运行时背景色，也不支持background-color作为输入源，所有from后面的颜色必须是显式变量或字面量。所谓“反转”，在 CSS 里没有数学定义（比如 RGB 取反 ≠ 可读性翻转），强行用 rgb(from var(--bg) calc(255 - r) calc(255 - g) calc(255 - b)) 会产出不可控的青绿色、紫灰色，对比度常低于 WCAG AA 要求。
为什么rgb(from var(--bg) calc(255 - r) calc(255 - g) calc(255 - b))不是好主意
这种写法看似逻辑通顺，但实际踩了三个坑：
-
from语法在当前所有稳定版浏览器中均未实现（Chrome 111+ 仅实验性支持color(from ...)，且不支持var(--bg)回溯）；写进去等于白写，DevTools 里整条声明被静默丢弃 - RGB 通道取反不是语义反转：#ff6b35（橙红）取反得 #0094ca（青蓝），在白底上对比度仅 ~2.8:1，远低于 4.5:1 的可读门槛
- 它完全忽略透明度和色彩空间影响：若
--bg含 alpha 或来自 HSL/OKLCH，calc(255 - r)会直接报错或退化为默认色
color-mix() + @property 是目前唯一可行的亮度驱动方案
想让文字色随背景明暗自动切换黑/白，必须走 LCH 亮度感知路径，且需两步缺一不可：
- 先声明
@property --bg { syntax: "<color>"; inherits: false; initial-value: #fff; }</color>——没这句，l(from var(--bg))在 Chrome/Safari 中直接失效 - 再用
color-mix(in lch, white calc(100% - l(from var(--bg))), black l(from var(--bg)))——权重按 LCH 的l值线性插值，更贴近人眼感知 - 注意：
color-mix()必须指定色彩空间（in lch或in srgb），写成color-mix(white, black)会被忽略
别混用mix-blend-mode: difference和相对颜色
有人试图叠加图层混合与颜色计算来“强化反转”，结果发现颜色忽明忽暗、过渡卡顿：
-
mix-blend-mode: difference是渲染时像素级混合，依赖父容器背景、z-index 层叠顺序，无法预测输出色值 - 相对颜色语法（如
rgb(from ...)）是静态声明期计算，两者作用时机、作用域、计算模型完全不同 - 真实项目中一旦启用
difference，color-mix()的插值结果会被覆盖，且无法通过transition平滑动画
真正需要“反转感”的场景（比如深色模式图标高亮），优先用 filter: invert(100%) hue-rotate(180deg) 组合；而需要语义化文字适配的，必须放弃“反转”执念，改用分层变量 + LCH 明度阈值（例如 lch(from var(--bg-surface) calc(l > 50 ? 20 : 80) c h)）——后者才是现代 CSS 中可控、可测、可降级的路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
