hsl(from ...)能解构变量颜色并运算，而currentColor是不可解构的继承值，故hsl(from currentColor...)会静默失效；l必须为纯数字，calc(l - 15%)等带单位写法将导致整条声明被忽略。
不能靠 currentColor 或手动 hsl() 写死值来动态调对比度——必须用 hsl(from ...) 配合 calc() 对通道做运算，且亮度（l）必须是纯数字，不是百分比。
为什么 hsl(from var(--bg) h s calc(l - 15)) 能工作，而 hsl(from currentColor ...) 直接失效
currentColor 是运行时继承值，不是可解构的颜色容器；hsl(from ...) 只接受 CSS 变量或字面色值作为源，无法从 currentColor 提取 h、s、l。浏览器遇到 hsl(from currentColor ...) 会静默丢弃整条声明，不报错也不 fallback。
真正可用的路径是：先将背景色存为变量，再基于它运算。
-
--bg: #2a2a2a;→ 然后color: hsl(from var(--bg) h s calc(l + 20)); - 若背景来自主题切换，确保 JS 或 CSS 注入时同步更新该变量，而非只改
background-color - 别在伪元素里用
currentColor想“复用并变暗”，它永远等于父级已渲染出的color值，不可参与计算
hsl(from ...) 里 calc(l - 15) 的数值陷阱
HSL 的 l 是 0–100 的整数，不是带单位的长度。写成 calc(l - 15%) 会完全失效——浏览器解析失败，整条颜色声明被忽略。
暗化幅度需控制在安全区间：
- 减亮度建议
10–25，避免l掉到10以下导致发灰或不可见 - 同步降饱和度更自然：
calc(s * 0.7)比单纯调暗更符合视觉层次 - 提亮场景（如深色背景上文字）推荐
calc(l + 15)+calc(s * 0.3)，防文字糊成一片
浏览器支持与降级兜底要点
hsl(from ...) 在 Safari 15.4+、Chrome 111+、Firefox 120+ 已稳定支持，无需 polyfill。但仍有两个易漏点：
- 旧版 Firefox（calc() 在颜色函数中的嵌套支持不稳定，建议用
@supports (color: hsl(from red h s l))包裹关键规则 - 千万别把
oklch()当替代方案混用——它在 Safari 低L值下易渲染失真，OLED 屏上可能直接变黑无细节 - 如果项目需兼容 IE 或 Safari 16.3 及更早，降级回静态变量对：定义
--text-on-dark和--text-on-light，用@media (prefers-color-scheme: dark)切换
最常被忽略的是：hsl(from ...) 的运算结果不会自动满足 WCAG 4.5:1 对比度，它只是同色系调整工具。真要保合规，得配合 color-contrast()（草案）或 JS 计算相对亮度——CSS 相对颜色管“怎么变”，不管“变得够不够”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
