hwb()

Baseline 2022

Newly available

Since April 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

hwb() 関数記法は、指定された色を色相、白色度、黒色度による sRGB 色によって表現します。オプションのアルファ成分は、その色の透明度を表します。

試してみましょう

構文

css
hwb(194 0% 0%) /* #00c3ff */
hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */

値

  • 関数記法: hwb(H W B[ / A])
  • H
    • : 色相角を表す <number> または <angle>、またはキーワード none。この型の詳細は <hue> のリファレンスにあります。
  • W, B
    • : <percentage> またはキーワード none であり、それぞれ白色度と黒色度を表します。これらは白と黒が混合される量を、 0% （白色度または黒色度なし）から 100% （白色度または黒色度が最高）で指定します。 W + B = 100% グレーの濃淡を定義します。 W + B > 100% である場合、 W および B はそれぞれ W / (W + B) および B / (W + B) で正規化されます。
  • A 省略可
    • : <alpha-value> またはキーワード none です。 1 は 100% （完全に不透明）に対応します。

メモ: この関数記法は sRGB 値に直列化され、赤、緑、青の成分の値は直列化の際に丸められる可能性があります。

メモ: none の効果については色成分の欠落を参照してください。

形式文法

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<hue> = 
  <number>  |
  <angle>   

<alpha-value> = 
  <number>      |
  <percentage>

仕様書

Specification
CSS Color Module Level 5
# relative-HWB
CSS Color Module Level 4
# the-hwb-notation

ブラウザーの互換性

BCD tables only load in the browser

関連情報

  • <color>: すべての色記法の一覧
  • <hue>: 色の色相角を表すデータ型