Html 简明教程

HTML - HSL and HSLA Colors

HSL 颜色值使用三个参数、 hue (color type)saturation (color intensity)lightness (brightness) 定义颜色。HSLA 扩展了 HSL,添加了 alpha parameter ,它指定颜色的不透明度级别。

HSL Color Codes in HTML

  • HTML* 支持 HSL 颜色模型,它代表色相、饱和度和明度。它提供了一种灵活直观的方法来定义颜色。HSL 表示允许开发者指定色相、调整饱和度和控制明度,可提供更广泛的颜色选择。

  1. Hue: 它是在 0 到 360 之间的色轮度数,其中 0 为红色,120 为绿色,240 为蓝色。

  2. Saturation: 它是一个百分比值,表示颜色的强度或鲜艳程度,其中 0% 表示灰色阴影,100% 为完全颜色。

  3. Lightness: 这也是一个百分比值,表示颜色的明暗程度,其中 0% 为黑色,50% 非亮非暗,100% 为白色。

Example

这里有一个演示在 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 颜色表示进行设置。值如下:

  1. Hue (H): 120 度(绿色)

  2. Saturation (S): 50%

  3. Lightness (L): 50%

调整这些值以尝试不同的颜色。HSL 模型提供了一种更灵活的方法来使用颜色,使得更轻松地对网页上的元素的外观进行微调,并对其进行控制。

HSLA Colors in HTML

在 HTML 中, HSLA 代表色相、饱和度、明度和 alpha。它是 HSL 颜色代码的扩展,具有用于 transparency 的可选 alpha 参数。此 alpha 通道指定颜色的透明或不透明程度,介于 0.0 和 1.0 之间。此处, 0.0 表示完全透明,而 1.0 表示无透明度。

要在 HTML 中指定 HSLA 颜色值,请在 style attribute 或 CSS 文件中使用 hsla() 函数。

Example

在本例中,我们使用 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 Color Picker Tool

这是一个简单的 HSL 颜色选择器工具。您可以调整色相、饱和度和明度级别以选择您选择的颜色。