HWB color function
hwb() 関数記法は、指定された色を色相、白色度、黒色度による sRGB 色によって表現します。オプションのアルファ成分は、その色の透明度を表します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 101 | 101 | 96 | 15 | 101 | 15 | |
| CSS タイプ | ||||||
hwb.mixed type parameters パラメータに `<percentage>` と `<number>` を混在させます | 121 | 121 | 122 | 18 | 121 | 18 |
基本構文
CSS
/* Basic syntax: hwb(hue white black / opacity) */
.red {
color: hwb(0 0% 0%); /* Pure red */
}
.pastel-red {
color: hwb(0 40% 0%); /* Red mixed with white */
}
.dark-red {
color: hwb(0 0% 40%); /* Red mixed with black */
}
.semi-transparent {
color: hwb(200 20% 10% / 0.5);
}ライブデモ
実務での使いどころ
-
直感的な色の明暗調整
白さと黒さのパーセンテージを変えるだけで、同じ色相のバリエーション（パステル、ダーク）を簡単に作成できる。
注意点
- 白さと黒さの合計が 100% を超えると灰色になる。意図した結果にならないことがある。
- デザインツールでの HWB サポートはまだ限定的で、他形式との変換が必要になる場合がある。
アクセシビリティ
- 色の指定方法に関わらず、テキストと背景のコントラスト比が WCAG 基準を満たしていることを確認する。