HTML HSL 和 HSLA 颜色
本页内容
HSL 代表色相、饱和度和亮度(英语:Hue, Saturation, Lightness, Alpha )。HSLA 颜色值是具有 Alpha 通道(不透明度)的 HSL 的扩展。
HSL 颜色值
在 HTML 中,可以使用以下形式的色调、饱和度和亮度 (HSL) 指定颜色:
hsl(色相,饱和度,明度) 色调是色轮上从 0 到 360 的度数。0 是红色,120 是绿色,240 是蓝色。
饱和度是一个百分比值,0% 表示灰色阴影,100% 表示全色。
亮度也是一个百分比值,0% 为黑色,100% 为白色。
示例
<!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>
</body>
</html>
色相
色调是色轮上从 0 到 360 的度数。0 是红色,120 是绿色,240 是蓝色。
饱和
饱和度可以描述为颜色的强度。
100% 是纯色,没有灰色阴影
50% 是 50% 灰色,但您仍然可以看到颜色。
0% 完全是灰色的,你再也看不到颜色了。
示例
<!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>
</body>
</html>
亮度
一种颜色的明度可以描述为你想赋予该颜色多少光,其中 0% 表示无光(黑色),50% 表示 50% 光(既不暗也不亮) 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>
</body>
</html>
灰色
灰色通常通过将色调和饱和度设置为 0 来实现,并将亮度从 0% 调整到 100% 以获得更暗/更亮:
示例
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 0%, 20%);">hsl(0, 0%, 20%)</h1>
<h1 style="background-color:hsl(0, 0%, 30%);">hsl(0, 0%, 30%)</h1>
<h1 style="background-color:hsl(0, 0%, 40%);">hsl(0, 0%, 40%)</h1>
<h1 style="background-color:hsl(0, 0%, 60%);">hsl(0, 0%, 60%)</h1>
<h1 style="background-color:hsl(0, 0%, 70%);">hsl(0, 0%, 70%)</h1>
<h1 style="background-color:hsl(0, 0%, 90%);">hsl(0, 0%, 90%)</h1>
</body>
</html>
HSLA 颜色值
HSLA 颜色值是具有 Alpha 通道的 HSL 颜色值的扩展 - 它指定颜色的不透明度。
HSLA 颜色值通过以下方式指定:
hsla(色调, 饱和度,亮度,alpha) alpha 参数是一个介于 0.0(完全透明)和 1.0(完全不透明)之间的数字:
示例
<!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>
</body>
</html>
Color Picker
这个color picker使用xiaokaike/vue-color 实现。可以拖动和输入改变颜色值, 可以查看对应的十六进制颜色,RGB,RGBA, HSLA颜色。