色モデル

画像モード

フルカラー画像を表現,保存するための画像モードとしてつぎのようなものがある。 フルカラー画像のほか,つぎのような画像のモードもある。

RBG モデル

色の3成分である RGB の値で直接,色を表すことを考える。 Photoshop の RGB モードが,これに相当する。 通常の色解像度である 8 ビットモードでは,各成分は 0〜255 の256階調で表われるが,ここでは便宜上最大値 を1=100% としよう。 すると,すべての色は,仮想的な空間である RGB 色空間の1辺の長さが1の立方体の中に含まれることになる(図)。 これを色立方体という。 RGB,CMYの各原色,白,黒が色立方体の頂点にあたる。 ちなみに,色立方体は,XYZ 色空間では sRGB あるいは Adobe RGB の色域=平行六面体に対応し, R, G, B 各頂点の色は,色域 (sRGB または Adobe RGB) の R, G, B 光源の色になっている。 したがって,RGB 値が同じでも,使っている色域が異なれば,色は若干異なったものになる (XYZ 空間における sRGB と AdobeRGB の色域)。

(注) じつは,画像データの RGB 値は,それぞれの成分の強さに比例しているわけではない。 ディスプレイには,中間調が暗く表示されてしまうという特性がある。 その特性をキャンセルするため,画像データの RGB 値は,中間調の数値をあらかじめ大きくしておく (たとえば,明度50% の色の数値は 70% 強にしておく) というガンマ補正 (後述) が施されたものになっている。

この色立方体を白の頂点の方向から無彩色の対角線に平行に見ると,下図のような色の六角形が見えることになる。

RGBモデル RGB color cube
図.RGB色空間と色の立方体

色の六角形
        color hexagon色の六角形2 color hexagon
  図.色の六角形

HSV (HSB) モデル

色の立方体を変形して六角錐にし,明度 (Value),色相 (Hue),彩度 (Saturation) という馴染みやすい概念で色を指定できるようにしたのが HSV モデルである。原色は明度 V=100%,彩度 S=100% にあたり,色相は R (赤) を起点として角度で測る。
下2つの図は,HSV モデルの断面を揃えて六角柱にしたものである。原色の明度が V=100% になるのが HSV モデルの特徴 (欠点?) である。
(注) Adobe Photoshop では,明度に "Value" ではなく "Brightness" を使って,HSB モデルと呼んでいる。

HSV model
図.色の HSV モデル

HSV
        model 2HSV 2
  図.HSV モデルを六角柱で表したもの。右図は左図の断面。

HSL モデル

HSV モデルでは,原色が白と同じ明度 (V=100%) になってしまう点が不自然である。そこで,HSV を改良して,RGB や CMY の明度を 50% にしたのが HSL モデルである。色相 (Hue),彩度 (Saturation) の定義は HSV モデルと同じであるが,明度の定義が HSV と違うので Lightness (L) と呼んで区別する。よく知られている色立体により近づいた色モデルといえる。
下の2つの図は,HSVモデルの断面の幅を揃えて六角柱にしたものである。原色の明度が L=50% になるのが HSL モデルの特徴である。

HLS model
図.色の HSL モデル

HLS
        model 2HLS 2
  図.HSL モデルを六角柱で表したもの。右図は左図の断面。

(注) Windows のカラーピッカーでは HSL モデルが使われている。ただし,H = 0〜240 (0°〜360°にあたる),S = 0〜240,L = 0〜240 のように,最大値が240になるように定義されているので,数値で指定するときは注意が必要である。

[参考] ウェブページの記述に使われる HTML では,色を RGB または HSL で指定する。たとえば,ページの背景色はつぎのように指定する (この例では暗い青)。
<body bgcolor="#000080"> または <body style="background-color: rgb(0, 0, 128);"> または <body style="background-color: hsl(240, 100%, 25%);">
また,文字色の指定は,たとえば (この例では黄)
<font color="#FFFF00">テキスト</font> または <span style="color: rgb(255, 255, 0);">テキスト</span> または <span style="color: hsl(60, 100%, 50%);">テキスト</span>

戻る
T.Fujiwara