hsl(from)仅能提取色相，需用calc()运算才能真正改变色相；补色需calc(h + 180)，但须同步调整s、l以保证可读性，如浅背景补色应降低亮度与饱和度。
hsl(from) 能提取色相，但不能直接改色
单独写 hsl(from var(--c) h s l) 只是把原色的 HSL 值“拆出来再拼回去”，浏览器不会报错，但视觉上毫无变化。色相 h 还是那个 h，没参与任何运算。
必须用 calc() 修改 h 才算真正改变色相
想让按钮悬停时变成补色、文字强调时偏暖一点，就得靠 calc() 对 h 做加减：比如 calc(h + 180) 得到补色，calc(h + 30) 微调为橙调蓝。注意以下几点：
-
h是 0–360 的无单位整数，不能写calc(h + 180deg)或calc(h + 180%) - 超出范围会自动模 360（
calc(350 + 180)→ 170），不用手动% 360 - Chrome 111+、Safari 16.4+、Firefox 115+ 支持该行为；旧版浏览器直接忽略整条声明
- 别在
rgb(from ...)里用h—— RGB 没有色相通道，h变量根本不存在
补色不是终点，亮度和饱和度常被忽略
只改 h 得到的补色大概率不可读。比如浅蓝背景 hsl(210, 80%, 90%) 的补色是 hsl(30, 80%, 90%)（亮黄），边框几乎看不见。真实可用的写法得同时缩放 l 和 s：
- 浅背景（
l > 50）→ 补色要压暗：hsl(from var(--bg) calc(h + 180) calc(s * 0.7) calc(l * 0.4)) - 深背景（
l ）→ 补色要提亮：<code>hsl(from var(--bg) calc(h + 180) calc(s * 0.6) calc(l * 1.6)) -
l越界后浏览器会 clamp，但结果不可控，建议用min(95, calc(l * 1.6))显式兜底
from 语法对格式极其敏感，错一个空格就失效
浏览器不报错，但整条颜色声明会被静默丢弃。最常踩的坑包括：
-
hsl(fromvar(--c) h s l)❌（from和var之间必须有空格） -
hsl(from var(--c) calc(h+180) s l)❌（calc()内部空格缺失，应为calc(h + 180)） -
hsl(from #3b82f6 h s l / 0.8)❌（hsl()不支持/ alpha，要用hsla()或改用rgb(from ... / 0.8)） - 在
:root中写--derived: hsl(from var(--base) calc(h + 180) s l)→ 构建工具无法解析，最终 CSS 里还是原样保留，运行时无效
真正难的从来不是写出 calc(h + 180)，而是判断什么时候该降饱和、什么时候该缩放亮度——尤其在深色模式或 OLED 屏上，漏掉这一步，补色可能直接糊成一片。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
