互补色需色相加180°并模360，但仅此无法保障可读性；必须根据原色亮度（L）分档缩放L和S：浅背景压暗补色（L×0.4, S×0.8），深背景提亮补色（L×1.6, S×0.6）。
直接用 hsl(from <color> calc(h + 180) s l) 就能生成数学上准确的互补色，但仅此一步几乎必然导致可读性失败——补色本身不保对比度，必须同步调节亮度和饱和度。
为什么 hsl(from var(--bg) calc(h + 180) s l) 常常“看起来不对”
它确实算出了色相正对的补色，但人眼对不同色相的明暗感知差异极大。比如 hsl(60, 100%, 50%)（黄）和它的补色 hsl(240, 100%, 50%)（蓝），数学上完美，视觉上却可能因黄色本身“显亮”而让蓝底白字对比度暴跌。
- 浏览器会自动对
calc(h + 180)做模 360 处理，无需手动写% 360，但前提是输入 h 是有效数值（不能是currentColor或未定义变量） -
s和l若不参与calc()运算，就只是原样复制，不是“保持”，而是“冻结”——改了主色，补色的明暗不会自适应 - 常见错误：写成
hsl(calc(h + 180), s, l)，这是非法语法，calc()必须在from内部作用于通道变量
如何让互补色真正可用：必须缩放 l 和 s
纯色相翻转只是起点，落地时需按背景明暗分档调整亮度，否则文字或边框极易不可读。
- 浅背景（L > 0.5）→ 补色要压暗、略降饱和：
hsl(from var(--bg) calc(h + 180) calc(s * 0.8) calc(l * 0.4) - 深背景（L ≤ 0.5）→ 补色要提亮、适度保饱和：
hsl(from var(--bg) calc(h + 180) calc(s * 0.6) calc(l * 1.6) - 别指望 CSS 自动判断明暗：目前没有
lightness()或luma()函数，阈值得靠经验预设（如l < 0.5）或交由 JS 补充 - 边框使用时，务必先声明
border-style: solid，否则border-color不生效
兼容性与降级的现实选择
Chrome 111+、Safari 16.4+、Firefox 115+ 均已支持 from + calc()，但旧版浏览器完全不识别该语法，会静默忽略整条声明。
立即学习“前端免费学习笔记（深入）”；
- 不支持时 fallback 只能是写死值：
border-color: #ff6b35;放在hsl(from ...)上方，靠层叠覆盖 - 构建时处理更可控：用 PostCSS 插件（如
postcss-hsl-calc）把calc(h + 180)预编译为具体数值 - 运行时 JS 方案适用于动态主题：读取
getComputedStyle(el).getPropertyValue('--bg')，正则提取 h 值，计算后写回style.setProperty - 别用
color-mix(in hsl longer hue, ...)替代：它不支持变量，且longer hue模式不保证 ±180° 偏移，结果不可控
最常被忽略的点不在语法，而在亮度缩放逻辑——补色生成是确定性的，但“是否可用”取决于你如何响应原始颜色的明暗分布，而 CSS 目前对此无原生感知能力。
