0

エンコード結果

HWB カラー

HWBカラーについて

HWBカラーは、色相 (Hue)、白色度 (Whiteness)、黒色度 (Blackness) の3つの成分で色を表すカラーモデルです。色相で基本となる色味を指定し、そこに白と黒をどれだけ混ぜるかを指定するため、色を薄くする、暗くする、グレーに近づけるといった調整を直感的に行いやすい表現です。

成分意味値の例
H: 色相 (Hue)色味を角度で表します。赤は 0deg、緑は 120deg、青は 240deg 付近です。90deg
W: 白色度 (Whiteness)色に混ぜる白の量を表します。値が大きいほど白っぽくなります。20%
B: 黒色度 (Blackness)色に混ぜる黒の量を表します。値が大きいほど黒っぽくなります。30%

例えば、赤などの主要な色は以下のように表せます。

色HWB表記RGB表記
赤hwb(0deg 0% 0%)rgb(255 0 0)
緑hwb(120deg 0% 49.8%)rgb(0 128 0)
ライムhwb(120deg 0% 0%)rgb(0 255 0)
青hwb(240deg 0% 0%)rgb(0 0 255)
白hwb(0deg 100% 0%)rgb(255 255 255)
黒hwb(0deg 0% 100%)rgb(0 0 0)

透明度を含める場合は、アルファ値を追加します。例えば、半透明の赤は hwb(0deg 0% 0% / 0.5) のように表せます。

色相・白色度・黒色度の扱い

色相は角度として扱い、360deg を超える値や負の値は 0deg から 360deg の範囲に正規化します。例えば、hwb(360deg 0% 0%) は hwb(0deg 0% 0%)、hwb(-120deg 0% 0%) は hwb(240deg 0% 0%) と同じ色として扱います。

白色度と黒色度は 0% から 100% の範囲で扱います。白色度が大きいほど白に近づき、黒色度が大きいほど黒に近づきます。白色度と黒色度の合計が 100% 以上の場合は、色相に関係なくグレー系の色として扱います。

HWBとHSLの違い

HSLは彩度と明度で色を調整する表現で、色の鮮やかさや明るさを指定するのに向いています。一方、HWBは白と黒を混ぜる量で色を調整するため、「同じ色相のまま白っぽくする」「黒を足して暗くする」といった操作を説明しやすい表現です。

ただし、HWBも人間の知覚に完全に均等なカラースペースではありません。見た目の明るさや色差をより扱いやすくしたい場合は、Lab、LCH、Oklab、Oklchなどのカラースペースを使うことがあります。