このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

hwb()”関数CSS3で追加

記事Mar. 3rd,2021
HWB値で色を表すCSSの関数、“hwb()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

hwb()”関数

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

HWB色空間のイメージ
HWB色空間のイメージ

1個目の引数は色相を表し、<angle>”値、もしくは<number>”値が使用できます。HWB空間の色相は通常角度で表されるため、<number>”値はそのまま度数を表す数値として解釈されます(“360”は“360deg”と同じ)。

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

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

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

赤色
hwb(0deg 0% 0%)
hwb(0 0% 0%)
緑色
hwb(120deg 0% 0%)
hwb(120 0% 0%)
青色
hwb(240deg 0% 0%)
hwb(240 0% 0%)

4個目の引数は任意で、色の透過度を示すアルファ値を指定することができます。アルファ値は<percentage>”値、もしくは<number>”値で指定できます。

<percentage>”値で引数を指定する場合
0%”は完全な透明、“100%”は不透明を表します。
<number>”値で引数を指定する場合
0”は完全な透明、不透明は“1”で表されます。

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

不透明
hwb(0deg 0% 0% 100%)
hwb(0deg 0% 0% 1)
hwb(0 0% 0% 100%)
hwb(0 0% 0% 1)
半透明
hwb(0deg 0% 0% 50%)
hwb(0deg 0% 0% 0.5)
hwb(0 0% 0% 50%)
hwb(0 0% 0% 0.5)
透明
hwb(0deg 0% 0% 0%)
hwb(0deg 0% 0% 0)
hwb(0 0% 0% 0%)
hwb(0 0% 0% 0)

引数は半角スペース(“ ”)で区切って記述します。

使用例

色を指定する

.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%);}
<table>
<tr>
<td class="banana">バナナ</td>
<td class="apple">リンゴ</td>
<td class="peach">モモ</td>
</tr>
<tr>
<td class="kiwi">キウイ</td>
<td class="mangosteen">マンゴスチン</td>
<td class="melon">メロン</td>
</tr>
<tr>
<td class="orange">オレンジ</td>
<td class="grape">ブドウ</td>
<td class="durian">ドリアン</td>
</tr>
</table>
バナナ リンゴ モモ
キウイ マンゴスチン メロン
オレンジ ブドウ ドリアン

アルファ値を含む色

.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%);}
<table>
<tr>
<td class="purple-100p">100%</td>
<td class="purple-90p">90%</td>
<td class="purple-80p">80%</td>
</tr>
<tr>
<td class="purple-70p">70%</td>
<td class="purple-60p">60%</td>
<td class="purple-50p">50%</td>
</tr>
<tr>
<td class="purple-40p">40%</td>
<td class="purple-30p">30%</td>
<td class="purple-20p">20%</td>
</tr>
<tr>
<td class="purple-10p">10%</td>
<td class="purple-0p">0%</td>
</tr>
</table>
100% 90% 80%
70% 60% 50%
40% 30% 20%
10% 0%

仕様書

Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
hwb()
定義なし

定義なし

定義なし

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク