手册
目录
收藏483
分享
阅读3911
更新时间2025-07-16
前言:
HSL 代表色相、饱和度和明度。
在 CSS 中,可以使用色相、饱和度和亮度(HSL)的形式来指定颜色:
hsl(色相, 饱和度, 亮度)
色相(Hue)是色轮上的一个角度,范围从 0 到 360。0 是红色,120 是绿色,240 是蓝色。
饱和度(Saturation)是一个百分比值。0% 表示灰色调,100% 表示完全的颜色。
亮度(Lightness)也是一个百分比。0% 是黑色,50% 表示既不亮也不暗,100% 是白色。
尝试调整下面的 HSL 值进行实验:
色相
0 饱和度
100% 亮度
hsl(0, 100%, 50%)
运行实例 » 点击 "运行实例" 按钮查看在线实例
饱和度可以理解为颜色的强度。
hsl(0, 100%, 50%)
运行实例 » 点击 "运行实例" 按钮查看在线实例
颜色的亮度可以理解为希望给颜色添加多少光,其中:
hsl(0, 100%, 0%)
运行实例 » 点击 "运行实例" 按钮查看在线实例
灰色调通常通过将色相和饱和度设置为 0 来定义,并通过调整亮度(从 0% 到 100%)来获得更暗或更亮的色调:
hsl(0, 0%, 0%)
运行实例 » 点击 "运行实例" 按钮查看在线实例
HSLA 颜色值是在 HSL 颜色值的基础上增加了一个 alpha 通道,用于指定颜色的不透明度。
HSLA 颜色值使用以下方式定义:
hsla(色相, 饱和度, 亮度, alpha)
alpha 参数是一个介于 0.0(完全透明)和 1.0(完全不透明)之间的数值:
尝试调整下面的 HSLA 值进行实验:
色相
0 饱和度
100% 亮度
50% ALPHA
0.5 ### 示例
hsla(9, 100%, 64%, 0) hsla(9, 100%, 64%, 0.2) hsla(9, 100%, 64%, 0.4) hsla(9, 100%, 64%, 0.6) hsla(9, 100%, 64%, 0.8) hsla(9, 100%, 64%, 1)
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.7万人学习
共29课时
62.2万人学习
共25课时
39.6万人学习
共43课时
71.5万人学习
共25课时
62.1万人学习
共22课时
23.2万人学习
共28课时
34.2万人学习
共89课时
126.3万人学习