全文検索(S)
[]

0. はじめに

Adobe PhotoShop で RGB モードの画像を 256 階調のグレースケールへ変換する方法は、1 通りではありません。グレースケールへの変換コマンドは、ガンマや色空間などの概念が絡み合っていて、結構複雑です。仕組みを理解していなかったために、モード メニューから グレースケール を選んでも望んだような結果が得られなかったり、不適切に彩度を取り除いて画像の階調を潰してしまうというようなことも考えられます。ここでは、何通りかのグレースケール化方法を、計算式から考えていきたいと思います。計算式は、PhotoShop 以外の一般的な画像処理でも利用できる汎用的なものです。

1. 中間値法 ( middle value )

1. 概要

RGB の中間値(middle value)、つまり、R、G、B 3 つのうちの、最大値と最小値の 2 つを足して 2 で割ったものを利用してグレースケール化する方法です。

2. 計算式

R、G、B の3つの値は 0 ~ 255 の任意の整数を取るものとし、また値が最大のものを max、最小のものを min とすると、グレースケール変換後の値 Y (値の範囲は 0 ~ 255 の整数とする)は、以下の式で求められます。

Y = ( max + min ) / 2

Y については、処理系に応じて適宜四捨五入等の処理を行ってください。

例:RGB 値がそれぞれ (48,170,255) の の場合

max = 255
min = 48
Y = (255 + 48) / 2 = 151

3. PhotoShopでの変換方法

色相・彩度(Ctrl-U)ダイアログを開き、彩度を -100 にすることで生成します。

PhotoShopでの変換方法

4. 具体例

オリジナルの RGB イラスト例
オリジナルの RGB カラーパターン(色相)
オリジナルの RGB カラーグラデーション(色相)
オリジナルの RGB カラーグラデーション
オリジナル
中間値でグレースケール化したイラスト例
中間値でグレースケール化したカラーパターン(色相)
中間値でグレースケール化したカラーグラデーション(色相)
中間値でグレースケール化したカラーグラデーション
中間値

5. 問題点

カラーパターンを見れば一目瞭然ですが、色の違いが全て潰れ、グレー 1 色になってしまっています。3 原色のグラデーションでも、それぞれの色の違いが分かりません。この方法は、心理物理量と呼ばれる、人間が色の違いによって感じる明るさの違いを無視しています。ですから、色相・彩度のダイアログからグレースケール化を行うべきではありません。また、セピア化などの色調の統一もこの方法で行うべきではありません。

2. NTSC 係数による加重平均法 ( NTSC Coef. method )

1. 概要

R、G、B それぞれの値に、重み付けをして 3 で割り、平均を取りグレースケール化する方法です。この重み付けの係数(NTSC Coefficients)は、日本やアメリカのテレビ放送で利用されている輝度信号(明るさ)の分離方法のものと同じです。

2. 計算式

R、G、B の3つの値が 0 ~ 255 の任意の整数を取るものとすると、グレースケール変換後の値 Y (値の範囲は 0 ~ 255 の整数とする)は、以下の式で求められます。

Y = ( 0.298912 * R + 0.586611 * G + 0.114478 * B )

この係数は、CCIR Rec.601に規定されている そうですが、私は規格書そのもので確認したことはありません。この係数が細かすぎて浮動小数点演算を利用するペナルティが大きかったり、1000 倍にして int で計算したりするのがマヌケだと感じる場合は、以下のような近似式で求めるとよいでしょう。

Y = ( 2 * R + 4 * G + B ) / 7

3. PhotoShopでの変換方法

チャンネルパレットを開き、RGB チャンネルを選択範囲として読み込むことで生成します。また、彩度 0 のグレーで塗りつぶした新規レイヤーを作成 し、色相モードで重ねても生成可能です。

RGBチャンネルから選択範囲を作成
チャンネルを利用する場合は、読み込んだ選択範囲をアルファチャンネルとして保存する等した後に、RGB チャンネルへ貼り付けるなどしましょう。ショートカットキーを利用する場合は、RGB チャンネルを選択した状態で q を押し Ctrl-ACtrl-C して、再び q を押して Ctrl-D して RGB チャンネルに Ctrl-V などと操作するのがお手軽です。
選択範囲保存の操作例

4. 具体例

