在 CSS 中，HSL（色相 Hue、饱和度 Saturation、亮度 Lightness）是一种直观的颜色表示方式，比传统的十六进制或 RGB 更容易调节颜色的明暗。通过调整 HSL 中的亮度值，你可以轻松实现颜色变亮或变暗，而无需手动计算 RGB 值。
理解 HSL 的三个参数
HSL 颜色由三个部分组成：
色相（Hue）：0 到 360 之间的数值，代表色轮上的角度。例如，0 或 360 是红色，120 是绿色，240 是蓝色。饱和度（Saturation）：0% 到 100% 之间的百分比。0% 表示灰色，100% 表示完全饱和的颜色。亮度（Lightness）：0% 到 100% 之间的百分比。0% 是纯黑，100% 是纯白，50% 是标准亮度。
语法如下：
color: hsl(色调, 饱和度, 亮度);
通过调节亮度控制明暗
要让一个颜色变亮或变暗，只需修改 lightness 值即可。
立即学习“前端免费学习笔记（深入）”；
增加 lightness 值（如从 50% 提高到 70%），颜色会变得更亮，接近白色。降低 lightness 值（如从 50% 降到 30%），颜色会变暗，接近黑色。
例如，定义一个基础蓝色：
background-color: hsl(240, 100%, 50%); /* 标准蓝色 */
让它变亮一些：
PicDoc
AI文本转视觉工具，1秒生成可视化信息图
6214 查看详情 background-color: hsl(240, 100%, 70%); /* 浅蓝色 */
再变暗一些：
background-color: hsl(240, 100%, 30%); /* 深蓝色 */
结合 CSS 变量统一管理颜色明暗
使用 CSS 自定义属性（变量）可以更高效地管理同一色相的不同明暗版本。
:root {
–primary-hue: 200;
–primary-sat: 70%;
}
.light-blue { color: hsl(var(–primary-hue), var(–primary-sat), 80%); }
.normal-blue { color: hsl(var(–primary-hue), var(–primary-sat), 50%); }
.dark-blue { color: hsl(var(–primary-hue), var(–primary-sat), 30%); }
这样只需修改变量，就能统一调整整个项目的颜色主题。
支持透明度：使用 hsla
如果需要透明效果，可以使用 hsla()，它在 hsl 的基础上增加一个 alpha 通道：
color: hsla(240, 100%, 50%, 0.5); /* 半透明蓝色 */
alpha 值范围是 0（完全透明）到 1（完全不透明）。
基本上就这些。用 HSL 调节明暗直观又方便，特别适合做主题配色或悬停状态的颜色变化。不复杂但容易忽略。
以上就是如何通过css hsl设置颜色并调节明暗的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1032455.html
微信扫一扫 
支付宝扫一扫 
