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