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(ラジアン)、gradturn の単位が 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