hwb()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2022.

* Some parts of this feature may have varying levels of support.

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>: 色の色相角を表すデータ型