纯css中没有lighten()或darken()函数，因其属sass/less编译期功能；可靠方案是hsl()+calc()手动调l值（需hsl格式及单位一致）或现代浏览器用color-mix()混合黑白（srgb线性插值，需in srgb声明）。
纯 CSS 里没有 lighten() 或 darken() 函数，它们是 Sass/Less 编译期功能，运行时无法调用。想在浏览器中动态调整颜色明暗，必须绕过“函数调用”思维，转向可计算、可响应的原生方案。
为什么直接写 lighten(var(--color), 10%) 会失败
浏览器根本不认识 lighten 这个关键字——它不是 CSS 语法，也不在任何 CSS 规范中。你写的这行会被整个忽略或报解析错误。CSS 变量（--color）值是字符串，不能被编译器“执行”成颜色运算。Sass 是在构建阶段把 lighten(#3498db, 15%) 算成 #5dade2 再输出 CSS；而 CSS 变量到渲染时才生效，中间没有计算引擎。
用 hsl() + calc() 手动模拟最稳妥
前提是基础色必须以 hsl() 格式定义，且 H、S、L 拆成独立变量。否则无法提取亮度值参与计算：
-
--base-h: 204（单位是数字，不带单位） -
--base-s: 70%（必须带 %） -
--base-l: 50%（必须带 %） --lighter: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 10%))-
calc()中的10%必须和--base-l单位一致，否则结果不可控（比如calc(50 - 10)得到 40，但浏览器当 40% 还是 40px？不确定） - L 值超出 0–100% 时，浏览器会自动 clamp，但可能产出灰蒙蒙的中间色，而非预期明暗变化
现代浏览器可用 color-mix() 更接近设计意图
color-mix() 在 sRGB 空间做线性混合，行为类似“加白/加黑”，视觉更自然，尤其对深色提暗不易发黑：
-
--primary-lighter: color-mix(in srgb, var(--primary), #fff 20%)表示 80% 原色 + 20% 白色 -
--primary-darker: color-mix(in srgb, var(--primary), #000 15%)表示 85% 原色 + 15% 黑色 - 注意：第二个参数是“目标色占比”，不是“变亮百分比”——
#000 15%≠ 变暗 15% - 仅 Chromium 111+、Firefox 119+、Safari 16.4+ 支持；旧版需 fallback 或 JS 降级
- 不依赖 HSL 拆解，对 hex/rgb 输入友好，但无法控制色相保真度
别用 filter: brightness() 替代颜色调整
brightness() 是渲染后滤镜，只影响像素显示，不改变 CSS 颜色语义值：
- 无障碍对比度检测工具读不到真实颜色值，WCAG 校验失效
- 文字阴影、边框、背景渐变等继承自原始色的地方不会同步变亮
- 多层 filter 叠加会产生意外色偏，且性能开销高于原生颜色计算
- 无法用于
border-color、box-shadow等需要精确颜色值的属性
真正麻烦的不是怎么算，而是算完之后没人帮你检查对比度——color-mix(in srgb, #1a1a1a, #000 20%) 看似加深了，但结果可能是 #000000，文字直接消失。所有推导出的颜色，务必用 DevTools 的无障碍面板手动验证是否 ≥4.5:1。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
