必须用hsl(from ...)解构颜色后对l分量做数值加减运算，因l是0–100整数而非百分比，calc(l + 10%)会因类型不匹配静默失效；正确写法为calc(l + 10)，且需保留空格，结果自动截断至0–100。
不能直接对 HEX 值做亮度运算，必须先用 hsl(from ...) 或 rgb(from ...) 解构出可计算的分量。
为什么 hsl(from #3b82f6 h s calc(l + 10%)) 会静默失效
因为 from 解构后，l 是纯数字（比如 60），不是带百分号的值。写成 calc(l + 10%) 相当于让浏览器算 60 + 10% —— 类型不匹配，整条声明被丢弃，无报错、无 fallback。
-
hsl(from #3b82f6 h s calc(l + 10))✅ 正确：60 + 10 = 70，结果是hsl(216 64% 70) -
hsl(from #3b82f6 h s calc(l+10))❌ 失效：缺少空格，calc不识别 -
hsl(from var(--c) h s calc(l + 10%))❌ 失效：同上，类型冲突
正确写法：用 hsl(from ...) + calc(l ± N)
HEX 本身不可计算，但 hsl(from <color> ...) 可以把任意颜色（包括 #3b82f6、var(--c)、rgb(59, 130, 246)）解构成 HSL 分量，其中 l 是 0–100 的整数，支持加减。
- 基础色：
background-color: hsl(from #3b82f6 h s l); - 变亮 15：
background-color: hsl(from #3b82f6 h s calc(l + 15)); - 变暗 20：
border-color: hsl(from var(--bg) h s calc(l - 20)); - 注意：结果
l会自动截断到 0–100 区间，calc(30 - 50)得 0，不会负溢出
想“悬停变暗 15%”？别信百分比，信明度数值偏移
视觉上“变暗 15%”不是乘以 0.85，而是按 HSL 明度轴（0–100）做线性减法。例如基础色 l: 60，减 15 得 45，人眼感知才是稳定变暗；若误用 calc(l * 0.85)，60×0.85=51，只降了 9，效果偏弱。
立即学习“前端免费学习笔记（深入）”；
- 推荐预设变量控制：
:root { --l-base: 60; } - 正常状态：
color: hsl(216 64% calc(var(--l-base))); - 悬停时：
&:hover { --l-base: 45; } - 避免用
color-mix(in hsl, ...)模拟——它不响应变量，且longer hue模式下亮度不可控
真正容易被忽略的点：HSL 的 l ≠ 感知亮度
在高饱和区域（比如 hsl(0 100% 60) 纯红），l - 10 和 l - 10 在低饱和区（比如 hsl(0 20% 60)）产生的视觉明暗变化并不一致。如果要求“均匀变暗”，得切到 lch()：它亮度通道 l 更符合人眼感知，支持小数运算（如 calc(l * 0.9)）。但若只求快速落地，就老实用 hsl(from ... calc(l - N))，并手动测试 N = 10~20 的实际效果。
