======================================== 　　　色空間についてのまとめメモ ======================================== ■更新履歴 　　2008.11.26作成 　　2008.11.28更新 　　　　・「前置き」を追加 　　　　・HSVを採用しているアプリケーションにAdobe AfterEffectsを追加。 　　　　・「各アプリケーションでのHSV・HLS」の文章を一部変更。 　　2008.11.30更新 　　　　・「HSV・HSB・HLSについて」を追加 　　　　・.NETのColor構造体についての判断を追記 　　　　・明るさ系パラメータの変換式などを追記 　　2008.12.01更新 　　　　・「前置き」に少し追記 　　　　・「HSV・HSB・HLSについて」に、HSB撲滅宣言などを追記。 　　　　・「HLS輝度」は、「HLS明度」という言葉に変更。 　　　　　　パラメータの説明に「明るさ」という言葉が使われることが多いため。 　　　　・そのへんを踏まえて全体的にちょこちょこ変更。 　　2009.01.24更新 　　　　・YUVのところに、「YIQとかYCbCrとかITU-R BT.601とかよくわかんない」という一文を追加。 　　　　・各アプリケーションでの対応のところにPixiaを追加。 ■前置き 　　ＰＣで扱われる色は、基本的にＲ(赤)・Ｇ(緑)・Ｂ(青)の３つの色の 　　組み合わせで表すことができます。まずこれが基本。 　　しかしながら色の表し方には、ＲＧＢだけでなく、様々な方法があります。 　　皆さんも、「色相」「彩度」「明度」って言葉は聞いたことがありますよね。 　　例えばNiVEの場合、カラーキーとかで色を選ぶ場合に 　　「色の編集」のパレットを開いて「色の作成」を選ぶと、ＲＧＢとは別に、 　　　　　　「色合い」 　　　　　　「鮮やかさ」 　　　　　　「明るさ」 　　というパラメータが出てきます。 　　また、GIMPでは、カラーパレットを開くと、 　　　　　　「Ｈ(色相)」 　　　　　　「Ｓ(彩度)」 　　　　　　「Ｖ(明度)」 　　というパラメータがあります。 　　AfterEffects CS3のカラーピッカーなら、 　　　　　　「Ｈ(色相)」 　　　　　　「Ｓ(彩度)」 　　　　　　「Ｂ(明るさ)」 　　というパラメータがあります。 　　Inkscapeなら、 　　　　　　「Ｈ(色相)」 　　　　　　「Ｓ(彩度)」 　　　　　　「Ｌ(明るさ)」 　　というパラメータがあります。 　　色を扱うアプリケーションなら、こういったパラメータが必ず存在するはずです。 　　　　　　「微妙に表現が違うけど、どれも同じ色相・彩度・明度を表してるんだろうな〜」 　　と思ってた、そこのあなた。実は違うんです。 　　アプリケーションによって指定できる値範囲も違うし、そのパラメータ自体の意味も変わってきます。 　　　　　　「おぃィ？"明るさ"と"明度"で意味が違うとか、おかしいと思うんだが？」 　　って感じなんですが、更に「輝度」なんて言葉もあったりして、ますます訳がわかりません。 　　どうやら色空間だとか表色系だとかで色々な規定があるようで、 　　アプリケーションによって、どれを使うかが変わる模様。 　　そんなわけで、グーグル先生を頼りに、色々調べてまとめてみたのが、このメモです。 　　ん・・・？・・・そんなの常識・・・？ 　　・・・すみません、私はつい最近まで違いがあるなんて思ってもいませんでした。（;´Д⊂） 　　おまけに今でも理解しきれてないので、間違ってるとこもあるかもしれません。 ■注意 　　●色空間についてググって調べていたら、なんか情報や言葉が入り乱れて 　　　　訳がわからなくなってきたので、試しに自分なりにまとめてみたもの。 　　●色々な色表現があるけど、とりあえずRGB・HSV・HLS・YUVだけ。 　　●あまり細かいことは気にしない。（けど、十分細けぇ・・・） 　　●間違ってるかもしれないけど、引かぬ、媚びぬ、省みぬ。 　　●ぶっちゃけ意味がよくわかっていないところも多々あります。 　　●つまり正確性は保証できないので、自己責任で利用してねってことさっ！ ■HSV・HSB・HLSについて 　どれも色空間を表しているのですが、どうも明るさ系のパラメータを 　　　　Value、Brightness、Lightness、Luminance 　のうちの、どの単語で表現しているかというところで、色々と混乱しているように思えます。 　とりあえず、 　　　　http://image-d.isp.jp/commentary/color_cformula/index.html 　のRGBとの変換式を基準として、HSVとHLSの２種を考えることにします。 　　　　MAX＝max(R,G,B) 　　　　MIN＝min(R,G,B) 　とした時、 　　　　●明るさ系のパラメータ＝MAX　となるのがHSV 　　　　●明るさ系のパラメータ＝(MAX+MIN)/2　となるのがHLS 　とします。 　「HSB」については、またちょっとややこしい話になっています。 　まず、Adobe系のカラーピッカーで使っている「HSB」は、計算式から判断すると 　HSVということになります。Wikiの記事にも、「HSV＝HSB」と書かれているようです。 　しかしながら、逆の意味になっている場合もあります。 　例えば、.NET FrameworkのColor構造体の説明や関数名を見ると、 　「HSB」という表現が使われているのですが、実際の値の計算には、 　上記のHLSの計算式が使われているようです。 　つまり、「HSB」と言った場合、HSVのものもあれば、HLSのものもあるということに・・・。 　あまりにも混乱を招いてアホらしいので、このまとめメモでは、「HSB」という言葉は排除します。 　「HSB」と表現されているものは、上記の計算式に従って、HSV・HLSのどちらなのかはっきりさせます。 　なお、わかりやすいので明るさ系のパラメータを参考にしてHSVとHLSを見分けていますが、 　彩度(S)の計算式についても、HSVとHLSでは異なることに注意して下さい。 ■まとめの過程で色々おかしいと思った情報など 　　●「色空間」のWiki 　　　　　　http://ja.wikipedia.org/wiki/%E8%89%B2%E7%A9%BA%E9%96%93 　　　　◎HLSの説明にある、 　　　　　　　　「明度と輝度との違いは値の算出方法である。明度がrgb各色のビットを 　　　　　　　　　足して単純に3で割ったものであるのに対し、輝度は下に書かれているように 　　　　　　　　　各色の重み付けが違う。(比率 赤:0.29891 緑:0.58661 青:0.11448)」 　　　　　　という一文は、以下の理由により、間違っていると判断。 　　　　　　HSVのVを「明度」、HLSのLを「輝度」と解釈しているようだが、 　　　　　　それらの言葉が独り歩きしてしまった挙句、YUVとの混同も発生しており、 　　　　　　文章全体が間違ってると思う。 　　　　　　　　○RGBを３で割った数値が明度(HSVのV)になるのは 　　　　　　　　　　グレースケール時（R=G=B）だけじゃないかな？ 　　　　　　　　　　HSVとRGBの変換式でも、 　　　　　　　　　　　　　　　Ｖ＝max(Ｒ,Ｇ,Ｂ) 　　　　　　　　　　になってるし。 　　　　　　　　○RGBに重みをつけて計算するのは、「YUVの輝度(Y)」のことであって、 　　　　　　　　　　「HLSの輝度(L)」は、また別のはず。 　　　　　　　　　　HLSとRGBの変換式も、 　　　　　　　　　　　　　　Ｌ＝(max(Ｒ,Ｇ,Ｂ)＋min(Ｒ,Ｇ,Ｂ))／2 　　　　　　　　　　になってるし。 　　●Adobeのテクニカルガイド 　　　　　　http://www.adobe.com/jp/support/techguides/color/colormodels/hsb.html 　　　　◎説明文の 　　　　　　　　「HSBでは色相、彩度、輝度。HLSでは色相、明度、彩度になります。」 　　　　　　というのはBrightnessを輝度、Lightnessを明度と訳したのかな・・・。 　　　　　　Wikiとかを見ると、輝度って言葉はHLSの場合に使われるようなのだが・・・。 　　　　　　Adobe系アプリは、HSBという名前でHSVを使ってるのに、 　　　　　　このページで説明してるのはHLSのようだし、よくわからない。 　　　　　　ページのURLがHSBになっているところが、余計混乱を招く。 　　　　　　そんなわけで、このページはとりあえずスルー。 　　●.NET FrameworkのColor構造体 　　　　　上でも少し述べたが、.NET FrameworkのSystem.Drawing.Color構造体は、 　　　　　GetBrightness()という関数で明るさを取得するようになっている。 　　　　　また、リファレンスなどでも「HSB」という言葉で説明されている模様。 　　　　　しかしながら、実際の値の計算としては、HLSの計算式が用いられている。 　　　　　上で宣言した通り、「HSB」という言葉は使わない方針なので、 　　　　　.NET FrameworkのColor構造体は「HLS」に分類することとする。 ■「明度」「輝度」「明るさ」という言葉の使い分けがどうもはっきりしないんで、 　　ここでは以下のように使い分けてみようと思います。 　　もうこれらの言葉に振り回されるのは嫌だ。直訳すればいいってもんじゃないよ！ 　　　　●明るさ・・・感覚的な意味での明るさ。 　　　　●HSV明度・・・HSVにおけるV(Value)のこと。 　　　　　　　　　　　　　100%が純色。そこから明るさが失われていく感じ。 　　　　　　　　　　　　　RGBとの変換式は、 　　　　　　　　　　　　　　　HSV明度＝max(Ｒ,Ｇ,Ｂ) 　　　　　　　　　　　　　となる。 　　　　●HLS明度・・・HLSにおけるL(Lightness又はLuminance)のこと。 　　　　　　　　　　　　　0%が完全な黒、50%が純色、100%が完全な白。 　　　　　　　　　　　　　RGBとの変換式は、 　　　　　　　　　　　　　　　HLS明度＝(max(Ｒ,Ｇ,Ｂ)＋min(Ｒ,Ｇ,Ｂ))／2 　　　　　　　　　　　　　となる。 　　　　●YUV輝度・・・YUVにおけるYのこと。 　　　　　　　　　　　　　RGBの原色を並べると 　　　　　　　　　　　　　　　「緑が一番明るくて青が一番暗い」 　　　　　　　　　　　　　と感じるよねってことでRGBに重みをつけて計算した明るさ。 　　　　　　　　　　　　　より人間の感覚に近い明るさ表現だと言える。 　　　　　　　　　　　　　RGBとの変換式は以下の通り。 　　　　　　　　　　　　　　　YUV輝度 = 0.29891*R + 0.58661*G + 0.11448*B --------------------- 　　RGB色空間 --------------------- 　　■「赤(Ｒ)」「緑(Ｇ)」「青(Ｂ)」の３原色を加法混色することで色を表す。 　　　　Ｒ・Ｇ・Ｂの値は、それぞれ0〜255の範囲となっており、 　　　　これらを組み合わせることで1600万色以上の表現が可能。 　　　　ちなみに、これに透明度を表すＡ(アルファ)を加えたのがＲＧＢＡ。 --------------------- 　　HSV色空間 --------------------- 　　■「色相(Hue)」「彩度(Saturation)」「HSV明度(Value)」の３つの成分で色を表す。 　　　　●色相 　　　　　　色の種類。色を並べた色相環という輪があり、 　　　　　　赤の位置を0度とし、0〜360度の範囲の角度を指定して色を表す。 　　　　　　赤･黄･緑･青･紫の5つの基本色相と黄赤・黄緑・青緑・青紫・赤紫の5つの中間色相がある。 　　　　●彩度 　　　　　　色の鮮やかさを0〜100%で表す。 　　　　　　色空間の中央軸(無彩色軸)からの距離である。無彩色(白・黒・灰色)で0となり、 　　　　　　無彩色軸から離れるにしたがい増し、純色で最大となる。 　　　　　　また、彩度は色空間における距離なので、色空間に依存する。 　　　　　　たとえば、色空間によっては、純色以外でも彩度が最大になることがある。 　　　　　　HSV色空間では、暗清色(純色と黒との混色)で、彩度が最大になる。 　　　　　　HSVの彩度は、全体の明るさに対する純色の割合を示し、 　　　　　　saturationの字義どおりの意味に近い。 　　　　　　暗清色でも彩度が最大になるのは、このためである。 　　　　　　また、HSV明度が低く黒に近い場合、彩度が大きく変わっても 　　　　　　純色の絶対量はあまりかわらず知覚的には色があまり変わらない。 　　　　●HSV明度 　　　　　　明るさを0〜100%で表す。 　　　　　　明度100%を純色とし、そこからどれだけ明るさが失われるかを表している。 　　　　　　RGBとの変換式は、 　　　　　　　　　　HSV明度＝max(Ｒ,Ｇ,Ｂ) 　　　　　　となる。 　　■HSVを採用しているアプリケーション 　　　　・GIMP 　　　　・Adobe Photoshop 　　　　・Adobe Illustrator 　　　　・Adobe AfterEffects 　　　　※Adobe系アプリケーションのカラーピッカーでは、「HSV」ではなく「HSB」と表現されているが、 　　　　　　実際の色の計算にはHSVが使用されている。 --------------------- 　　HLS色空間 --------------------- 　　■「色相（Hue）」「彩度（Saturation）」「HLS明度（Luminance又はLightness）」の 　　　　３つの成分で色を表す。 　　　　ＬがLightnessなのかLuminanceなのかについては保留。 　　　　っていうか、どっちだろうが知ったこっちゃないや。 　　　　「HLS明度」っていう言葉で説明するんだい。 　　　　●色相 　　　　　　色の種類。色を並べた色相環という輪があり、 　　　　　　赤の位置を0度とし、0〜360度の範囲の角度を指定して色を表す。 　　　　　　赤･黄･緑･青･紫の5つの基本色相と黄赤・黄緑・青緑・青紫・赤紫の5つの中間色相がある。 　　　　　　色相については、HSV色空間と考え方は変わらない。 　　　　●彩度 　　　　　　色の鮮やかさを0〜100%で表す。 　　　　　　色空間の中央軸(無彩色軸)からの距離である。無彩色(白・黒・灰色)で0となり、 　　　　　　無彩色軸から離れるにしたがい増し、純色で最大となる。 　　　　　　また、彩度は色空間における距離なので、色空間に依存する。 　　　　　　たとえば、色空間によっては、純色以外でも彩度が最大になることがある。 　　　　　　HLS色空間では、清色(純色と白または黒との混色)で、彩度が最大になる。 　　　　　　HLS色空間では、「HLS明度が低く黒に近い場合」や「HLS明度が高く白に近い場合」は、 　　　　　　彩度が大きく変わっても純色の絶対量はあまりかわらず、知覚的には色があまり変わらない。 　　　　●HLS明度 　　　　　　0%を完全な黒、100%を完全な白とし、その中間の50%を純色とする。 　　　　　　50%以下はHSVのHSV明度を示し、50%以上はHSVの彩度を示すと考えると分かりやすい？ 　　　　　　RGBとの変換式は、 　　　　　　　　　　HLS明度＝(max(Ｒ,Ｇ,Ｂ)＋min(Ｒ,Ｇ,Ｂ))／2 　　　　　　となる。 　　■HLSを採用しているアプリケーション 　　　　・Microsoft ペイント 　　　　・NiVE 　　　　・Inkscape 　　　　・.NET FrameworkのSystem.Drawing.Color構造体 　　　　※.NET FrameworkのColor構造体は、「HSB」という言葉で説明されており、 　　　　　　明るさの取得関数もGetBrightness()となっているが、 　　　　　　実際の色の計算にはHLSが使用されている。 --------------------- 　　YUV --------------------- 　　★いまいちよくわからないうえに、色々はしょってるので、 　　　　下記の参考リンクのほうを見るのが望ましい。 　　　　　　　「YUVフォーマット及び YUVとRGBの変換」 　　　　　　　　　http://vision.kuee.kyoto-u.ac.jp/~hiroaki/firewire/yuv.html 　　★なんかよくわからないけど、YUV系の変換式は、YIQだのYCbCrだの 　　　　ITU-R BT.601だの色々と書かれていてよくわからない。 　　　　とりあえず、R・G・B・Yの数値範囲が０〜２５５になるのは、 　　　　以下に示した計算式のようなので、とりあえずこれを記載しておく。 　　■「Ｙ(YUV輝度)」「Ｕ(Cb／青色色差)」・「Ｖ(Cr／赤色色差)」の３つの成分で色を表す。 　　　　テレビ放送向けのコンポーネント映像信号規格である。 　　　　人間の目は「明るさの変化には敏感だが, 色の変化には鈍感」 という特性があるので、 　　　　明るさを表すYUV輝度のデータ量を多めにし、色情報は少なめにしたもの。 　　　　カバーする色範囲はＲＧＢよりも広くなるが、ＲＧＢほど細かい色指定はできない。 　　　　サンプリング方式の違いなどにより、 　　　　　　　YUV444,YUV422,YUV411,YUV12,YUV9,YUV420,YUV410 　　　　など、色々な呼び方で区別される。 　　　　Aviutlなどでよく聞く「YUY2」は、「YUV422」に入るらしい。 　　　　●Ｙ(YUV輝度) 　　　　　　　RGBの原色を並べると 　　　　　　　　　「緑が一番明るくて青が一番暗い」 　　　　　　　と感じるよねってことでRGBに重みをつけて計算した明るさ。 　　　　　　　より人間の感覚に近い明るさ表現だと言える。 　　　　　　　よくわからないけど、「CIE の色度図のＹ軸」だからＹらしい？ 　　　　　　　RGBとの変換式は、以下の通り。 　　　　　　　　　　　YUV輝度 = 0.299*R + 0.587*G + 0.114*B 　　　　●Ｕ(Cb／青色色差)(Chrominance Blue) 　　　　　　　YUV輝度と青の差。（Ｂ−Ｙ） 　　　　　　　RGBとの変換式は、以下の通り。 　　　　　　　　　　　Cb = 0.564*(B-Y) = -0.169*R - 0.331*G + 0.500*B 　　　　●Ｖ(Cr／赤色色差)(Chrominance Red) 　　　　　　　YUV輝度と赤の差。（Ｒ−Ｙ） 　　　　　　　　　　　Cr = 0.713*(R-Y) = 0.500*R - 0.419*G - 0.081*B -------------------------------------- 　　各アプリケーションでのHSV・HLS -------------------------------------- 　　■HSVを採用しているGIMPでは、 　　　　　　H（色相）・・・０〜３６０ 　　　　　　S（彩度）・・・０〜１００ 　　　　　　V（明度）・・・０〜１００　　←HSV明度 　　　　という値範囲で色指定が可能。 　　■HSBという名前でHSVを採用しているAfterEffects CS3では、 　　　　　　H（色相）・・・０〜３６０ 　　　　　　S（彩度）・・・０〜１００ 　　　　　　B（明るさ）・・・０〜１００　　←HSV明度 　　　　という値範囲で色指定が可能。 　　■HLSを採用しているペイントやNiVEでは、 　　　　　　「色合い」・・・０〜２３９　　　←色相 　　　　　　「鮮やかさ」・・・０〜２４０　　←彩度 　　　　　　「明るさ」・・・０〜２４０　　　　←HLS明度 　　　　という値範囲で色指定が可能。 　　　　色相だけ最大値が２３９なのは、色相環のループ性により 　　　　２４０＝０が成り立つからってことなのかな。 　　　　それにしてもなんで値範囲が２４０なんだろう・・・わかりづらい気が。 　　■HLSを採用しているInkscapeでは、 　　　　　　H（色相）・・・０〜２５５ 　　　　　　S（彩度）・・・０〜２５５ 　　　　　　L（明るさ）・・・０〜２５５　　←HLS明度 　　　　という値範囲で色指定が可能。 　　■Pixiaでは、HSV、HLSの両方を使えるらしい。 　　HSVやHLSは、色の表現方法を表したものであり、組み合わせ数的にも、 　　RGB1670万色全てと１対１に対応させれるわけではない。 　　Inkscapeの場合は組み合わせ数は足りてるけど、 　　例えばHLS明度が最大の場合は色相や彩度を変えても白しか表現できないので、 　　RGB1670万色全てと１対１にはならない。 　　●HSVとHLSの手っ取り早い見分け方 　　　　　「明るさ系のパラメータ値が最大」の状態で、 　　　　　　　　◎色相・彩度のみを変えて白色以外が表現できるならＨＳＶ 　　　　　　　　◎色相・彩度のみを変えても白色しか表現できないならＨＬＳ --------------------- 　　参考リンク --------------------- ■YUVフォーマット及び YUVとRGBの変換 　　　http://vision.kuee.kyoto-u.ac.jp/~hiroaki/firewire/yuv.html ■YUVとRGBの比較 　　　http://www.dtv.sakura.ne.jp/contents1/004.html ■コンポーネント映像信号 - Wikipedia 　　　http://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E6%98%A0%E5%83%8F%E4%BF%A1%E5%8F%B7 ■ISP imaging-developers - 色変換式集 　　　http://image-d.isp.jp/commentary/color_cformula/index.html ■色 - Wikipedia 　　　http://ja.wikipedia.org/wiki/%E8%89%B2 ■色相 - Wikipedia 　　　http://ja.wikipedia.org/wiki/%E8%89%B2%E7%9B%B8 ■彩度 - Wikipedia 　　　http://ja.wikipedia.org/wiki/%E5%BD%A9%E5%BA%A6 ■色空間 - Wikipedia 　　　http://ja.wikipedia.org/wiki/%E8%89%B2%E7%A9%BA%E9%96%93 ■HSV色空間 - Wikipedia 　　　http://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93 ■HLS色空間 - Wikipedia 　　　http://ja.wikipedia.org/wiki/HLS%E8%89%B2%E7%A9%BA%E9%96%93 ■光に関する用語 　　　http://www.geocities.jp/hiroyuki0620785/lamp/yougo.htm ■The HSB/HLS Color Model - Color Models - Technical Guides 　　　http://www.adobe.com/jp/support/techguides/color/colormodels/hsb.html