hwb()

試してみましょう

background: hwb(12 50% 0%);

background: hwb(50deg 30% 40%);

background: hwb(0.5turn 10% 0% / 0.5);

background: hwb(0 100% 0% / 50%);

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

構文

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% （完全に不透明）に対応します。

形式文法

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

<hue> = 
  <number>  |
  <angle>   

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

仕様書

ブラウザーの互換性

関連情報

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