hsl(from var(--color) calc(h + 180) s l)是当前唯一原生动态生成互补色的CSS方案；需满足变量为合法HSL格式、浏览器支持CSS Color Level 4（Chrome 111+/Safari 16.4+/Firefox 115+）、且不可用currentColor或未定义变量，同时必须显式fallback并手动调节l/s以保障可读性。
hsl(from var(--color) calc(h + 180) s l) 是当前唯一能在现代 CSS 中真正实现互补色自动计算的原生方案，不需要 JS、不依赖构建工具，但必须满足三个硬性条件：变量值是合法 HSL 格式、浏览器支持 CSS Color Level 4、且不能用 currentColor 或未定义变量。
为什么 hsl(calc(h + 180), s, l) 一定不行
这不是写法“不够聪明”，而是 CSS 规范在解析阶段根本不会对 hsl() 内部的 calc() 求值。常见失效现象包括：
-
hsl(calc(var(--h) + 180), 70%, 50%)：Chrome ≤125 / Firefox ≤124 静默丢弃整条声明，文字回退到继承色 -
hsl(calc(350 + 180), 70%, 50%)：结果 530 超出 0–360，CSS 不取模，多数渲染为灰色或黑/白 -
hsl(calc(240deg + 180), 70%, 50%)：单位deg和纯数字 180 类型冲突，语法错误
hsl(from ) 的正确写法与前提条件
这个语法从颜色中提取原始 HSL 分量再参与运算，Chrome 111+、Safari 16.4+、Firefox 115+ 已稳定支持，但容易忽略几个关键点：
-
--color-primary必须是明确的 HSL 值，例如hsl(210, 85%, 60%)；HEX、RGB 或currentColor会导致from提取失败 - 不能把整个
hsl()存进一个变量再传给from，比如--color: "hsl(210, 85%, 60%)"; hsl(from var(--color) ...)会失败——var(--color)是字符串，不是颜色值 - 必须显式 fallback：先写
color: hsl(30, 85%, 60%)，再写color: hsl(from var(--color-primary) calc(h + 180) s l)，旧浏览器会跳过第二行
补色之后必须手动调节 l 和 s
数学上正确的互补色，视觉上大概率不可读。比如 hsl(60, 100%, 50%)（黄）配它的互补色 hsl(240, 100%, 50%)（蓝），黄底白字对比度极低。实际落地时必须干预：
立即学习“前端免费学习笔记（深入）”；
- 浅背景（L > 0.5）→ 补色需压暗：
calc(l * 0.4)或calc(l - 25%)，避免刺眼 - 深背景（L ≤ 0.5）→ 补色需提亮：
calc(l * 1.6)或calc(l + 30%)，防止糊成一片 - 高饱和主色（s > 80%）的互补色常过艳，可乘以
0.6~0.8缓和 - CSS 没有原生亮度判断函数，所谓“自动适配”目前只能靠预设阈值（如用
l 粗略分档）或 JS 补充
真正难的从来不是算出补色，而是 l 值的物理意义：它不是线性亮度，人眼对中间段（30%–70%）变化最敏感，两端（>92%）极易失色或泛白。补色的 l 调整不是加减法，得结合目标使用场景反复验证对比度。
