hsl(from var(--color) calc(h + 180) s l)是当前唯一真正动态、无需JS、不依赖构建工具的互补色方案；旧浏览器需fallback至静态值或JS补偿，因hsl(calc())在解析阶段无法求值变量，且存在单位错配、越界截断等问题。
现代浏览器中，用 hsl(from var(--color) calc(h + 180) s l) 是唯一真正动态、无需 JS、不依赖构建工具的方案；旧版浏览器必须 fallback 到静态值或 JS 补偿。
为什么 hsl(calc(h + 180), s, l) 大概率不工作
这个写法看似简洁，但浏览器在解析 hsl() 时无法在样式计算阶段求值 calc()——尤其当 h 来自变量（如 var(--hue)）时。常见失效现象包括：颜色变透明、回退到继承色、或整个声明被忽略。
-
hsl(calc(var(--hue) + 180), 70%, 50%)：Chrome ≤125 / Firefox ≤124 直接跳过，不报错也不渲染 -
hsl(calc(350 + 180), 70%, 50%)：结果是 530，超出 0–360 范围，CSS 静默截断为 0 或无效值，最终可能显示为灰色 -
hsl(calc(240deg + 180), 70%, 50%)：单位deg和纯数字180类型不匹配，语法错误
hsl(from ...) 是当前最可靠动态方案
它从一个已定义的 HSL 颜色中提取原始分量，再对 h 做运算，自动完成模 360 归一化，且不依赖运行时 JS。
- 前提：源变量必须是合法 HSL 格式，如
--text-color: hsl(210, 85%, 40%)；HEX 或 RGB 值会让from提取失败 - 写法示例：
--text-complement: hsl(from var(--text-color) calc(h + 180) s l); - 兼容性：Chrome 111+、Safari 16.4+、Firefox 115+ 已稳定支持；低于这些版本需 fallback
必须做的兼容性兜底
不加 fallback 的 from 写法在旧浏览器里会完全失效，文字变成默认色（通常是黑色），这是线上事故高发点。
- 双声明 fallback：
color: hsl(210, 85%, 40%); color: hsl(from var(--text-color) calc(h + 180) s l);—— 旧浏览器忽略第二行，按第一行渲染 - PostCSS 插件（如
postcss-hsl-calc）：构建时把calc(h + 180)展开为具体数值，输出纯hsl(30, 85%, 40%) - JS 运行时补救（仅限关键文案）：
getComputedStyle(el).getPropertyValue('--text-color')→ 正则提取h→(h + 180) % 360→ 设回style.color
别忽略亮度（l）带来的可读性陷阱
HSL 互补色只保证色相正对，不保证文字与背景之间有足够对比度。例如 hsl(60, 100%, 50%)（黄）和它的互补色 hsl(240, 100%, 50%)（蓝）数学上完美，但黄底白字实际对比度极低。
- 文字/背景组合时，建议主动调整互补色的
l：主色l: 50%，互补色改用l: 25%或75%，而非照搬 - WCAG 对比度检测看的是相对亮度，不是色相差；别拿 HSL 互补色直接去套无障碍标准
- 饱和度
s一般保留，除非原色太灰（s ），此时可适当提高互补色的s来增强视觉区分
真正麻烦的从来不是怎么算 180°，而是怎么让这个“算出来”的颜色，在所有设备、所有浏览器、所有文字使用场景下都真正可用——from 解决了计算，但亮度适配、降级策略、对比度验证，得手动一关关过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
