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 顏色表示法設定 **.hsl-color-box** 類的 background-color 屬性。值如下：

色相 (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>

HSL 顏色選擇器工具

這是一個簡單的 HSL 顏色選擇器工具。您可以調整色相、飽和度和亮度級別來選擇您選擇的顏色。

列印頁面