HWB color function

概要

hwb() は色相を角度（0-360deg）、白さと黒さをパーセンテージで指定する色関数。「この色にどれくらい白／黒を混ぜるか」という直感的な考え方ができるため、色の明暗調整が HSL より分かりやすい。ペインターの混色モデルに近い。

対応ブラウザ

基本構文

/* 基本構文: hwb(色相 白さ 黒さ / 透明度) */
.red {
  color: hwb(0 0% 0%);      /* 純粋な赤 */
}

.pastel-red {
  color: hwb(0 40% 0%);     /* 白を混ぜた赤 */
}

.dark-red {
  color: hwb(0 0% 40%);     /* 黒を混ぜた赤 */
}

.semi-transparent {
  color: hwb(200 20% 10% / 0.5);
}

実務での使いどころ

• 直感的な色の明暗調整

  白さと黒さのパーセンテージを変えるだけで、同じ色相のバリエーション（パステル、ダーク）を簡単に作成できる。

注意点

アクセシビリティ

• 色の指定方法に関わらず、テキストと背景のコントラスト比が WCAG 基準を満たしていることを確認する。

参考リンク

• MDN: hwb()
• Can I use: hwb()