减小字体
增大字体- ·上一篇内容：HTML使用RGB和RGBA设置颜色
- ·下一篇内容：HTML十六进制颜色
HTML使用HSL和HSLA设置颜色
在HTML中，除了使用颜色名称、RGB和GRBA指定颜色外，还可以使用HSL和HSLA来指定颜色。
HSL颜色值
HSL是使用Hue(色调)、Saturation(饱和度)和Lightness(亮度)来设置颜色的方法，其使用方法如下：
hsl(hue, saturation, lightness)
HSL的HUE值
Hue是指颜色的色调，其取值范围为0到360.其值从0到360，颜色从红色逐渐过渡到蓝色，再到红色。
HSL的Saturation值
Saturation是指饱和度，其值是一个百分比。0%是灰色阴影，100%代表颜色的全色。
颜色的饱和度指颜色的丰富程度或强烈程度。下图是红色RGB(255, 0, 0)在Saturation从100%到0%的颜色变化情况。
HSL的Lightness值
Lightness是指亮度，其值也是一个百分比，0%为全黑色，100%为全白色。
下图是蓝色RGB(0, 0, 255)的亮度值，从0%到100%的变化情况。
HSLA颜色值
HSLA颜色是在HSL颜色的基础上添加了Alpha通道，Alpha通道用于设置颜色的透明程度。
HALA颜色值设置的方法如下：
hsla(hue, saturation, lightness, alpha)
alpha的取值在0和1之间，当alpha值为0时是完全透明的颜色；当alpha值为1时，是完全不透明的颜色。
下面是使用HSLA设置颜色的例子
hsla(120, 100%, 50%, 1.0)
hsla(200, 55%, 30%, 1.0)
hsla(120, 100%, 50%, 0.7)
hsla(200, 55%, 30%, 0.7)
hsla(120, 100%, 50%, 0.5)
hsla(200, 55%, 30%, 0.5)
hsla(120, 100%, 50%, 0.2)
hsla(200, 55%, 30%, 0.2)
hsla(120, 100%, 50%, 0)
hsla(200, 55%, 30%, 0)
网页调色器
可以使用本站仿 https://www.w3schools.com/
网站设计的简单的HSL/HSLA调色器来获取你想要的颜色。
如对以上内容有疑问或文中有错误之处，请留言指出。如需转载，请注明出处：翔宇亭IT乐园（http://www.biye5u.com），并给出本文的链接地址：http://www.biye5u.com/article/html5/2023/6602.html。
微信搜索“优雅的代码”关注本站的公众号，或直接使用微信扫描下面二维码关注本站公众号，以获取最新内容。
个人成长离不开各位的关注，你的关注就是我继续前行的动力。
- 给好评 如果您觉得此内容好，就请您
0%(0) 
- 给差评 如果您觉得此内容差，就请您
0%(0) 