CSS3

CSS関数

hwb()

[Edge]○。→●、mdn

色指定： HWB色。

HWB（Hue-Whiteness-Blackness の略称）は、色を指定する別の手法であり、HSL に類似するが、人にとって更に使い易いことが多い。それは、色を、基底となる色相を与える色と、その色に混合される白さ、黒さ度合いで述べる。

color-picker は、その直感性に因り HWB 色システムに基づくものが多い。

HWB 色は、sRGB 色に解決される。

これは、利用者が input type="color" を作動化したときに示される、あるブラウザにおける color-picker のスクリーンショット（一部分）である。外縁の環をクリックして 色相を選択し、white と black の相対量は、内縁の三角形をクリックして選択するようになっている。／仕様書より

<hue>

色相を指定し、hsl() と同じに解釈される。

<SPAN style="color:hwb(0 0% 0%);">■テスト</SPAN><BR>
<SPAN style="color:hwb(120deg 0% 0%);">■テスト</SPAN><BR>
<SPAN style="color:hwb(240deg 0% 0%);">■テスト</SPAN><BR>

<percentage> 2番目の引数 ○

白さ度合いを表す範囲 0% ～ 100% の百分率として、混合する white の量を指定する。

<SPAN style="color:hwb(0 30% 0%);">■テスト</SPAN><BR>
<SPAN style="color:hwb(0 50% 0%);">■テスト</SPAN><BR>
<SPAN style="color:hwb(0 90% 0%);">■テスト</SPAN><BR>

<percentage> 3番目の引数 ○

黒さ度合いを表す範囲 0% ～ 100% の百分率として、混合する black の量を指定する。範囲外の値は、無効ではないが、算出値の時点で、ここに定義される範囲に切り詰められる。その上で、この 2 つの引数の和が 100% より大きい場合、算出値の時点で、それらの引数は 2 つの和が 100% になるように同じ比で正規化される。

<SPAN style="color:hwb(0 0% 30%);">■テスト</SPAN><BR>
<SPAN style="color:hwb(0 0% 50%);">■テスト</SPAN><BR>
<SPAN style="color:hwb(0 0% 90%);">■テスト</SPAN><BR>

<alpha-value>

色の alpha チャンネルを指定し、rgb() 関数に対する 4 個目の引数と同じに解釈される。省略時の既定は 100% になる。

<SPAN style="color:hwb(0 0% 0%/100%); background-color:#ddd;">■テスト</SPAN><BR>
<SPAN style="color:hwb(0 0% 0%/50%); background-color:#ddd;">■テスト</SPAN><BR>
<SPAN style="color:hwb(0 0% 0%/30%); background-color:#ddd;">■テスト</SPAN><BR>

結果の色は、概念的には、［選ばれた色相を塗ってから、百分率で決定される相対量により white を塗って、black 塗った混合］と捉えることができる。white と black の和が（正規化後に）100% に等しいならば、無彩色 ― すなわち、gray の濃淡 ― を定義することになる。

HWB 色から sRGB 色への変換法

¶スクリプト例を省く

sRGB 色から HWB 色への変換法

¶スクリプト例を省く

HWB 色の例

→●¶

テスト