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

hwb()”関数CSS Color Level 4 で追加

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

hwb()”関数

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

HWBカラー・モデルのイメージ
HWBカラー・モデルのイメージ
色の例
HWB値 HWB値
  hwb(0deg,0%,0%)   hwb(180deg,0%,0%)
  hwb(12deg,0%,0%)   hwb(192deg,0%,0%)
  hwb(24deg,0%,0%)   hwb(204deg,0%,0%)
  hwb(36deg,0%,0%)   hwb(216deg,0%,0%)
  hwb(48deg,0%,0%)   hwb(228deg,0%,0%)
  hwb(60deg,0%,0%)   hwb(240deg,0%,0%)
  hwb(72deg,0%,0%)   hwb(252deg,0%,0%)
  hwb(84deg,0%,0%)   hwb(264deg,0%,0%)
  hwb(96deg,0%,0%)   hwb(276deg,0%,0%)
  hwb(108deg,0%,0%)   hwb(288deg,0%,0%)
  hwb(120deg,0%,0%)   hwb(300deg,0%,0%)
  hwb(132deg,0%,0%)   hwb(312deg,0%,0%)
  hwb(144deg,0%,0%)   hwb(324deg,0%,0%)
  hwb(156deg,0%,0%)   hwb(336deg,0%,0%)
  hwb(168deg,0%,0%)   hwb(348deg,0%,0%)

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%

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
hwb()
定義なし

定義なし

定義なし

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