HTML HSL颜色 和 HSLA颜色
HSL 代表色调、饱和度和亮度。
HSLA 颜色值是 HSL 的扩展,带有 Alpha 通道(透明度)。
HSL 颜色值
在 HTML 中,可以使用色调、饱和度和亮度(HSL)指定颜色,格式如下:
hsl(hue, saturation, lightness)
色调是色轮上从0到360的度数。0是红色,120是绿色,240是蓝色。
饱和度是一个百分比值,0%表示灰色阴影,100%表示全色。
亮度也是一个百分比值,0%为黑色,100%为白色。
混合以下 HSL 值进行试验:
HUE
0
SATURATION
100%
LIGHTNESS
50%
实例
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
亲自试一试 »
饱和度
饱和度可以描述为颜色的强度。
100%纯色,没有灰色
50%是50%的灰色,但你仍然可以看到颜色。
0%是完全灰色的,你再也看不到颜色了。
实例
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
亲自试一试 »
亮度
一种颜色的亮度可以描述为你想要给颜色多少光,其中0%表示不亮(黑色),50%表示50%亮(既不暗也不亮)100%表示完全亮(白色)。
实例
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
亲自试一试 »
灰色阴影
灰度通常通过将色调和饱和度设置为0来定义,并将亮度从0%调整到100%以获得较深/较浅的阴影:
实例
hsl(0, 0%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)
hsl(0, 0%, 70%)
hsl(0, 0%, 90%)
亲自试一试 »
HSLA 颜色值
HSLA 是 HSL 颜色值的扩展,带有 Alpha 通道-指定颜色的不透明度。
HSLA 颜色值指定为:
hsla(hue, saturation, lightness, alpha)
alpha 参数是介于0.0(完全透明)和1.0(完全不透明)之间的数字:
混合以下HSLA值进行试验:
HUE
0
SATURATION
100%
LIGHTNESS
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)
亲自试一试 »