相对颜色语法无法读取动态背景色，只能基于显式变量或字面量计算；应通过分层变量（如--bg-surface与--text-on-surface）配合lch()明度阈值微调实现语义化、高对比的文字反色。
不能直接用相对颜色语法“反转背景色”——它不读取背景值，只基于你写死的变量做计算。 你想实现的“文字随背景自动反色”，相对颜色语法本身做不到；但它能帮你安全地生成一组语义明确、明暗适配的备选色，比如从 --bg-surface 推出 --text-on-surface。
相对颜色语法根本没法读取 background-color 值
它没有 getComputedStyle() 能力，也不支持 background-color 这类运行时动态值作为输入。所有 from 后面的颜色必须是显式声明的 CSS 变量（如 --bg-primary: #1a1a1a）或字面量（如 rgb(255, 255, 255)）。如果你试图写 color: rgb(from background-color r g b);，浏览器直接忽略这条声明。
常见误操作包括：
- 把
from background-color当成合法语法（实际报错或静默失效） - 在
:root里定义--bg: inherit或--bg: currentColor，指望它捕获父级背景（inherit和currentColor在from中不被解析为颜色值） - 用 JS 动态改
--bg变量后，期望相对颜色自动重算（它会重算，但前提是变量值本身是有效颜色）
真正可用的替代路径：用变量分层 + 相对颜色微调
把“背景色”和“对应文字色”拆成两个独立但语义关联的变量，再用相对颜色推导出更安全的对比色。例如：
立即学习“前端免费学习笔记（深入）”；
code
:root {
--bg-surface: #f9f9f9;
--text-on-surface: rgb(from var(--bg-surface) calc(r * 0.2) calc(g * 0.2) calc(b * 0.2));
}
@media (prefers-color-scheme: dark) {
:root {
--bg-surface: #121212;
--text-on-surface: rgb(from var(--bg-surface) calc(r * 5) calc(g * 5) calc(b * 5));
}
}
关键点：
- 不是“反转”，而是按明度比例缩放：浅背景 → 深文字（乘 0.2），深背景 → 浅文字（乘 5，因原始
r/g/b值小） - 用
lch()空间更可靠：lch(from var(--bg-surface) calc(l > 50 ? 20 : 80) c h)，直接按亮度阈值切分 - 避免用
hsl()的h + 180deg：色相翻转不等于可读性翻转（蓝底+橙字 ≠ 高对比）
mix-blend-mode: difference 和相对颜色别混着用
有人试过给文字加 mix-blend-mode: difference 同时又用 rgb(from var(--bg-surface) ...)，结果发现颜色忽明忽暗——因为 difference 是图层混合运算，而相对颜色只是静态计算，两者作用机制完全不兼容。
真实项目中该选哪个？
- 要“视觉上自动反色”且背景可控（纯色/简单渐变）→ 用
mix-blend-mode: difference+isolation: isolate - 要“语义清晰、可预测、无障碍友好”的文字色 → 放弃“自动”，老实用两套变量 + 相对颜色微调明度
- 想兼顾两者？别试了。一旦背景是图片或带透明度，
difference就崩；而相对颜色永远不知道背景长啥样。
最常被忽略的一点：相对颜色推导出的文字色，必须配合足够大的 contrast ratio（至少 4.5:1），不能只看“是不是黑白分明”。用 lch() 调 l 值比瞎调 rgb() 更接近人眼感知。
