不能用color-mix()调亮度，因其是线性混合而非精准亮度调节，不接受未计算变量，且srgb下亮度感知非线性易致偏色失真；应优先用hsl(from)或lch(from)配合calc()动态调节l通道。
不能用 color-mix() 调亮度，它不是亮度调节工具，而是线性混合器；真正能精准、响应变量、独立控制亮度的，只有 hsl(from) 和 lch(from) 配合 calc()。
为什么 color-mix() 会把颜色调坏
很多人写 color-mix(in srgb, var(--bg) 90%, white 10%) 想提亮，结果深蓝变灰紫、浅黄发白失真。原因有三：
-
color-mix()是按色彩空间线性插值，sRGB 下人眼感知亮度非线性，10% white 在不同基色上提亮幅度差异极大 - 它不接受未计算的 CSS 变量：
var(--bg)直接 fallback 或无效 - 它动的是整个颜色通道，
c（色度）和h（色相）也被拖动，导致饱和度塌陷或偏色
hsl(from) 和 lch(from) 怎么选
两者都支持 calc() 动态改 l，但行为本质不同：
-
hsl(from var(--color) h s calc(l + 15%))：简单加减，适合按钮 hover 等快速明暗分档；但l > 100%→ 白，l → 黑，容易溢出失效 -
lch(from var(--color) calc(l * 1.15) c h)：LCH 空间中L更贴近人眼感知，乘法缩放更自然——深色提亮柔和，浅色不易过曝，推荐用于文字、边框等需保可读性的场景
必须防溢出，否则颜色就废了
单纯 calc(l + 20%) 在浅色上大概率变成 #ffffff，calc(l - 25%) 在深色上直接归零。得加约束：
- 用
min()/max()截断：calc(min(95%, max(5%, l + 10%)))，确保亮度始终在 5%–95% 可视区间 - 对深色基底（
l小），优先用乘法：calc(l * 1.3)，避免减法直接归零 - 对浅色基底（
l > 70%），改用乘小于 1 的系数：calc(l * 0.85)，比calc(l - 15%)更安全 - 别忘了先声明
background-color或border-style: solid，否则hsl(from)计算结果不会渲染
真正难的不是写那一行 hsl(from)，而是判断基色该提亮还是压暗、压多少才不撞背景——CSS 还没提供 lightness() 函数，所有阈值都得手动预设或交由 JS 补充。纯 CSS 方案里，l 算深色、<code>l > 0.6 算浅色，中间留缓冲带，已是当前最稳妥的折中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
