Html 简明教程
HTML - HSL and HSLA Colors
HSL 颜色值使用三个参数、 hue (color type) 、 saturation (color intensity) 和 lightness (brightness) 定义颜色。HSLA 扩展了 HSL，添加了 alpha parameter ，它指定颜色的不透明度级别。
HSL color values defines colors using three parameters, hue (color type), saturation (color intensity), and lightness (brightness). HSLA extends HSL by adding an alpha parameter, which specifies the opacity level of the color.
HSL Color Codes in HTML
-
HTML* 支持 HSL 颜色模型，它代表色相、饱和度和明度。它提供了一种灵活直观的方法来定义颜色。HSL 表示允许开发者指定色相、调整饱和度和控制明度，可提供更广泛的颜色选择。
HTML supports the HSL color model which stands for Hue, Saturation and Lightness. It provides a flexible and intuitive way to define colors. The HSL representation allows developers to specify hues, adjust saturation, and control lightness, offering a wider range of color choices.
-
Hue: It is a degree on the color wheel from 0 to 360 where, 0 is red, 120 is green, and 240 is blue.
-
Saturation: It is a percentage value that indicates how intense or vivid the color is where, 0% means a shade of gray, and 100% is the full color.
-
Lightness: This is also a percentage value that indicates how bright or dark the color is where, 0% is black, 50% is neither light or dark, and 100% is white.
Example
这里有一个演示在 HTML 中使用 HSL 的示例。
Here’s an example demonstrating the use of HSL in HTML.
<!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 颜色表示进行设置。值如下：
In this example, the background-color property of the .hsl-color-box class is set using the HSL color representation. The values are as follows:
-
Hue (H): 120 degrees (green)
-
Saturation (S): 50%
-
Lightness (L): 50%
调整这些值以尝试不同的颜色。HSL 模型提供了一种更灵活的方法来使用颜色，使得更轻松地对网页上的元素的外观进行微调，并对其进行控制。
Adjust these values to experiment with different colors. The HSL model offers a more flexible way to work with colors, making it easier to fine-tune and control the appearance of elements on a webpage.
HSLA Colors in HTML
在 HTML 中， HSLA 代表色相、饱和度、明度和 alpha。它是 HSL 颜色代码的扩展，具有用于 transparency 的可选 alpha 参数。此 alpha 通道指定颜色的透明或不透明程度，介于 0.0 和 1.0 之间。此处， 0.0 表示完全透明，而 1.0 表示无透明度。
In HTML, HSLA stands for hue, saturation, lightness and alpha. It is an extension of HSL color code with an optional alpha parameter for transparency. This alpha channel specifies how transparent or opaque a color is with a number between 0.0 and 1.0. Here, 0.0 means fully transparent and 1.0 means no transparency.
要在 HTML 中指定 HSLA 颜色值，请在 style attribute 或 CSS 文件中使用 hsla() 函数。
To specify the HSLA color values in HTML, the hsla() function is used inside the style attribute or CSS file.
Example
在本例中，我们使用 hsla 颜色代码设置了背景色和文本颜色。
In this example, we have set background color and text color using hsla color code.
<!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>