HTML - HSL 和 HSLA 颜色
HSL 和 HSLA 颜色
HSL 颜色值使用三个参数定义颜色：色相（颜色类型）、饱和度（颜色强度） 和 亮度（明亮度）。HSLA 通过添加 alpha 参数 扩展了 HSL，该参数指定颜色的不透明度。
HSL 颜色代码
HTML 支持 HSL 颜色模型，即色相（Hue）、饱和度（Saturation）和亮度（Lightness）。它提供了一种灵活且直观的方式来定义颜色。HSL 表示允许开发者指定色相、调整饱和度和控制亮度，从而提供更广泛的颜色选择。
- 色相（Hue）： 色轮上的度数，从 0 到 360，其中 0 表示红色，120 表示绿色，240 表示蓝色。
- 饱和度（Saturation）： 百分比值，表示颜色的强度或鲜艳度，0% 表示灰色调，100% 表示纯色。
- 亮度（Lightness）： 也是百分比值，表示颜色的明亮或黑暗程度，0% 表示黑色，50% 表示不亮不暗，100% 表示白色。
创建 HSL 颜色
要创建 HSL 颜色，请使用 hsl() 函数，并传入色相、饱和度和亮度的值。以下是使用 hsl() 函数的语法：
hsl(hue, saturation%, lightness%)
示例
以下示例演示了在 HTML 中使用 HSL 颜色：
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML HSL Color Example</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
.hsl-color-box {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: hsl(120, 50%, 50%);
/* HSL 表示 */
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="hsl-color-box">
<p>
This box has an HSL color background
</p>
</div>
</body>
</html>
在此示例中，.hsl-color-box 类的 background-color 属性使用 HSL 颜色表示设置。值如下：
色相 (H)： 120 度（绿色）
饱和度 (S)： 50%
亮度 (L)： 50%
调整这些值以实验不同的颜色。HSL 模型提供了一种更灵活的方式来处理颜色，使其更容易微调和控制网页元素的外观。
HSLA 颜色代码
在 HTML 中，HSLA 表示色相、饱和度、亮度和 alpha。它是 HSL 颜色代码的扩展，带有可选的 alpha 参数用于 透明度。此 alpha 通道使用 0.0 到 1.0 之间的数字指定颜色的透明或不透明程度。其中，0.0 表示完全透明，1.0 表示无透明。
创建 HSLA 颜色
要创建 HSLA 颜色，请使用 hsla() 函数，传入色相、饱和度、亮度和用于透明度的 alpha 值。hsla() 函数可在 CSS 文件中使用，也可在 HTML 的 style 属性中使用。以下是使用 hsla() 函数创建 HSLA 颜色的语法：
hsla(hue, saturation%, lightness%, alpha)
示例
在此示例中，我们使用 HSLA 颜色代码设置了背景颜色和文本颜色：
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by HSLA code</title>
</head>
<body style = "width:300px; height:100px;">
<h2 style = "background-color: hsla(0, 0%, 40%, 0.5);">
Setting the Background using hsla()
</h2>
<p style = "color: hsla(0, 0%, 30%, 1.0);">
The text color of the paragraph is
styled using hsla()
</p>
</body>
</html>
HSL 颜色选择器
您可以使用这个 HSL 颜色选择器，通过调整色调、饱和度和亮度水平来创建所需的颜色：
| 色调 |
|
| 饱和度 |
|
| 亮度 |
|