“hwb()”関数

“hwb()”関数

“hwb()”関数はHWBカラー・モデルの色相(“Hue”)、白色度(“Whiteness”)、黒色度(“Blackness”)の成分で色を指定するための関数です。“<color>”値として使用することができます。

“hwb()”関数の構文

色相、白色度、黒色度、アルファ値を表す3個、もしくは4個の引数を順番に記述します。

アルファ値を含まない色
hwb(〚色相〛 〚白色度〛 〚黒色度〛)

アルファ値を含む色
hwb(〚色相〛 〚白色度〛 〚黒色度〛/〚アルファ値〛)


最初の3個の引数はホワイトスペースで区切って記述します。

1個目の引数は色相を表し、“<hue>”値で指定します。“0deg”が赤色、“120deg”が緑色、“240deg”が青色に対応します。

2個目の引数は白色度を表し、“<percentage>”値で指定します。“0%”が純色、“100%”が白色になります。

3個目の引数は黒色度を表し、“<percentage>”値で指定します。“0%”が純色、“100%”が黒色になります。

白色度と黒色度の合計が“100%”を超える場合、白色度と黒色度の比率が同じまま合計値が“100%”になるように減じた引数が使用されます。

4個目の引数は任意で、色の透明度を示すアルファ値を表します。“<percentage>”値、もしくは“<number>”値で指定でき、スラッシュ(“/”)に続いて記述します。

“<percentage>”値で引数を指定する場合

“0%”は完全な透明、“100%”は不透明を表します。

“<number>”値で引数を指定する場合

“0”は完全な透明、不透明は“1”で表されます。

アルファ値を指定する引数を省略した場合は“100%”として扱われます。

使用例

色を指定する

.banana { background-color: hwb(50deg 0% 0%);}
.apple { background-color: hwb(348deg 8% 14%);}
.peach { background-color: hwb(28deg 72% 0%);}
.kiwi { background-color: hwb(60deg 0% 50%);}
.mangosteen { background-color: hwb(340deg 43% 15%);}
.melon { background-color: hwb(120deg 60% 2%);}
.orange { background-color: hwb(38deg 0% 0%);}
.grape { background-color: hwb(248deg 24% 46%);}
.durian { background-color: hwb(54deg 67% 7%);}


バナナ	リンゴ	モモ
キウイ	マンゴスチン	メロン
オレンジ	ブドウ	ドリアン

アルファ値を含む色

.purple-100p { background-color: hwb(319deg 43% 23%/100%);}
.purple-90p { background-color: hwb(319deg 43% 23%/90%);}
.purple-80p { background-color: hwb(319deg 43% 23%/80%);}
.purple-70p { background-color: hwb(319deg 43% 23%/70%);}
.purple-60p { background-color: hwb(319deg 43% 23%/60%);}
.purple-50p { background-color: hwb(319deg 43% 23%/50%);}
.purple-40p { background-color: hwb(319deg 43% 23%/40%);}
.purple-30p { background-color: hwb(319deg 43% 23%/30%);}
.purple-20p { background-color: hwb(319deg 43% 23%/20%);}
.purple-10p { background-color: hwb(319deg 43% 23%/10%);}
.purple-0p { background-color: hwb(319deg 43% 23%/0%);}


100%	90%	80%
70%	60%	50%
40%	30%	20%
10%	0%

仕様書

定義されている仕様書

hwb()