ヒトの見える色とコンピュータの見える色

さいえんす心

久々に数学倶楽部ネタを…といっても、あんまり数学は出てこなくて、どちらかというと物理なのですが…。まぁいいや。(笑)

今回は、ヒトの見える色と、コンピュータの見える色の差と、それらをどうマッチさせていくのか、というお話をしたいと思います。
え、それがどう数学と関係があるの？…ですか。(^^;)
ちゃんと数学は(ちょびっとだけど)でてくるので、細かい話はおいといてください。(笑)


ヒトは見える色を頭の中で分類しようとします。

　明るい色、暗い色。
　鮮やかな色、くすんだ色。
　暖かい色、寒い色…。

そしてその分類を体系化したもののなかには、マンセル体系だとか、オストワルド体系というのがあります。
形は多少違えど、高さで明暗を、横の広がりで鮮やかさを、円周で色相をという感じで、3次元的に色を分類している手法としては同じような手法です。

そう、ヒトは、明るさ・鮮やかさ・色相という3種類の要素で色を分類しようとしているのです。

さて、ヒトに対して、コンピュータはどうでしょうか。


コンピュータで色を表現しようとすると、光の三原色・R(赤)・G(緑)・B(青)の3色の組み合わせで表現します。
そして、その3色はそれぞれ、0〜255の256段階に明るさを調節することが出来、それぞれの明るさの組み合わせによって、256×256×256通りの色を表現することが出来ます。[組み合わせを遊べるサイト]
Webデザイナーさんなど、コンピュータ上で色を扱う方々は、この色調節とそれぞれの組み合わせに長けてらっしゃる…ということですね。(^^)


では、コンピュータはこのRGBの光の三原色のままで『色を分類しよう』と試みているでしょうか。
RやGやBという値だけをそれぞれ見ていても、ヒトが認知する色とは一致しないんですよね…。
例えば、右の画像の左側の「赤い部分が欲しいよー」と思ってR(赤い光)要素だけを取り出すと、右側のように真っ赤になってしまうんですよね。(^^;)
白を表現するには、R/G/Bがそれぞれ最大に近い値を示さないと表現できませんので、当然Rの要素も多大にあるわけですから、こういう結果になるんですよね。
というわけで、このような単純な方法じゃ分類は出来ないわけです。

そういうわけなので、コンピュータに色の分類をさせるためには、先に書いたヒトが知覚する色の体系である「マンセル」や「オストワルド」に似た形に変換してから、分類させる、という方法をとることが多いんですね。

でも、「マンセル」や「オストワルド」のような形とまったく同じ形状に変換が可能か、というと、そうは問屋が卸さない。
…いや、できなくはないのですが、RGBの組み合わせがこういうパターンの場合にはマンセルではここの位置に相当しますよ、という地図が必要になります。
地図を使ったマッピングという手法でもいいのですが、せっかくのコンピュータなんですから、ここはコンピュータの得意分野でやってみましょう。

コンピュータの得意分野といえば、そう、計算！ですね。
コンピュータが得意な計算で変換しやすい色の体系というのがあればいいんです。
…ああ、やっと数学がでてきた。(^^;)

計算で変換しやすい色の体系には、たとえば、こんなのがあります。(一例です)

　◆CMY RGBとは補色の関係で、印刷などで利用
　◆L*a*b*表色系 色の差(色差)がどこをとっていも一定になるよう、定義された色空間
　◆HVC/HSL/HSV マンセルをモデルにした色空間で、それぞれビミョーに色空間の立体図が違う

ヒトの見る色に近づけたいという意図であれば後者の2種類の色空間がよく使われますね。
CMYは印刷に使われることが多いのと、絵の具の世界なのでヒトにわかりやすい部分がちょっとはある…ということで使われることがあるぐらいでしょうか。(^^;)

では、変換式を使って、実際に「赤」がどの部分なのかを取り出してみましょうか。
例として、HSVで。RGBからHSVへの変換式は、次のようになります。

　V = max( R, G, B )
　S = ( V - X ) / V ただし X = min( R, G, B )
　Hは次の式で表される。
　R = V の場合　H = ( pi / 3 ) * ( b - g )
　G = V の場合　H = ( pi / 3 ) * ( 2 + r - b )
　B = V の場合　H = ( pi / 3 ) * ( 4 + g - r )
　ただし
　　r = ( V - R ) / ( V - X )
　　g = ( V - G ) / ( V - X )
　　b = ( V - B ) / ( V - X )

なにやら難しそう？
じゃ、簡単に…。(^^;)

H(色相)は0〜360(ただし、0=360)の値をとります。
0〜360という数字は、円が一周する時の角度だとピンとくれば上出来です。
0〜360という値のどの数値を取っているかで、大体何色なのかがわかります。

また、V(明度)は0〜255の間を取ります。
0に近ければ近いほど、暗い色…即ち、黒に近づき、255に近ければ近いほど、白に近づきます。

さらに、S(彩度)は0〜1の間を取ります。
0に近ければ近いほど、グレーに近づき、1に近ければ近いほど、鮮やかな色になります。

「赤」という色は、H(色相)が0周辺になる色のことで、S(彩度)がなるべく1に近く、さらにV(明度)がほどほどの値以上であればよいということになります。
そういう閾値を設けて、条件にあった部分のみ、色をつけてみると、こんな画像が得られるのです。


見事、赤い部分のみ取り出すことに成功しました♪

このように、HSVのそれぞれの値がどれぐらいの時にどういう色だとヒトが判断するのかをコンピュータに教えておいてやると、ヒトとコンピュータの見ている色が大体一致してくる…というわけです。
その教える作業というのは、ちょいと面倒なんですが…。(^^;) まぁ、そこはそれ。

こうやって、ヒトとコミュニケーションができるロボットの目が出来ていくわけですね♪ってことにしておいてください。

…長くなりましたが、今回はこんなもんです…。
長くてゴメンなさい…。(_o_)

【表色系関連WebPage】
●表色系変換 RGBからいろんな表色系に変換した場合の数値が算出できます
●色のお話 RGBからXYZ/L*u*v*/L*a*b*への変換式
●Prof. Miszalok - Color Coding RGB/CMY/HSLが視覚的にどうなっているかがわかりやすいかな
●HVC Chart - 解説 RGBからHVCへの変換式
●カラーモデル変換式　RGB to YMC・YMCK・HSV・HLS・YCbCr(YUV,YCC)・XYZ・YUV・YIQ
●W3CによるとCSSではHSL色空間を使える。何でHSLを使えるPaint/Drow系ソフトが多いんだろうと思ったら、こういうことだったのね…知らなかった…。orz

【関連しそうな記事】
●TB:見えてる色ってみんな一緒？ → みんな違うのよ。
●暖かい色は暖かい光を反射しているから暖かい