hwb()
hwb()
関数記法は、指定された色を色相、白色度、黒色度によって表現するものです。オプションのアルファ成分は、色の透明度を表します。
試してみましょう
構文
css
hwb(194 0% 0%) /* #00c3ff */
hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
値
メモ: HWB関数は、以前の色関数のように値を区切るのにカンマを使用しません。また、オプションのアルファ値を指定する場合は、その前にスラッシュ(/
)を使用する必要があります。
- 関数記法:
hwb(H W B[ / A])
-
H
(色相)は色相環の<angle>
で、deg
(角度)、rad
(ラジアン)、grad
、turn
の単位が CSS Color 仕様書で定められています。単位のない<number>
として書かれた場合、角度として解釈されることが CSS Color Level 3 仕様書で定められています。定義上は、 赤=0deg=360deg であり、他の色は 緑=120deg、青=240deg、などのように円周上に展開されています。<angle>
としては、暗黙的に折り返されるので、 -120deg=240deg、480deg=120deg、-1turn=1turn、などとなります。W
(白色度)は混合される白の量を、パーセント値で 0% (白色度なし)から 100% (白色度最大)で表します。B
(黒色度)は混合される黒の量を、パーセント値で 0% (黒色度なし)から 100% (黒色度最大)で表します。A
(アルファ)は<number>
で0
から1
の間、または<percentage>
で1
から100%
(完全に不透明)の間で、この色の透明度(またはアルファチャネル)を表します。
仕様書
Specification |
---|
CSS Color Module Level 4 # the-hwb-notation |
ブラウザーの互換性
BCD tables only load in the browser