HTML HSL 和 HSLA 颜色
HSL 代表色相（hue）、饱和度（saturation）和亮度（lightness）。
HSLA 颜色值是 HSL 的扩展，增加了一个 Alpha 通道（透明度）。
HSL 颜色值
在 HTML 中，颜色可以用色相、饱和度和亮度（HSL）的形式指定：
hsl(色相, 饱和度, 亮度)
色相是色轮上的度数，范围从 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(色相, 饱和度, 亮度, 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)
自己动手试一试 »
