CSS HSL 颜色
HSL 值
在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色，格式如下：
hsla(hue, saturation, lightness)
色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。
亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。
请通过混合以下 HSL 值来进行实验：
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
实例
<!DOCTYPE html><html><body><h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1><h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1><h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1><h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1><h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1><h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1><p>在 HTML 中，您可以使用 HSL 值来设置颜色。</p></body></html>
饱和度
饱和度可以描述为颜色的强度。
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%)
实例
<!DOCTYPE html><html><body><h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1><h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1><h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1><h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1><h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1><h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1><p>通过 HSL 颜色，设置更少的饱和度意味着更少的颜色，0% 为全灰。</p></body></html>
亮度
颜色的明暗度可以描述为要赋予颜色多少光，其中 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%)
实例
<!DOCTYPE html><html><body><h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1><h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1><h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1><h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1><h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1><h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1><p>通过 HSL 颜色，亮度 0% 显示黑色，亮度 100 显示白色。</p></body></html>
通常通过将色调和饱和度设置为 0 来定义灰色阴影，并将亮度从 0％ 到 100％ 进行调整可以得到更深/更浅的阴影：
hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)
实例
<!DOCTYPE html><html><body><h1 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h1><h1 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h1><h1 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h1><h1 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h1><h1 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h1><h1 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h1><p>利用 HSL 颜色，可通过将饱和度设置为 0％，并根据灰色的暗/亮程度调整亮度来制作灰阶。</p></body></html>
HSLA 值
HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了颜色的不透明度。
HSLA 颜色值指定为：
hsla(hue, saturation, lightness, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：
请通过混合以下 HSLA 值进行实验：
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)
实例
<!DOCTYPE html><html><body><h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1><h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1><h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1><h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1><h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1><h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1><p>您可使用 HSLA 颜色值生成透明色。</p></body></html>