CSS中用hsl调整颜色亮度的简单方法

本文深入讲解了如何利用 CSS 的 hsl() 函数通过精准调节亮度（l）参数来安全、可控地让颜色变深——只需降低 l 值（如从 60% 降至 40%），即可在保持原有色相与饱和度的前提下实现语义清晰、可预测的明暗变化，相比易偏色的 rgb() 调整或受背景干扰的十六进制叠黑方案更具优势；同时提醒读者注意 l 值的安全下探范围、CSS 变量下的变体生成方案（如 color-mix）、浏览器兼容性及至关重要的可访问性对比度验证，让调色既高效又合规。

用 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%);
}</p>

别忘了检查对比度是否达标

单纯调暗不等于可读。WCAG AA 级要求文本与背景对比度 ≥ 4.5:1。用浏览器 DevTools 的颜色选取器点开色块，它会自动显示当前对比度——l 降到 30% 左右时，浅灰背景上就可能不达标了。

好了，本文到此结束，带大家了解了《CSS中用hsl调整颜色亮度的简单方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！