HSL 颜色

---

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)
亲自试一试 »