CSS 函式 - hsl()

CSS 中的 hsl() 函式用於根據顏色的色相、飽和度和亮度分量來定義顏色，這些分量基於紅、綠、藍顏色通道。它允許您透過指定這三種原色的強度來指定顏色。

要新增顏色透明度，可以向 hsl() 函式傳遞一個可選的 alpha 分量。

使用單個公式，可以用 hsl() 定義互補色。如果顏色的色相角為 0，則其互補色的色相角為 180deg - 0。

傳統的函式 hsla() 是函式 hsl() 的別名，它們都接受相同的引數並以相同的方式執行。

可能的值

hsl() 函式的功能表示法為 hsl(H S L[ / A])。

H：可以包含以下格式之一，表示色相角
- 一個 <number>：0 到 255 之間的任何數字。
- 一個 <angle>：0deg 到 360deg 之間的任何值。
- 關鍵字 none
S：可以包含以下格式之一，表示飽和度
- 一個 <percentage>：0%（完全飽和）到 100%（完全不飽和）之間的任何值。
- 關鍵字 none
L：可以包含以下格式之一，表示亮度
- 一個 <percentage>：0%（完全黑色）、100%（完全白色）和 50%（正常）之間的任何值。
- 關鍵字 none
A：表示顏色的透明度。這是一個可選值。
- <alpha-value>：0 到 1 之間的任何數字，其中 1 對應於完全不透明，0 對應於完全透明。
- 關鍵字 none

由於函式表示法將其序列化為 sRGB，因此紅、綠、藍分量的值在序列化時會被四捨五入。

語法

hsl(60deg 25% 50%) | hsl(60deg, 25%, 50%) | hsl(60deg 25% 50% / 0.5)

CSS hsl() - 帶或不帶 alpha 值

以下是一個示例，顯示了 hsl() 函式的使用，其中所有三個值都帶有和不帶 alpha 值（數字值）傳遞。

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .color-hsl-nocomma{
      background-color: hsl(70deg 60% 80%);
   }
   .color-hsl-comma{
      background-color: hsl(20deg, 90%, 20%);
      color: white;
   }
   .color-hsl-alpha-number{
      background-color: hsla(20deg 80% 60% /1);
   }
   .color-hsl-alpha-percent{
      background-color: hsla(90deg 80% 60% /0.6);
   }
   </style>
</head>
<body>
   <div class="color-hsl-nocomma">hsl(70deg 60% 80%)</div>
   <div class="color-hsl-comma">hsl(20deg, 90%, 20%)</div>
   <div class="color-hsl-alpha-number">hsla(20deg 80% 60% /1)</div>
   <div class="color-hsl-alpha-percent">hsla(90deg 80% 60% /0.6)</div>
</body>
</html>

CSS hsl() - 使用“none”作為其中一個值

以下是一個示例，顯示了 hsl() 函式的使用，其中一個值為 none（色相、飽和度、亮度和 alpha 值）。

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .hsl-hue-none{
      background-color: hsl(none 60% 80%);
   }
   .hsl-sat-none{
      background-color: hsl(20deg, none, 20%);
   
   }
   .hsl-light-none{
      background-color: hsla(20deg 80% none /1);
      color: white;
   }
   .hsl-alpha-none{
      background-color: hsla(90deg 80% 60% /none);
   }
   </style>
</head>
<body>
   <div class="hsl-hue-none">hsl(none 60% 80%)</div>
   <div class="hsl-sat-none">hsl(20deg, none, 20%)</div>
   <div class="hsl-light-none">hsla(20deg 80% none /1)</div>
   <div class="hsl-alpha-none">hsla(90deg 80% 60% /none)</div>
</body>
</html>

CSS hsl() - 使用 conic-gradient()

以下是一個示例，顯示了 hsl() 函式在 conic-gradient() 函式中的用法。

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .hsl-conic{
      background: conic-gradient(hsl(270 100% 50%),
      hsl(180 100% 50%),
      hsl(0 100% 50%),
      hsl(90 100% 50%));
   }
   </style>
</head>
<body>
   <p>hsl() with conic-gradient()</p>
   <div class="hsl-conic"></div>
</body>
</html>

列印頁面