用hsl()的l参数降低亮度是最可控的变深方式：l值越小颜色越深，如hsl(200,50%,60%)→hsl(200,50%,40%)；相比rgb()易偏色、十六进制叠黑受背景影响，hsl()语义清晰、可预测。
用 hsl() 的第三个参数降低亮度让颜色变深
直接改 hsl() 中的 l（lightness）值是最可控的方式：数值越小，颜色越深。比如 hsl(200, 50%, 60%) 改成 hsl(200, 50%, 40%)，色相和饱和度不变，仅变暗。
为什么不用 rgb() 或十六进制加黑？
rgb() 调整需要分别计算 R/G/B 分量，容易偏色；十六进制叠加黑色（如用 rgba(0,0,0,0.2) 叠加）会受背景影响，且不是“同一颜色变深”，而是混合新色。而 hsl() 的 l 参数专为明暗控制设计，语义清晰、可预测。
实际使用时要注意的几个细节
-
l值范围是0%（纯黑）到100%（纯白），安全下探区间通常为原值减10%~25%；降太多会丢失色彩细节，尤其对高饱和色 - 如果原始颜色来自 CSS 变量（如
--primary: hsl(200, 50%, 60%)），无法直接在变量里做算术运算，需用color-mix()（较新，[Chrome 111+ 支持](https://caniuse.com/css-color-mix)）或预编译工具生成深色变体 - 部分旧浏览器不支持
hsl()的百分比写法（如 IE8 及更早），但现代项目基本无需考虑
/* 示例：基础蓝 → 深蓝 */
.text-primary {
color: hsl(200, 50%, 60%);
}
.text-primary-dark {
color: hsl(200, 50%, 42%);
}
<p>/<em> 配合 CSS 变量 + color-mix（实验性，慎用于生产） </em>/
:root {
--brand: hsl(200, 50%, 60%);
}
.brand-dark {
color: color-mix(in srgb, var(--brand) 80%, black 20%);
}别忘了检查对比度是否达标
单纯调暗不等于可读。WCAG AA 级要求文本与背景对比度 ≥ 4.5:1。用浏览器 DevTools 的颜色选取器点开色块，它会自动显示当前对比度——l 降到 30% 左右时，浅灰背景上就可能不达标了。
