CSS hwb() 函數

定義和用法

CSS 的 hwb() 函數使用色調-白度-黑度模型(HWB)指定顏色。還可以添加一個可選的透明度通道(表示顏色的透明度)。

實例

定義不同的 HWB(A) 顏色:

#p1 {background-color:hwb(60 40% 20% / 0.5);}
#p2 {background-color:hwb(120 40% 20%);}
#p3 {background-color:hwb(120 40% 20% / 20%);}
#p4 {background-color:hwb(240 40% 20%);}
#p5 {background-color:hwb(240 50% 10%);}
#p6 {background-color:hwb(240 40% 20% / 0.3);}
#p7 {background-color:hwb(300 40% 20% / 0.5);}
#p8 {background-color:hwb(360 40% 20%);}
#p9 {background-color:hwb(360 90% 0%);}

親自試一試

CSS 語法

絕對值語法

hwb(hue whiteness blackness / A)
描述
hue

必需。定義色輪上的角度(0 到 360)——0(或 360)是紅色,120 是綠色,240 是藍色。

也可以使用 none(等同于 0deg)。

whiteness

必需。定義混合的白度;0% 表示無白度,100% 表示完全白度。

也可以使用 none(等同于 0%)。

blackness

必需。定義混合的黑度;0% 表示無黑度,100% 表示完全黑度。

也可以使用 none(等同于 0%)。

/ A

可選。表示顏色的透明度通道值(0%(或 0)表示完全透明,100%(或 100)表示完全不透明)。

也可以使用 none(表示無透明度通道)。

默認值為 100%。

相對值語法

hwb(from color whiteness blackness / A)
描述
from color

以關鍵字 from 開頭,后跟表示原始顏色的顏色值。

這是相對顏色所基于的原始顏色。

hue

必需。定義色輪上的角度(0 到 360)——0(或 360)是紅色,120 是綠色,240 是藍色。

也可以使用 none(等同于 0deg)。

whiteness

必需。定義混合的白度;0% 表示無白度,100% 表示完全白度。

也可以使用 none(等同于 0%)。

blackness

必需。定義混合的黑度;0% 表示無黑度,100% 表示完全黑度。

也可以使用 none(等同于 0%)。

/ A

可選。表示顏色的透明度通道值(0%(或 0)表示完全透明,100%(或 100)表示完全不透明)。

也可以使用 none(表示無透明度通道)。

默認值為 100%。

技術細節

版本: CSS Color Module Level 4

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

Chrome Edge Firefox Safari Opera
hwb()
101 101 96 15 87
在參數中混合數字和百分比
121 121 122 不支持 107

相關頁面

參考:CSS 顏色

參考:CSS hsl() 函數

參考:CSS lab() 函數

參考:CSS lch() 函數

參考:CSS oklab() 函數

參考:CSS oklch() 函數