hwb()

試一試

background: hwb(12 50% 0%);

background: hwb(50deg 30% 40%);

background: hwb(0.5turn 10% 0% / 0.5);

background: hwb(0 100% 0% / 50%);

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

語法

/* Absolute values */
hwb(194 0% 0%)
hwb(194 0% 0% / .5)

/* Relative values */
hwb(from green h w b / 0.5)
hwb(from #123456 h calc(w + 30) b)
hwb(from lch(40% 70 240deg) h w calc(b - 30))

描述

在 sRGB 色彩空間中，這個顏色函式由一個 <hue> 角度值、一個白度值、一個黑度值，以及一個可選的表示顏色透明度的 Alpha 值定義。

特定色相所對應的角度在 sRGB（被 hsl() 和 hwb() 使用）、CIELAB（被 lch() 使用）和 Oklab（被 oklch() 使用）色彩空間中是不同的。hwb() 與 hsl() 處於相同的色彩空間，因此具有相同的色相角度。更多細節和示例請參閱 <hue> 參考頁面，或者嘗試在顏色選擇器上改變色相來觀察實際效果。

當一個 hwb() 顏色的白度（W）和黑度（B）值都為 0 時，它是完全飽和的。對於任意色相值 H，hwb(H 0% 0%) 與 hsl(H 100% 50%) 是相同的顏色。增加白度值會使顏色變亮。增加黑度值會使顏色變暗。

當黑度和白度都大於 0 時，顏色會變得柔和，趨向於灰色。當白度和黑度的總和等於或大於 100% 時——換句話說，如果 W + B >= 100%，該顏色函式會定義一種灰色。當兩個值的總和大於 100% 時（W + B > 100%），灰色顏色的白度和黑度值會被有效地歸一化為 W / (W + B) 和 B / (W + B)。

值

下面描述了絕對顏色和相對顏色的允許值。

絕對值語法

hwb(H W B[ / A])

引數如下：

H

一個 <number>、一個 <angle> 或關鍵字 none（在此情況下等同於 0deg），表示顏色的<hue>（色相）角度。

W

一個表示顏色白度的 <percentage>，或關鍵字 none（在此情況下等同於 0%），用於混入。0% 表示沒有白度。如果 B 是 0，100% 表示完全的白度，否則 W 和 B 的值都會被歸一化。

B

一個表示顏色黑度的 <percentage>，或關鍵字 none（在此情況下等同於 0%），用於混入。0% 表示沒有黑度。如果 W 是 0，100% 表示完全的黑度，否則 W 和 B 的值都會被歸一化。

A 可選

一個 <alpha-value>，表示顏色的 alpha 通道值，其中數字 0 對應 0%（完全透明），1 對應 100%（完全不透明）。此外，關鍵字 none 可用於明確指定無 alpha 通道。如果未明確指定 A 通道值，則預設為 100%。如果包含該值，則其前面需要有一個斜槓（/）。

相對值語法

hwb(from <color> H W B[ / A])

引數如下：

from <color>

在定義相對顏色時，總是包含關鍵字 from，其後跟著一個 <color> 值，表示源顏色。這是相對顏色所基於的原始顏色。源顏色可以是任何有效的 <color> 語法，包括另一個相對顏色。

H

一個 <number>、一個 <angle> 或關鍵字 none（在此情況下等同於 0deg），表示輸出顏色的 <hue> 角度。

W

一個表示顏色白度的 <percentage>，或關鍵字 none（在此情況下等同於 0%），用於混入。0% 表示沒有白度。如果 B 是 0，100% 表示完全的白度，否則 W 和 B 的值都會被歸一化。

B

一個表示顏色黑度的 <percentage>，或關鍵字 none（在此情況下等同於 0%），用於混入。0% 表示沒有黑度。如果 W 是 0，100% 表示完全的黑度，否則 W 和 B 的值都會被歸一化。

A 可選

一個 <alpha-value>，表示輸出顏色的 alpha 通道值，其中數字 0 對應 0%（完全透明），1 對應 100%（完全不透明）。此外，關鍵字 none 可用於明確指定無 alpha 通道。如果未明確指定 A 通道值，則預設為源顏色的 alpha 通道值。如果包含該值，則其前面需要有一個斜槓（/）。

定義相對顏色輸出通道分量

在 hwb() 函式內部使用相對顏色語法時，瀏覽器會將源顏色轉換為等效的 HWB 顏色（如果尚未指定為 HWB）。該顏色被定義為三個不同的顏色通道值——h（色相）、w（白色）和 b（黑色）——外加一個 Alpha 通道值（alpha）。這些通道值在函式內部可用，用於定義輸出顏色的通道值。

• h 通道值解析為一個介於 0 和 360（含）之間的 <number>。
• w 和 b 通道各自解析為一個介於 0 和 100 之間（包含 0 和 100）的 <number>。
• alpha 通道值解析為一個介於 0 和 1（含）之間的 <number>。

在定義相對顏色時，輸出顏色的不同通道可以用幾種不同的方式表示。下面，我們將透過一些示例來說明這些方式。

在下面的前兩個示例中，我們使用了相對顏色語法。然而，第一個示例輸出與源顏色相同的顏色，而第二個示例輸出的顏色完全不基於源顏色。它們並沒有真正建立相對顏色！你不太可能在實際的程式碼庫中使用它們，而可能會直接使用絕對顏色值。我們包含這些示例是為了作為學習相對 hwb() 語法的起點。

讓我們從源顏色 hsl(0 100% 50%)（等同於 hwb(0 0% 0%)）開始。下面的函式輸出與源顏色相同的顏色——它使用源顏色的 h、w 和 b 通道值（分別為 0、0% 和 0%）作為輸出通道值。

hwb(from hsl(0 100% 50%) h w b)

此函式的輸出顏色是 hwb(0 0% 0%) 的 sRGB color() 等效值：color(srgb 1 0 0)。

下一個函式對輸出顏色的通道值使用絕對值，輸出了一個完全不同於源顏色的新顏色：

hwb(from hsl(0 100% 50%) 240 52% 12%)

在上述情況中，輸出顏色是 hwb(240 52% 12%) 的 sRGB color() 等效值：color(srgb 0.52 0.52 0.88)。

以下函式建立了一個基於源顏色的相對顏色：

hwb(from hsl(0 100% 50%) h 30% b)

此示例：

• 將源顏色（hsl(0 100% 50%)）轉換為 hwb() 等效值（hwb(0 0% 0%)）。
• 將輸出顏色的 H 和 B 通道值設定為源顏色 hwb() 等效值的 H 和 B 通道值——這些值分別為 0 和 0%。
• 將輸出顏色的 W 通道值設定為一個不基於源顏色的新值：30%。

最終的輸出顏色是在 sRGB 色彩空間中等同於 hwb(0 30% 0%) 的顏色——color(srgb 1 0.3 0.3)。

在本節我們目前看到的示例中，源顏色和輸出顏色的 alpha 通道都沒有被明確指定。當未指定輸出顏色的 alpha 通道時，它預設為與源顏色 alpha 通道相同的值。當未指定源顏色的 alpha 通道時（且它不是相對顏色），它預設為 1。因此，上述示例中的源和輸出 alpha 通道值均為 1。

讓我們看一些指定源和輸出 alpha 通道值的示例。第一個示例將輸出 alpha 通道值指定為與源 alpha 通道值相同，而第二個示例則指定一個與源 alpha 通道值無關的不同輸出 alpha 通道值。

hwb(from hsl(0 100% 50% / 0.8) h w b / alpha)
/* Computed output color: color(srgb 1 0 0 / 0.8) */

hwb(from hsl(0 100% 50% / 0.8) h w b / 0.5)
/* Computed output color: color(srgb 1 0 0 / 0.5) */

在下面的示例中，hsl() 源顏色再次被轉換為 hwb() 表示——hwb(0 0% 0%)。calc() 計算被應用於 H、W、B 和 A 值，最終的輸出顏色是在 sRGB 色彩空間中等同於 hwb(120 25% 10% / 0.9 的顏色：color(srgb 0.25 0.9 0.25 / 0.9)。

hwb(from hsl(0 100% 50%) calc(h + 120) calc(w + 25) calc(b + 10) / calc(alpha - 0.1))

正式語法

<hwb()> = 
  hwb( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<hue> = 
  <number>  |
  <angle>   

<alpha-value> = 
  <number>      |
  <percentage>  

示例

使用 hwb() 的相對顏色

此示例為三個 <div> 元素設定了不同的背景顏色。中間的元素使用了未經修改的 --base-color，而左右兩邊的元素則使用了該 --base-color 的提亮和變暗版本。

這些變體是使用相對顏色定義的——--base-color 自定義屬性被傳入一個 hwb() 函式，然後透過 calc() 函式修改輸出顏色的白色和黑色通道以達到預期效果。亮色變體在白色通道上增加了 30%，而暗色變體在黑色通道上增加了 30%。

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

:root {
  --base-color: orange;
}

/* As per the spec, w and b values should resolve to a number between 0-100
   However, Chrome 121+ incorrectly resolves them to numbers between 0-1
   hence currently using calculations like w + 0.3 instead of w + 30 */

#one {
  background-color: hwb(from var(--base-color) h calc(w + 0.3) b);
}

#two {
  background-color: var(--base-color);
}

#three {
  background-color: hwb(from var(--base-color) h w calc(b + 0.3));
}

/* Use @supports to add in support for old syntax that requires % units to
   be specified in w and b calculations. This is required for Safari 16.4+. */
@supports (color: hwb(from red h w calc(b + 30%))) {
  #one {
    background-color: hwb(from var(--base-color) h calc(w + 30%) b);
  }

  #three {
    background-color: hwb(from var(--base-color) h w calc(b + 30%));
  }
}

結果

輸出如下：

規範

瀏覽器相容性

另見

• <color>：檢視所有顏色表示法的列表
• 顏色格式轉換工具
• 使用相對顏色
• CSS 顏色模組
• <hue>：表示顏色色相角度的資料型別