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（0度に等しい）を使用することもできます。
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（0度に等しい）を使用することもできます。
whiteness

必需です。混ぜ合わせる色の白度を定義します；0%は白度が無いことを示し、100%は完全な白度を示します。

none（0%に等しい）を使用することもできます。
blackness

必需です。混ぜ合わせる色の黒度を定義します；0%は黒度が無いことを示し、100%は完全な黒度を示します。

none（0%に等しい）を使用することもできます。
/ A

オプションです。色の透明度チャンネルの値を示します（0%（または 0）は完全に透明で、100%（または 100）は完全不透明です）。

none（透明度チャンネルを無効にする）を使用することもできます。

デフォルト値は 100% です。

技術的な詳細

バージョン： CSS Color Module レベル 4

ブラウザのサポート

テーブルの数字は、この関数を完全にサポートする最初のブラウザのバージョンを示しています。

クローム エッジ ファイアフォックス サファリ オペラ
hwb()
101 101 96 15 87
パラメータ内で数字とパーセンテージを混ぜ合わせる
121 121 122 サポート外 107

関連ページ

参考：CSS カラー

参考：CSS hsl() 関数

参考：CSS lab() 関数

参考：CSS lch() 関数

参考：CSS oklab() 函数

参考：CSS oklch() 函数