CSS中无法用calc()调整hsl()亮度值，color-mix(in srgb, var(--c) 80%, white 20%)是唯一可靠提亮方案，需前置降级色且不支持from变量语法。
不能用 lightness()、oklch(from ...) 或 calc() 直接增减亮度值——这些在当前所有稳定版浏览器中都不生效，写了等于白写。
为什么 hsl() 里不能写 calc(l + 20%)
CSS 不支持在 hsl() 函数参数中使用 calc() 计算亮度（l）或饱和度（s）。你写 hsl(210, 50%, calc(50% + 20%))，浏览器会直接忽略整条声明，DevTools 里该行变红或静默失效。这不是 bug，是规范明确不支持的语法。
color-mix() 是唯一能“按比例提亮”的现代方案
color-mix() 不是调亮度，而是向目标色里掺入一定比例的白色，视觉上等效于“变亮”，且结果自然、不溢出、保留 alpha。它目前在 Chrome 111+、Firefox 119+、Safari 16.4+ 中可用。
- 必须显式指定色彩空间：
in srgb，否则 Safari 可能跳过整条规则 - 百分比总和必须为 100%，例如
var(--c) 80%, white 20%表示原色占主，白占辅 - 不支持
from var(--c)这类写法，color-mix(in srgb, from --c, white 20%)无效 - 降级必须前置：先写兜底色，再写
color-mix()声明
示例：
立即学习“前端免费学习笔记（深入）”；
button {
--accent: #4a6fa5;
background-color: #4a6fa5;
background-color: color-mix(in srgb, var(--accent) 80%, white 20%);
}
真要“精确 20% 提亮”，得靠 JS 或构建时处理
所谓“提亮 20%”本身没有绝对标准——HSL 的 l 值加 20%、OKLCH 的 l 加 0.2、RGB 各通道 ×1.2，结果都不同。浏览器没实现统一语义，所以纯 CSS 无法做到数值级精确。
- 若需动态响应（如主题切换时实时计算），必须用 JS：
getComputedStyle(el).color取出 RGB → 转 OKLCH → 调l→ 再转回 sRGB - 若只是维护一套设计系统，推荐预设两档：主色 + 提亮版（如
--accent-light: color-mix(in srgb, var(--accent) 75%, white 25%)），而非追求“刚好 20%” - 别用
filter: brightness(1.2)——它作用于渲染层，影响子元素、破坏透明度、无法参与transition颜色插值
真正落地时，color-mix() 的比例是经验值，不是数学公式；写死 80%/20% 比纠结“是否真等于亮度+20%”更可靠。
