CSS 函式 - hwb()

CSS 中的hwb()函式用於根據顏色的色相 (hue)、白度 (whiteness)和黑度 (blackness)分量來定義顏色。它允許您透過指定這三種原色的強度來指定顏色。

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

可能的值

hwb()函式的函式表示法為hwb(H W B[ / A])。

H：可以包含以下格式之一，表示色相角度
- 一個<number>：0 到 255 之間的任何數字。
- 一個<angle>：0deg 到 360deg 之間的任何值。
- 關鍵字none
W：可以包含以下格式之一，表示白度
- 一個<percentage>：指定要混合的白色量。可以是 0%（無白度）到 100%（全白度）之間的任何值。
- 關鍵字none
B：可以包含以下格式之一，表示黑度
- 一個<percentage>：指定要混合的黑色量。可以是 0%（無黑度）到 100%（全黑度）之間的任何值。
- 關鍵字none
A：表示顏色的透明度。這是一個可選值。
- <alpha-value>：0 到 1 之間的任何數字，其中 1 表示完全不透明，0 表示完全透明。
- 關鍵字none

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

語法

hwb(154 25% 50%) | hwb(154deg, 25%, 50%) | hwb(154 25% 50% / 0.5)

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

以下示例演示了在 conic-gradient() 函式中使用 hwb() 函式。

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

CSS hwb() - 帶或不帶 alpha 值

以下示例演示了使用 hwb() 函式的情況，其中所有三個值都帶或不帶 alpha 值（數值）。

<html>
<head>
<style>
      div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .color-hwb-1{
      background-color: hwb(70deg 60% 80%);
   }
   .color-hwb-2{
      background-color: hwb(80 20% 20%);
   }
   .color-hwb-alpha-number{
      background-color: hwb(0 30% 10% / 0.7);
   }
   .color-hwb-alpha-percent{
      background-color: hwb(194 0% 0% / 100%);
   }
   </style>
</head>
<body>
   <div class="color-hwb-1">hwb(70deg 60% 80%)</div>
   <div class="color-hwb-2">hwb(80 ,20%, 20%)</div>
   <div class="color-hwb-alpha-number">hwb(0 30% 10% / 0.7)</div>
   <div class="color-hwb-alpha-percent">hwb(194 0% 0% / 100%)</div>
</body>
</html>

列印頁面