hsl(from var(--bg) calc(h + 180) s l)是当前唯一可靠补色方案，chrome 111+、safari 16.4+、firefox 115+原生支持，能从hsl格式变量解构并运算；但需配合明暗判断缩放l/s以确保可读性，css无原生亮度函数，仅能经验分档或依赖js。
hsl(from calc(h + 180) s l) 是当前唯一可行的补色语法
Chrome 111+、Safari 16.4+、Firefox 115+ 已原生支持该写法，它能真正从 var(--bg) 中解构 HSL 分量并执行数学运算。其他方案如 color-mix() 或 oklch(from ...) 在稳定版浏览器中均不生效——前者因 longer hue 模式结果不可控，后者根本未进入任何浏览器稳定通道，解析时静默丢弃整条声明。
必须确保输入色是 HSL 格式：若 --bg: #3a86ff，hsl(from var(--bg) ...) 会失败，因为 HEX 无法提取 h；应改用 --bg: hsl(219, 72%, 52%) 或先通过构建工具转译。
-
h是无单位数值，calc(h + 180)超出 360 自动取模，无需手动% 360 - 支持
currentColor，但不支持未计算的变量嵌套（如from var(--derived)） - 别漏空格：
hsl(fromvar(--c) ...)❌，hsl(from var(--c) ...)✅
补色本身不等于可用边框色，必须按明暗缩放 l 和 s
直接用 hsl(from var(--bg) calc(h + 180) s l) 得到的补色，常因对比度不足而不可读：浅背景上太亮、深背景上太暗。CSS 尚无原生 lightness() 函数，只能靠经验阈值预设。
推荐两档粗略分档（L 值指 HSL 中的 l）：
- 浅背景（
l > 50）：用hsl(from var(--bg) calc(h + 180) calc(s * 0.8) calc(l * 0.4))—— 降亮、保饱和 - 深背景（
l ）：用 <code>hsl(from var(--bg) calc(h + 180) calc(s * 0.6) calc(l * 1.6))—— 提亮、弱化饱和 - 务必显式声明
border-style: solid，否则border-color不生效
为什么 color-mix(in hsl, ...) 不能替代补色计算
常见错误是写 color-mix(in hsl longer hue, var(--bg) 50%, red 50%)，期望得到补色。实际结果完全不可控：
-
longer hue模式不保证 ±180° 偏移，h: 10°可能产出190°或-170°，浏览器自行选弧 - 不支持
var(--bg)或currentColor，传入即失效 - 补色是确定性色相翻转，不是混合，语法错位导致颜色跳变或渲染为灰色
即使指定 in lch，color-mix() 仍无法实现精确 ±180°，且 LCH 的色相偏移在视觉上也不等距。
真正落地时最容易被忽略的坎：L 值判断没有运行时函数
所有基于明暗调整补色的逻辑，都依赖对背景色亮度的实时判断。但 CSS 目前没有任何函数能读取 var(--bg) 的 L 值——luma()、lightness() 全在草案阶段，未被任何稳定版浏览器实现。
这意味着：
- 纯 CSS 方案只能靠预设阈值（如
l > 50），对渐变背景、图片背景、动态主题完全失效 - 若需精准适配，必须用 JS 读取
getComputedStyle().backgroundColor→ 转 HSL → 计算 L → 注入内联样式，但会引入 FOUC 风险 - PostCSS 构建时转译虽稳定，却无法响应运行时颜色变更（如主题切换）
补色计算只是起点，后续的亮度缩放逻辑才是实际项目中最常卡住的地方——它不像语法那样有明确对错，而是需要在精度、兼容性和性能之间反复权衡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
