CSS hwb() 函數
- 上一頁 CSS hue-rotate() 函數
- 下一頁 CSS hypot() 函數
- 返回上一層 CSS 函數參考手冊
定義和用法
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 hue-rotate() 函數
- 下一頁 CSS hypot() 函數
- 返回上一層 CSS 函數參考手冊