画像処理ソリューション
これを見れば画像処理の入門から基礎~応用まで全てがわかるのを目指して!
   
翻訳(Translate)

プロフィール

Akira

ニックネーム:Akira
東京都の町田事業所に勤務
画像処理ソフトの開発を行っています。リンクフリーです!
詳細プロフィールは こちら
お問い合わせは、こちら↓

【補助HP】
画像処理ソリューションWeb版 【Newブログ】
イメージングソリューション

スポンサーリンク


カテゴリ

最近のコメント

カレンダー

05 | 2017/06 | 07
S M T W T F S
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

趣味のブログ

iPhone萬歳!
iPhoneの情報いろいろ。
ブログ学習帳
ブログ、SEO、アフィリエイト情報など(まだまだこれから)
俺流クラフト日記
ハンドメイド作品の記録(現在、放置中)

スポンサーリンク 最近の記事
(09/18)  計測測定展に光切断のデモを出展しました
(08/17)  ディジタル画像技術事典200に記事が載りました
(06/09)  光切断を画像センシング展で公開
(05/14)  中国(上海)へ行って来ました
(04/12)  韓国へ行って来ました
(03/10)  私の求める新人像
(01/18)  エレクトロテストジャパンにカラー光切断法のデモを出展しました。
(12/23)  ユニークアクセス200万達成!
(12/10)  【カラー光切断法】YouTube動画まとめ
(11/04)  国際画像機器展2014にカラー光切断法を出展します。
(10/05)  第25回コンピュータビジョン勉強会@関東に参加してきました。
(09/08)  フーリエ変換の記事を追加しました。
(08/09)  【画像処理】ランキング低下中
(07/06)  記事の更新が停滞中...
(06/08)  画像センシング展2014でカラー光切断法のデモを行います。
(05/17)  カラー光切断法の動画を公開しました。
(04/30)  ソニーα NEX-5Rで星空撮影
(04/10)  カラー光切断法の取込結果を追加しました
(03/08)  Korea Vision Show 2014へ行ってきました
(02/05)  フーリエ変換シリーズを始めます。
(01/06)  2014年、あけましておめでとうございます。
(12/04)  カラー光切断法を公開(国際画像機器展2013にて)
(11/13)  国際画像機器展2013に出展します
(10/14)  「画像処理のためのC#」はじめます。
(09/16)  【C#,VB.NET】高速描画コントロールをバージョンアップしました。
(09/04)  拡大鏡に輝度値表示、ルーラー機能を追加した個人ツールを公開
(08/05)  7月の拍手Top5
(07/06)  2013年6月人気記事Top5
(05/12)  SONY α NEX-5Rレビュー
(04/24)  SONY α NEX-5RY購入

色相、彩度、明度の計算方法

メインページ画像処理

色相(Hue:色合い)、彩度(Saturation:鮮やかさ)、明度(Brightness,Lightness,Intensity,Value:明るさ)については、以前、変換式には色相、彩度、明度ほかのページにまとめたのですが、実は訳も分からず公式だけをまとめていました。

で、なんだか気持ちが悪かったので色相彩度明度について、よ~く調べてみました。
私なりの理解ですが、以下にまとめました。

R、G、Bの色空間については、下図のようにRGBをXYZのように三次元座標で表すと、一辺の長さが255で表される立方体の範囲内で全ての色を表す事が出来ます。(R,G,B各8bitの場合)
色相、彩度、明度

この立方体を白(255、255、255)に位置から黒(0、0、0)の方向へ見て、R軸を右側に取ると、

色相、彩度、明度の計算方法

のように、正六角形となります。
この時、の方向を0°として、反時計回りにの位置が120°240°色相0~360°(2π)を定めます。
彩度は一番外側の六角形に対して、どの割合の位置に配されているかを0~1.0で表したものが彩度となります。

詳細は後述しますが、色相彩度はカメラやパソコンなどの性能評価(使いやすさ、価格、処理速度など)を表す時に用いるレーダーチャート(クモの巣グラフ)もどきみたいな物?!と思うと、自分の中で少し整理ができました。

さらに、この六角形の高さ方法に明度を割り振ると、HSV(六角錐モデル)HLS(双六角錐モデル)となります。
それぞれの違いは明度の定義が異なり、R、G、Bの最大輝度値をImax、最小輝度値をIminとしたときに

  明度V = Imax

としたものがHSV

  明度L = ( ImaxImin ) / 2

としたものがHLSとなり、明度の値は0~1.0で表されます。

これを立体で表すと

