css 如何让同一颜色变深一点_通过 hsl 调整亮度实现

用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%); } 
/ 配合 CSS 变量 + color-mix（实验性，慎用于生产） / :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% 左右时，浅灰背景上就可能不达标了。