オリジナルの RGB イラスト例
オリジナルの RGB カラーパターン(色相)
オリジナルの RGB カラーグラデーション(色相)
オリジナルの RGB カラーグラデーション
オリジナル
NTSC加重平均でグレースケール化したイラスト例
NTSC加重平均でグレースケール化したカラーパターン(色相)
NTSC加重平均でグレースケール化したカラーグラデーション(色相)
NTSC加重平均でグレースケール化したカラーグラデーション
NTSC加重平均

5. 評価点・問題点

心理物理量を考慮した過重平均がなされているので、自然に見えると思います。例えば、上のイラストの背景の薄いピンクと薄いグリーンの色の見た目の明るさのバランスが、グレースケールでも自然に再現されています。

この方法の欠点として考えられるのは、グレースケールとして仕上がるファイルが、NTSC と同じ色補正をされたディスプレイで見るものと仮定してしまっている点でしょう。NTSC という規格は、2.2 のディスプレイガンマや 6500K の白色点、NTSC 色度座標といった特性を持つテレビというハードウェア以外、すなわちほぼ全ての PC 用 CRT や液晶のことは、一切考慮していません

ただし、白色点の違いはそれほど大きな差がでないので、ほとんどの人は並べられない限りその差が分からないと思います。ガンマについても、Macintosh ではちょっと明るく見えるかもしれませんが、Windows や Linux 等ではあまり問題にならないでしょう。PhotoShop からもお手軽に利用でき計算も速いので、それなりに使えるか方法かと思います。

3. HDTV 係数による加重平均と補正 (ITU Coef. method )

1. 概要

PhotoShop のグレースケール化コマンドが行っている処理です。NTSC ではなく、HDTV 用の規格、CCIR Rec. 709 か ITU-R-BT709(これも私はナマの規格書見ずにつまみ食いしてます)の係数を元にした加重平均に、ガンマや白色点(色温度)などの補正を行っているものと思われます(詳細は丸め誤差が大きいので不明)。

2. 計算式

R、G、B の3つの値は 0 ~ 1 の任意の実数を取るものとし、現在のガンマ補正値 を X(実際的な値の範囲は、1.0 ~ 3.0 程度かなぁ) とする場合、グレースケール変換後の値 Y (値の範囲は 0 ~ 1 の実数とする)は、以下の式で求められます(白色点の補正等は省略しています。D65 と 9300K で、最大 3 / 256 くらいの差しか出ないようなので)。

X = 2.2

R = ( R ^ X ) * 0.222015
G = ( G ^ X ) * 0.706655
B = ( B ^ X ) * 0.071330

Y = ( R + G + B ) ^ ( 1 / X )

※ ^ はべき乗(power)を表します

3. PhotoShopでの変換方法

PhotoShop6.0 の場合、イメージ(I)モード(M)グレースケール(G) とメニューをたどって、グレースケール化コマンドを利用します。

4. 具体例

オリジナルの RGB イラスト例
オリジナルの RGB カラーパターン(色相)
オリジナルの RGB カラーグラデーション(色相)
オリジナルの RGB カラーグラデーション
オリジナル
PhotoShopのコマンドでグレースケール化したイラスト例
PhotoShopのコマンドでグレースケール化したカラーパターン(色相)
PhotoShopのコマンドでグレースケール化したカラーグラデーション(色相)
PhotoShopのコマンドでグレースケール化したカラーグラデーション
PhotoShop(x=2.2)

5. 評価点・問題点

上記の例は、X = 2.2 での結果ですが、これは、同一のガンマ設定で画像を Lab モードに変換した時の L チャンネルと同じものです(と思われます)。sRGB 等の現在一般的なディスプレイでの表示を重点的に考えた係数を利用しているため、もっとも自然に見える……はずなのですが、いくつか問題点がありそうです。