HSV(六角錐モデル)
色相、彩度、明度の計算方法
HLS(双六角錐モデル)
色相、彩度、明度の計算方法

となります。
このHSV、HLSともに、六角錐の斜面の部分が彩度が1.0となります。

以下、色相彩度明度の詳細な計算方法です。

HSVの計算方法

はじめにR、G、Bの輝度値の範囲を0~255から0~1.0となるように変換します。
(R、G、Bのそれぞれの値を255で割ります。)

【色相Hの求め方】
下図のように、0°方向R120°方向G240°方向Bだけ進み、最後の点の位置のR軸に対する角度が色相となります。
色相、彩度、明度の計算方法

この最後の点の座標は中心を(x、y) = (0、0) とすると、R、G、Bの方向のなす角度から
色相、彩度、明度の計算方法

となり、より色相Hが求まります。
色相、彩度、明度の計算方法

ただし、アークタンジェントの計算が出来ない場合など、この方法とは別に、近似的に求める方法もあります。(こちらの方が一般的)

下図を見ても分かる?ようにR、G、Bの成分の比を比べ、
 Rが最大の場合、色相は-60°(300°)~60° (R方向の0°±60°)
 Gが最大の場合、色相は 60°~180°   (G方向の120°±60°)
 Bが最大の場合、色相は 180°~300°   (B方向の240°±60°)
の範囲内に色相は収まります。 
色相、彩度、明度の計算方法

以下、Rの値が最大の場合を例に取って説明したいと思います。

下図のように、2つの矢印の長さが分かれば、その矢印の比で角度60°を分割することで、角度(色相)を近似することが出来ます。
色相、彩度、明度の計算方法

R、G、Bの大きさがR≧G≧Bの場合

色相H = 60° × (G - B) / (R - B)
色相、彩度、明度の計算方法

R、G、Bの大きさがR≧B≧Gの場合

色相H = 60° × (G - B) / (R - G)

色相、彩度、明度の計算方法
となります。
ただし、この場合、色相の値が負となるので、
色相H = 60° × (G - B) / (R - G) + 360°

とします。

と、なる理屈を理解するのに苦労しました...
図中に書いてある黄色い正三角形がポイント!
正三角形なので、三辺の長さが等しい分けで。
R以外のGやBが最大となる場合も理屈は同じです。
120°づつ回転させて考えてみると分かります。

この式を一般的に書くと、R、G、Bの成分のうち、最大の成分をImax、最小の成分をIminとすると

ImaxRのとき
色相、彩度、明度の計算方法
ただし、H<0のとき、H = H + 360° とします。

ImaxGのとき
色相、彩度、明度の計算方法

ImaxBのとき
色相、彩度、明度の計算方法

となります。

明度Vの求め方】
明度は、もともとHSVの定義よりR、G、Bの成分のうち、最大の成分をImaxとすると

  明度V = Imax

とします。
明度Vの範囲は0~1.0となります。

彩度Sの求め方】
R、G、Bの成分のうち、最大の成分をImax、最小の成分をIminとすると

  彩度S = (Imax - Imin) / Imax

となります。
彩度Sの範囲は0~1.0となります。

色相、彩度、明度の計算方法

HLSの計算方法

【色相Hの求め方】
色相HはHSVの色相Hの求め方と同じです。

明度Lの求め方】
明度Lは、もともとHLSの定義よりR、G、Bの成分のうち、最大の成分をImaxとすると

  明度L = ( ImaxImin ) / 2

とします。
明度Lの範囲は0~1.0となります。

【彩度Sの求め方】
R、G、Bの成分のうち、最大の成分をImax、最小の成分をIminとすると

L≦0.5のとき

  彩度S = (Imax - Imin) / (Imax + Imin)

L>0.5のとき

  彩度S = (Imax - Imin) / ( - Imax - Imin)

となります。
彩度Sの範囲は0~1.0となります。

以下、補足説明です。

彩度Sは下図の外側の六角形に対して、内側の六角形の大きさの割合で求められます。

色相、彩度、明度の計算方法

この六角形の大きさはR,G,Bの輝度値が最大となる軸上で考えると比較的分かりやすいと思います。
今回はRの値が最大となる場合とします。

