HSV色空間とは : PEKO STEP

HSV色空間

HSV色空間とは？

HSVとは、色を「色相(Hue)」「彩度(Saturation)」「明度(Value・Brightness)」の3要素で表現する方式です。
また、HSVは「HSB色空間」とも呼ばれています。

HSVとHSLの違い

HSVと似た色の表現方法に、色相(Hue)・彩度(Saturation)・輝度(Lightness)の3要素で色を表現した「HSL色空間」があります。
ぱっと見よく似ていますが、彩度を低下させた時にHSVは赤緑青のうち最も強い色に収束していくのに対して、HSLは最も強い色と最も弱い色の中間に収束していくという明確な違いがあります。
両者を混同すると、まったく別の色になってしまったりするので注意してください。

■ [関連項目] HSL色空間とは

HSVの利点

色の表現方法としてよく使われているRGBは「原色の組み合わせ」で色を表現していますが、この方法だと各要素を変動させた場合に色がどう変化するかがイメージしにくく、細かな色の調整をしたい場合などには不向きです。
一方、HSVでは色を「鮮やかさ」「明るさ」といった直感的にわかりやすい方法で表現しているため、「この色を明るくしたい・暗くしたい」「色を薄くしたい・濃くしたい」といった感覚的な調整が簡単にできます。

HSVを構成する要素の解説

色相

色相とは、赤や緑といった具体的な色を定義する要素です。
色が環状に並んでいるため、0°～360°の範囲の値で表されることが多いです。

色相の値が何色になるかは下記のとおりです。


0° ←		→ 360°

色相		RGBで色を表現した場合
0°		R:255 G:0 B:0
0～60		R:255 B:0 で固定、Gが0から255へ増加していく
60°		R:255 G:255 B:0
60～120		G:255 B:0で固定、Rが255から0へ減少していく
120°		R:0 G:255 B:0
120～180		R:0 G:255で固定、Bが0から255へ増加していく
180°		R:0 G:255 B:255
180～240		R:0 B:255で固定、Gが255から0へ減少していく
240°		R:0 G:0 B:255
240～300		G:0 B:255で固定、Rが0から255へ増加していく
300°		R:255 G:0 B:255
300～360		R:255 G:0で固定、Bが255から0へ減少していく
360°		R:255 G:0 B:0

彩度

彩度とは、色相で定義された色の鮮やかさ・濃さを表す要素で、0%～100%の範囲で表されることが多いです。
100%が最も鮮やかで、彩度の減少に合わせて色が薄くなっていき、0%になると灰色になってしまいます。


0% ←		→ 100%

「鮮やか」とは赤緑青の成分の差が大きいということであり、彩度が低下するということは成分の差が縮まることであり、0%で赤緑青が同じ値になる(=灰色になる)ということです。

HSV色空間の場合、彩度が低下すると赤緑青のうち最も強い成分に向かって収束していきます。

明度

明度とは、色相で定義された色の明るさ・暗さを表す要素で、0%～100%の範囲で表されることが多いです。
100%が最も明るく、明度の減少に合わせて暗くなっていき、0%で真っ黒になります。


0% ←		→ 100%

明度は赤緑青のうち最も大きな値で定義され、彩度0%で収束する色の値となります。

HSV色空間の場合、赤緑青の成分のうちどれか1つが最大になった段階で明度100%となるため、赤色RGB(255,0,0)と白色RGB(255,255,255)は同じ明度100%となります。
そのため明度の調整だけでは赤色RGB(255,0,0)からさらに明るくすることができず、彩度の調整が必要になってしまいます。
この点を改良したのが「HSL色空間」です。

HSV色空間