・環境依存のパラメータが入るため出力結果がバラバラ
この出力は、変換を行ったディスプレイのガンマ値等に合わせますので、当然全ての環境で同一の結果にはなりません。一意に画像を処理したい場合は注意が必要です。ガンマを 1.0 と考えれば加重平均だけになり、NTSC の加重平均に近い結果が得られるでしょう。
・ガンマ補正を 2 度かけることになるため、中間色が潰れてしまったり、大き目の丸め誤差が出る
中間色の階調が潰れてしまうことがあるのは、まあガンマの仕組み上、仕方ないでしょう。また私がプロットしてみた限りでですが、白色点の補正などより下手したら丸め誤差の方が大きいかもしれません。これは、PhotoShop の内部で 0 ~ 100 までの 101 通りの輝度しか保持できない Lab モードを利用しているからかなぁなどと無責任に妄想しています。
・そもそもこの係数って本当に ITU-R-BT709 なのか?
ガンマを 1.0 と設定すると一切ガンマ補正をやらない(ハズである)ので、その値をプロットしてみると、どうも
R = ( R ^ X ) * 0.222015
G = ( G ^ X ) * 0.706655
B = ( B ^ X ) * 0.071330
ではなく、
R = ( R ^ X ) * 0.22
G = ( G ^ X ) * 0.66
B = ( B ^ X ) * 0.11
くらいを利用しているように見えます(白色点 6500K で)。たしかに下の方が計算も高速にできそうですが、この係数を使う規格書は探した限りでは見つかりませんでした。というわけで謎は尽きません。

4. その他のグレースケール化の方法

1. 概要

今まで挙げた以外の、ほどほど実用になりそうなグレースケール化の変換方法を考えてみます。

2. 単純平均法 ( simple mean method)

そのものずばりの単純平均、つまり、R と G と B を足して 3 で割ったものです。

オリジナルの RGB イラスト例
オリジナルの RGB カラーパターン(色相)
オリジナルの RGB カラーグラデーション(色相)
オリジナルの RGB カラーグラデーション
オリジナル
単純平均でグレースケール化したイラスト例
単純平均でグレースケール化したカラーパターン(色相)
単純平均でグレースケール化したカラーグラデーション(色相)
単純平均でグレースケール化したカラーグラデーション
単純平均

この方法も心理物理量を無視しているのであまりいい結果は出ないものと思っていたのですが、イラストに関してはそんなに悪くもない結果が出ています。もちろんカラーバーは惨敗ですが。イラストでほどほどになる理由としては、カラーバーみたいにあっちこっちの色相を利用しまくってるイラストというのはあまり存在しない(つまり普通のイラストには、全体の色調というものがある)からではないかと思います。ただし、この単純平均法を PhotoShop で実現する手段は多分ありません

3. Gチャンネル法 ( Y = G method )

なんか名前を声に出して読むとマヌケですが、これはつまり、“RGB のうちの G、つまり緑の心理物理量が 7 割程度ともっとも大きいのだから、グレースケールにするときもこの値だけ(PhotoShop の G チャンネルそのもの)を使ってしまえばいいじゃないか”という、ものすごく大胆な割り切りによる手法です。他のどんな方法よりも高速に処理できることは予想できます。

オリジナルの RGB イラスト例
オリジナルの RGB カラーパターン(色相)
オリジナルの RGB カラーグラデーション(色相)
オリジナルの RGB カラーグラデーション
オリジナル
Gチャンネルのみでグレースケール化したイラスト例
Gチャンネルのみでグレースケール化したカラーパターン(色相)
Gチャンネルのみでグレースケール化したカラーグラデーション(色相)
Gチャンネルのみでグレースケール化したカラーグラデーション
Gチャンネルのみ

当然いい結果になるわけがないのですが、RGB のグラデーションは一瞬それなりのできに見えてしまいます。どうしても高速に処理しなければならないという場合のために、頭の隅に入れておいてもいいのかもしれません。

4. 中央値法 ( median value method )

R、G、B のうち、最大でも最小でもない真中の大きさの値を選ぶ方法です。この中央値が最大値か最小値と等しい場合に両者の平均を取るなどというようなことは、色がジャンプするのでやってはいけません。

オリジナルの RGB イラスト例
オリジナルの RGB カラーパターン(色相)
オリジナルの RGB カラーグラデーション(色相)
オリジナルの RGB カラーグラデーション
オリジナル
中央値でグレースケール化したイラスト例
中央値でグレースケール化したカラーパターン(色相)
中央値でグレースケール化したカラーグラデーション(色相)
中央値でグレースケール化したカラーグラデーション
中央値

中間値があるなら中央値があってもいいだろうという単純な思いつきでやってみたものですが、これを使うケースはほとんどないでしょうね。中間値を使う変換に意味があるのは、HSB モデルで B が利用されているからですし。ちなみにこれも PhotoShop で実現する方法はないと思います。

5. おわりに

