HWB

「Hue, Whiteness, Blackness」を表します。

HWBは、3つの属性の組み合わせを使って色を定義するカラーモデルです。グラフィックデザイナーやWebデザイナーは、色相環上の位置を指定し、そこにさまざまな量の白または黒を加えることで、色の明るさや彩度を調整できます。HSBモデルやHSLモデルと同様に、個々のRGB値を変更するよりも直感的に色を調整できます。

HWBモデルでは、次の3つの属性で各色を定義します。

• Hueは、色相環上での基本色の角度位置を表し、0°から359°までの数値で指定します。純粋な赤は色相環の最上部にある0°で、その後に60°の黄色、緑、シアン、青、マゼンタと続き、赤に戻ります。
• Whitenessは、色相環上の純粋な色相にどれだけ白を混ぜるかを表し、0～100%の割合で指定します。白色度が0%の場合は完全に彩度の高い色になり、白色度が100%の場合は彩度が完全に失われ、白く見えます。
• Blacknessは、純粋な色相にどれだけ黒を混ぜるかを表し、こちらも割合で指定します。白色度と同様に、黒色度が0%の場合は完全に彩度の高い色になり、黒色度が100%の場合は黒く見えます。

3つのHWB属性を混ぜる仕組みは、絵の具を混ぜる場合とよく似ています。まず色相環上の任意の位置から純粋な基本色を選び、そこに白または黒を混ぜて明るさを調整します。白と黒の両方を加えると色の彩度が下がり、灰色に近づきます。白と黒の合計量が100%を超える場合、値は合計が100%になるように正規化され、白と黒の同じ比率を使って灰色の濃淡が作られます。たとえば、白と黒の値がそれぞれ50%、75%、100%のHWB色は、すべて同じ濃さの灰色になります。

Webデザイナーは、CSS内でHWBを使って色を指定できます。HWBの数値を簡単に調整することで、基本色を変更したり、Webサイトの色を明るくしたり、暗くしたり、彩度を下げたりできます。たとえば、WebデザイナーがCSSコードhwb(180, 25%, 0%)を使った色から始める場合、W属性を増やすと明るくでき、Wを減らすと暗くでき、B属性を増やすと彩度を下げられます。HWBは2014年に初めてCSS仕様の色の指定方法として追加されましたが、ほとんどの主要なWebブラウザーが完全に対応するようになったのは2022年になってからです。

NOTE: HWBで表せる色の範囲は、属性の組み合わせが異なるだけでRGBと同じです。デジタル画像には、今でもRGB値を使って保存された色情報が含まれており、色の値はソフトウェアを使って簡単にRGBまたは(16進数）に変換できます。