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 です。 1100% (完全に不透明)に対応します。

メモ: この関数記法は 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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
hwb() (HWB color model)
Mix <percentage> and <number> in parameters
Relative HWB colors

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

関連情報

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