HSV・HSBとは？色相・彩度・明るさで色を表す仕組み

HSVとは、色をHue（色相）・Saturation（彩度）・Value（明るさ）の3要素で表す色モデルです。HSBと呼ばれる場合は、最後のBがBrightness（明るさ）を表し、一般にはHSVとほぼ同じ考え方として扱われます。

RGBが赤・緑・青の光の強さで色を表すのに対し、HSVは「何色か」「どのくらい鮮やかか」「どのくらい明るいか」という、人が色を調整するときに理解しやすい方向へ組み替えた表現です。

HSVとは？

HSVは次の3つの要素で色を表します。

• H = Hue：色相。赤・黄・緑・青など「何色か」を表す
• S = Saturation：彩度。色の鮮やかさを表す
• V = Value：明るさ。色の明るさの度合いを表す

HSBではVの代わりにB（Brightness）が使われます。ソフトウェアによって名称や数値範囲が異なる場合があるので、データをやり取りするときは仕様確認が必要です。

H（色相）の意味

Hは色相を表します。一般的には色相環を角度で表し、0°付近が赤、120°付近が緑、240°付近が青のように、角度を回すことで色みが変化します。

色相そのものについては色相とは？で詳しく解説しています。

S（彩度）の意味

Sは彩度です。値が高いほど鮮やかになり、低くすると色みが弱くなって灰色に近づきます。

ただし「彩度」の定義や数値の意味は色空間によって同一ではありません。MDNも、RGB・HSL・HSVなど作業する色空間によって彩度の扱いが異なるため、使用している色空間を把握することが重要だと説明しています。

彩度の基本は彩度とは？でも確認できます。

V（Value）・B（Brightness）の意味

VまたはBは、HSV・HSBにおける明るさの軸です。値を下げると黒へ近づき、上げるとその色が持つ最大の明るさ側へ近づきます。

ここで注意したいのは、HSVのVとHSLのL（Lightness）は同じ計算ではないことです。同じRGB色を変換しても、HSVのVとHSLのLは異なる値になることがあります。

HSVとHSBの違い

HSVのVはValue、HSBのBはBrightnessの略です。多くのソフトウェアでは、HSVとHSBを同じモデルとして扱い、名称だけが異なるケースがあります。

ただし、ソフトウェアごとに数値範囲や内部実装が異なる場合があるため、「HSBだから必ず同じ数値になる」と決めつけず、仕様を確認するのが安全です。

HSVとRGBの違い

RGBは赤・緑・青の3成分で色を作るモデルです。ディスプレイ表示や画像データでは非常に重要ですが、人が「もう少し鮮やかに」「色みはそのまま暗く」と調整するときには、3成分を同時に考える必要があります。

HSVなら、色相Hを固定してSやVを動かせるため、色選択UIや画像処理で直感的に扱いやすい場面があります。

HSVとHSLの違い

HSVとHSLはどちらもH（色相）とS（彩度）を持ちますが、3つ目の軸が異なります。

• HSV：H・S・V（Value）
• HSL：H・S・L（Lightness）

HSLではL=0%が黒、L=100%が白、L=50%付近が純色側になる構造です。一方HSVではVを最大にした状態でも、Sの値によって白から純色まで変化します。

ソフトによってHSVの数値範囲が違う

HSVは必ずH=0〜360、S/V=0〜100だけで保存されるとは限りません。たとえばOpenCVの8bit HSVでは、通常Hは0〜179、SとVは0〜255として扱われます。OpenCV自身も、他のソフトウェアと比較するときは数値範囲を正規化する必要があると説明しています。

つまり「HSV(120, 50, 50)」のような数値だけを見ても、どのスケールを使っているか分からなければ正確な色を確定できない場合があります。

HSVはどんな場面で使われる？

• カラーピッカー：色相・彩度・明るさを直感的に調整する
• 画像編集：色相を変える、彩度を上げる、明るさを調整する
• 画像処理：特定の色相範囲を抽出する
• コンピュータービジョン：RGB/BGRより色の範囲を指定しやすい場合がある

OpenCVの公式チュートリアルでも、BGR画像をHSVへ変換し、特定の青色範囲を抽出する例が紹介されています。

色しるべでHSVに近い感覚を理解する

HSVの数値を覚えなくても、「色相・鮮やかさ・明るさ」を分けて見る考え方は色選びに役立ちます。色検索で色系統やトーンを変えたり、カラーコード変換でHEX・RGB・HSLなどを見比べたりすると、色モデルの違いを理解しやすくなります。

まとめ｜HSVは色を「色相・彩度・明るさ」で扱うモデル

HSVは、RGBの色を人が調整しやすい形に整理した色モデルです。Hで色み、Sで鮮やかさ、Vで明るさを扱えるため、カラーピッカーや画像処理で広く使われています。

ただし、ソフトウェアによって数値範囲が異なる点や、HSLのLightnessとは同じ意味ではない点には注意が必要です。

主な参考資料

• MDN「色と輝度を理解する」
• OpenCV「Changing Colorspaces」
• W3C Wiki「HSL」