色調の変化

画像の色の色調を変化させる方法を紹介します。

グレースケール化

グレースケールでは白と黒及び、その中間(灰色)の色で色を表現します。
カラー画像画像をグレースケール化するには、画像のそれぞれの点の色をグレースケール化すれば良いことになります。

3バイトのRGBカラーでは白は(R:255、G:255、B:255)、黒は(R:0、G:0、B:0)で表現できます。
上記のように白と黒のいずれもRとGとBの値は同じ値になります。
このことから、白と黒の中間の色(灰色)はRとGとBの値を同じ値にすることによって表現できることがわかります。

RGBカラーで表現される色をグレースケール化する方法はいくつかありますが、一番簡単な方法は R と G と B のそれぞれの色の値の平均を計算し、それを R と G と B の値として採用するという方法です。
従って、グレースケール化を行う為に必要な計算は「足し算」と「割り算」だけで行えることがわかります。
この方法を使うことで、幾つかの色をグレースケール化したものを下の表に示します。
(補足:R,G,Bの平均は小数点以下は切り捨てています)

元の色 RGBの平均 グレースケール化された色
白色(R:255,G:255,B:255) (255 + 255 + 255) / 3 = 255 白色(R:255,G:255,B:255)
黄色(R:255,G:255,B: 0) (255 + 255 + 0) / 3 = 170 灰色(R:170,G:170,B:170)
赤色(R:255,G: 0,B: 0) (255 + 0 + 0) / 3 = 85 灰色(R: 85,G: 85,B: 85)
黒色(R: 0,G: 0,B: 0) (0 + 0 + 0) / 3 = 0 黒色(R: 0,G: 0,B: 0)
任意(R:255,G:255,B:255) (255 + 255 + 255) / 3 = 0 (R:255,G:255,B:255)

R:  G:  B:

上記のスライダーで表の一番下の行の色を変更できます。

画像のすべての点をグレースケール化することで、画像全体をグレースケール化することができます。
こちらのページの「グレースケール」のボタンをクリックすることで、画像のグレースケール化を実際に確認することができます。

補足: 人間の目は赤や青よりも緑色のほうが色の濃淡を区別しやすいという性質があります。そこで単純に R と G と B の数字を平均化するのではなく、次の式のように緑色の影響がより濃くでるように平均化するという方法があります。

R * 0.298912 + G * 0.586611 + B * 0.114478

上記の式を使ったほうが、単純に平均化した場合よりもグレースケール化した時の画像の濃淡がくっきりと見える場合が多いようです。
また、上記の式は一見複雑に見えるかもしれませんが、実際に使っているのは「足し算」と「掛け算」だけです。

特定の色調に変化させる

画像の色調を特定の色に変化させる方法は、グレースケール化とよく似ています(グレースケール化は色調の変化の一種です)。
例えば画像の色調を「セピア色」にするには、画像のすべての点の色を「セピア色」と「黒色」とその中間色に変換することで実現できます。

3バイトのRGBカラーではセピア色は(R:240、G:200、B:145)、黒は(R:0、G:0、B:0)で表現できます。
元の色の明るさに応じて、一番明るい白色の時にセピア色に、一番暗い黒色の時に黒色になるように色を変換すれば、任意の色をセピア色の色調に変換することができます。
色の明るさを R と G と B の色の明るさの合計と考えると、色の明るさの割合は以下の式で計算することができます。

(R + G + B) / (255 + 255 + 255) * 100 = (R + G + B) / 765 * 100(%)

例えば白色の場合、(255 + 255 + 255) / (255 + 255 + 255) * 100 = 100%
黒色の場合は (0 + 0 + 0) / (255 + 255 + 255) * 100 = 0% となります。

上記で得られた明るさの割合をセピア色の(R:240、G:200、B:145)のR,G,Bの数値にそれぞれ乗算すれば色をセピア調の色に変換することができます。
また、こちらの場合も「足し算」と「割り算」だけで行えます。

この方法を使うことで、幾つかの色をセピア色調に変換したものを下の表に示します。
(補足:明るさの割合、R,G,Bは小数点以下で切り捨てています)

元の色 元の色の明るさの割合 セピア調化された色
白色(R:255,G:255,B:255) (255 + 255 + 255) / 765 * 100 = 100% R:240 * 100 / 100 = 240
G:200 * 100 / 100 = 200
B:145 * 100 / 100 = 145
黄色(R:255,G:255,B: 0) (255 + 255 + 0) / 765 * 100 = 66% R:240 * 66 / 100 = 160
G:200 * 66 / 100 = 132
B:145 * 66 / 100 = 96
赤色(R:255,G: 0,B: 0) (255 + 0 + 0) / 765 * 100 = 33% R:240 * 33 / 100 = 80
G:200 * 33 / 100 = 66
B:145 * 33 / 100 = 48
黒色(R: 0,G: 0,B: 0) (0 + 0 + 0) / 765 * 100 = 0% R:240 * 0 / 100 = 0
G:200 * 0 / 100 = 0
B:145 * 0 / 100 = 0
任意(R:255,G:255,B:255) (255 + 255 + 255) / 765 * 100 = 100% R:240 * 100 / 100 = 240
G:200 * 100 / 100 = 200
B:145 * 100 / 100 = 145

R:  G:  B:

上記のスライダーで表の一番下の行の色を変更できます。

セピア調以外の場合でも同様の方法で色調を変化させることができます。
具体的には変換したい色調の R と G と B の色の値に色の明るさの割合を掛け算します。
上記のグレースケールの計算も、実はこの方法と全く同じ計算式で計算されています。興味のある方は確認してみてください。

こちらのページの「色調の変更」の右のボタンやスライダーを操作することで、左の画像の色調を様々な色に変更することができます。
上のスライダーで変更する色調のRGBを自分で設定することができます。


目次へ戻る