HTML - HSL 和 HSLA 颜色

HSL 颜色值使用三个参数定义颜色：色调（颜色类型）、饱和度（颜色强度）和亮度（亮度）。HSLA 通过添加 alpha 参数来扩展 HSL，该参数指定颜色的不透明度级别。

HTML 中的 HSL 颜色代码

HTML 支持 HSL 颜色模型，它代表色相、饱和度和亮度。它提供了一种灵活直观的方式来定义颜色。HSL 表示允许开发人员指定色调、调整饱和度和控制亮度，从而提供更广泛的颜色选择。

色调：它是色轮上从 0 到 360 的度数，其中 0 是红色，120 是绿色，240 是蓝色。
饱和：它是一个百分比值，表示颜色的强度或鲜艳程度，其中 0% 表示灰色阴影，100% 表示全色。
亮度：这也是一个百分比值，表示颜色的亮度或深色，其中 0% 为黑色，50% 为既不亮也不暗，100% 为白色。

例

下面是一个示例，演示了如何在 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 representation */
				 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 模型提供了一种更灵活的颜色处理方式，可以更轻松地微调和控制网页上元素的外观。

HTML 中的 HSLA 颜色

在 HTML 中，HSLA 代表色调、饱和度、亮度和 alpha。它是 HSL 颜色代码的扩展，带有可选的 alpha 参数以实现透明度。此 Alpha 通道指定数字介于 0.0 和 1.0 之间的颜色的透明度或不透明度。在这里，0.0 表示完全透明，1.0 表示不透明。

要在 HTML 中指定 HSLA 颜色值，可以在 style 属性或 CSS 文件中使用 hsla（） 函数。

例

在此示例中，我们使用 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>

打印本页