1. 変換結果一覧

オリジナルの RGB イラスト例
オリジナルの RGB カラーパターン(色相)
オリジナルの RGB カラーグラデーション(色相)
オリジナルの RGB カラーグラデーション
オリジナル
中間値でグレースケール化したイラスト例
中間値でグレースケール化したカラーパターン(色相)
中間値でグレースケール化したカラーグラデーション(色相)
中間値でグレースケール化したカラーグラデーション
中間値
NTSC加重平均でグレースケール化したイラスト例
NTSC加重平均でグレースケール化したカラーパターン(色相)
NTSC加重平均でグレースケール化したカラーグラデーション(色相)
NTSC加重平均でグレースケール化したカラーグラデーション
NTSC加重平均
PhotoShopのコマンドでグレースケール化したイラスト例
PhotoShopのコマンドでグレースケール化したカラーパターン(色相)
PhotoShopのコマンドでグレースケール化したカラーグラデーション(色相)
PhotoShopのコマンドでグレースケール化したカラーグラデーション
PhotoShop(x=2.2)

単純平均でグレースケール化したイラスト例
単純平均でグレースケール化したカラーパターン(色相)
単純平均でグレースケール化したカラーグラデーション(色相)
単純平均でグレースケール化したカラーグラデーション
単純平均
Gチャンネルのみでグレースケール化したイラスト例
Gチャンネルのみでグレースケール化したカラーパターン(色相)
Gチャンネルのみでグレースケール化したカラーグラデーション(色相)
Gチャンネルのみでグレースケール化したカラーグラデーション
Gチャンネルのみ
中央値でグレースケール化したイラスト例
中央値でグレースケール化したカラーパターン(色相)
中央値でグレースケール化したカラーグラデーション(色相)
中央値でグレースケール化したカラーグラデーション
中央値

2. まとめ

  1. どの方法も一長一短ある
  2. CG の作成においては、中間値法でグレースケール化するのは意図的な場合を除いて避け、チャンネルや彩度レイヤー等を利用するか、グレースケール化のコマンドを使う
  3. NTSC の係数を利用する場合は、ガンマ、白色点(色温度)などの補正はすっぱり無視して見る人に任せる(つまり現状のウェブの状況)と幸せになれるかも
  4. HDTV 係数を利用する場合でも、ガンマを 1.0 と仮定してしまえば高速に処理できて幸せになれるかも

で、NTSC 係数と HDTV 係数のどちらを使うのが良いかということですが、参考文献によれば、現在のモニタ状況では HDTV の係数を使うべきなのだそうです。ですから、新規のプログラム等で利用する場合は、そうしとくのが良いのかもしれません。

では、PhotoShop で利用する場合には、チャンネルや彩度レイヤー等で NTSC 係数の変換をかけるのか、グレースケールコマンドを利用して HDTV 係数を使うべきなのかということですが、手元のディスプレイ用に 1.0 以外のガンマ補正がなされている場合(デフォルトでそうなっています)にグレースケール化コマンドを利用すると、複数回のガンマ補正によってちょっと階調の飛んだ、やや明るめのグレースケール画像が出来上がることになるだろうと思います。

というわけでこれはあくまで私の意見ですが、ウェブ用途の画像では、NTSC 係数を利用するか、グレースケール化コマンドをガンマ 1.0 でかけてから適宜自前でレベル補正などを利用して明るさを補正する、という方がいいんじゃないかなぁなどと思いますが、Adobe はそんな使い方は考えてないでしょうし、RGB の明度差が大きい画像でないとあまり差がでないので、正直 どっちでもいい んじゃないでしょうか。PhotoShop ファイルのままやり取りするような場合は、ファイルが補正情報を持っていますから、グレースケール化コマンドを利用した方がよいのかなぁと思います。

6. 参考文献

・David Bourgin's Color spaces FAQ
http://www.scarse.org/docs/color_faq.html
・Poynton's Color FAQ
http://www.poynton.com/notes/colour_and_gamma/ColorFAQ.html
・色のお話
http://anipeg.yks.ne.jp/color.html
Author : Mishiki Sakana <osakana@ofo.jp>
Last Modified : Mon, 15 Mar 2004 00:13:33 JST (+0900)


<CG Tips>

[ Copyright 1996-2023 Mishiki Sakana. Some Rights Reserved. ]