HLSは双六角錐モデルであるため、明度Lが0.5以下の場合、外側の六角形の大きさ(上図のE'の位置)は

  E' = Imax + Imin

で求まります。
色相、彩度、明度の計算方法

明度Lが0.5より大きい場合、外側の六角形の大きさ(上図のE'の位置)は

  E' = 2 - Imax - Imin

となります。
色相、彩度、明度の計算方法

以上のことから、最初の彩度Sの式が求まります。

色相、彩度、明度を使った色判別時の注意点

色相および彩度を用いると、画像の明るさ(明度)が変動しても似た色の領域を抽出する事が可能となりますが、彩度の値が小さい場合、つまりR、G、Bの値がそれぞれ近い場合は色相の値が不安定になります。

例えば、
 (R、G、B) = (121、120、120)の場合、 色相H = 0°
 (R、G、B) = (120、121、120)の場合、 色相H = 120°
 (R、G、B) = (120、120、121)の場合、 色相H = 240°

と、ほんの少しのR、G、Bの値の違いでも色相の値は大きく異なります。

また、色相Hは角度で表されるので、例えば1°も359°も値こそ離れていますが、どちらも0°±1°の範囲内で角度的には近いので、色相Hの値で単純に二値化処理することで色の領域を抽出する場合は注意して下さい。
 

Loading...
スポンサーリンク

この記事に対するコメント
色相の公式について
Atan(逆正接関数)を利用する場合は、偏角を得ますので、色相は角度になります。
ラジアン(角度は円周の長さに対する弧の長さの比)を考えれば、色相は円周の比とも言えます。

それに対して、Maxで3つに場合分けをした場合は、60度ずつの正三角形内での弦の比になっていますね。

逆正接関数法:弧の比(偏角)
→場合分け法:弦の比(比例配分) に近似しているみたいです。

色相をH’=(Med-Min)/(Max-Min)と定義すれば、公式を1本にできます。
Max=R,Min=B:H=H’
Max=G,Min=B:H=120-H’
Max=G,Min=R:H=H’-120
Max=B,Min=R:H=240-H’
Max=B,Min=G:H=H’-240
Max=R,Min=G:H=360-H’
【2016/04/08 13:34】 URL | PSP #mQop/nM. [ 編集]

Re: タイトルなし
どうもありがとうございます(^o^)
私自身が分かっていなかったので、私なりの理解で書いてみました。
【2016/03/19 12:37】 URL | Akira #- [ 編集]


RGB方式→HSV(HSB)方式/HSL(HLS)方式の解説で、一番分かりやすかったです。

色をプログラムするブログの中で、ベースとなる考え方を参考とさせていただきました。
http://blogs.yahoo.co.jp/pspevolution7
【2016/03/19 12:31】 URL | PSP #- [ 編集]


回答ありがとうございます!!
ちゃんと、書いてありますね。
お手数をおかけしました。
もう一度計算しなおします。

とてもよくわかるサイトで大変勉強になりました。
現在、色に関する仕事をしていまして、
RGBで指定された色を、
分かりやすく並べることができないか苦心しています。
HLSがWordで使われているので利用することになりました。

感謝しております(*^_^*)
また、今後も参考にさせてください。
【2013/03/30 10:05】 URL | 紫 #SFo5/nok [ 編集]

Re: タイトルなし
分かりづらくて申し訳ありません。
HSVの計算方法の最初の部分には書いてあるのですが、HLSの計算の部分でもR,G,Bの値を0~1になるように、それぞれ255で割ってからImax、Iminを計算して下さい。

以上、よろしくお願い致します。
【2013/03/29 23:03】 URL | Akira #- [ 編集]


すみません、
2-255-192
でしたね。
どちらにしても
2から3ケタの数字を引くんですから、
マイナスになっちゃいます。
困っています
よろしくお願いします。
<m(__)m>
【2013/03/29 22:40】 URL | 紫 #SFo5/nok [ 編集]


こんにちは。もし見ていてくださったら教えてください。
今RGBからHLS値に変換する式をエクセルで立てています。
H値とL値はなんとかできました。
でもS値が、どうしてもマイナスになってしまいます。
よく式を見てみると
彩度S = (Imax - Imin) / (2 - Imax - Imin)
こちらの分母は、普通マイナスになりますよね?

たとえば、Webカラーのピンクは
255,192,203
ですから、2-192-203はマイナスになります。
なにが間違っていますか?

H値とL値はだいたい280以下の3ケタに変換されるのですが
Sだけできません。

もし分かりましたら、教えてください。



【2013/03/29 22:31】 URL | 紫 #SFo5/nok [ 編集]


この記事に対するコメントの投稿














管理者にだけ表示を許可する


この記事に対するトラックバック
トラックバックURL
→http://imagingsolution.blog107.fc2.com/tb.php/247-ba6bd324
この記事にトラックバックする(FC2ブログユーザー)

現在の閲覧者数: / 合計