Home   カラーチャート   RGB、CMYの不思議←の続編   ←の解決編   ←の発展編   HSVの不思議 


不思議の色
 
RGB、CMYの不思議

光の三原色を全て集めると白くなり、絵の具の三原色は黒くなるのだと学校で教わったときには、なにか納得できないような気持のまま、光は透き徹っているから白で、絵の具は濁っているから黒くなるのだと勝手な解釈をしていました。こういった解釈の方法は子供の頃よくやっていて、月は満ちてくるにしたがって重くなるから、少しずつ月の出が遅くなるんだと思っていたり、地球儀を回しながら、南極はあまり動かないから寒いんだなと妙に納得してみたり、まあそれなりに合理性がないこともないのですが(笑)、でも、大人になった今、さすがにこれでは済まされません。カラーチャートを作った折でもありますので、色についていろいろ考えてみました。

おとなの方は途中を飛ばして、こちらからお読みください。→ 解決篇

RGBは Red Green Blue の光の三原色、CMYは Cyan Magenta Yellow で、絵具の三原色です。
パソコンではRGBそれぞれを256通り(8bit)の強さで表して、256×256×256=16,777,216 通りの色を表現することが出来ます。これは2の24乗ということで24ビットカラーと呼ばれることがあります。
ここでは、各1ビット ( all or nothing ) にして、3ビット(2の3乗=8色)で表してみます。
... ..B .G. .GB R.. R.B RG. RGB
 000   001   010   011   100   101   110   111 
Black Blue Green Cyan Red Magenta Yellow White

各々は、青 + 緑 = シアン (001+010=011)、青 + 赤 = マジェンタ (001+100=101)、赤 + 緑 = 黄色 (100+010=110) などのように足し算をすることができます。このようにRGB3色のうちの2色を足し合わせたものがCMYという関係になっています。3色を全部足すと白(111)になり、全てが無であれば黒(000)です。ここまではすんなり分るのですが、それでは、シアン + マジェンタ (011+101) や、黄色 + 黄色 (110+110) はどうなるんでしょうか。
もし、011+101=110、110+110=000 のようにになってくれれば、光の色と絵具の色の白黒問題は解決に向かいます。これは「排他的論理和」による計算です。

そうはいきませんでした。水色+赤紫=黄色、黄色+黄色=黒などとはまた突拍子もないことを考えるものです。その突拍子もない空想を図にしてみました。図にして呆れました。こんなことが現実にある訳がないです。未知の関係を解き明かしたような気持に一瞬なったのですが、そうではなかったみたいです。
色の足し算は「論理和」で計算すべきでした。
実際は、水色+赤紫=白(011+101=111)、黄色+黄色=黄色(110+110=110)です。
赤+緑=黄色を例に、この論理和を模式図にするとこんな感じです。黄色い光線を輪切りにした図と思ってください。

ところで、RとC (100 & 011)、GとM (010 & 101)、BとY (001 & 110)のように並べてみて、うまい具合に凹凸関係になっていることに気がつきました。
お互いに埋めあえば白(111)になる関係、一方を眺めた後に目をつぶるともう一方の色が見えてくる、補色の関係です。



  TOP 
続・RGB、CMYの不思議

また一からやり直しです。こんどはもっと根本的なところ、わたしたちが物を見るとき何を見ているのかというところから考えてみました。
物自体は光がないと見えません。では、わたしたちは光を見ているのでしょうか。もし光が見えるとするならば、空気中を透過していく光も見えなければならないことになります。光は見えないのです。光も見えない、物そのものも見えない、では何が見えているのか。見えているのは光が物に当たるときに起こる化学反応なのです。光は網膜を照らすときにも化学反応を起こします。物と光の相互作用的な現象を私たちは見ているのです。表面上、これは光の反射吸収と考えることも出来るのですが、そうなると吸収された光はその後どうなっていくのかという問題が残ります。吸収された光は蓄えられて、物の内部は光に満ち溢れているのだと考えるのも、たしかに楽しいことではあるのですが、光を吸収しすぎて麦藁帽子が破裂したなどという話は聞いたことがありません。やはり光は化学反応に費やされているのです。
マッチの炎や太陽などの光源もやはり酸化反応や核融合反応として光を発しているわけで、私たちに見えるのは光そのものではなく、その現象なのです。
何となく先が見えてきました。光の色と絵具の色は異質なんですね。この質の異なる二つのものが反応しあうことによって初めてわたしたちは物を見ることができるのです。

もういちど図を作ってみました。こんどは間違っていないはずです。光の色は「白い」スクリーンに投影されたときの色であり、絵具の色は「白光」に照らされたときの色、と言うことになります。

それでは、光の3原色を合わせると白くなるのに、なぜ絵具の3原色は黒くなるのかという最初の問題に戻ります。
光の3原色は、地球に届く太陽光を分解したものだろうから、それを元に戻せば太陽光の白(無色)になるだろうということはだいたい見当がつきます。でも絵具の3原色については謎です。これも元の色を分解したのだとすると、元来地球は真っ黒だったということになってしまいます。ふむ、ひょっとしたらそうかもしれない。

今、太陽の光を「白(無色)」と書きました。光源を見るときには白色に見えますが、スクリーンに投影されると無色であり、絵具の赤を照らせば赤く見えるし青を照らせば青く見えるということです。
それでは黒いスクリーンに白色を出すにはどうすればいいのか。光の量を増していって、絵具の色の反応を超える光で照らせばいいのです。どんなものでも真っ白になってしまいます。逆に白色光(111)でも光の量が少なければ、真っ暗でほとんど黒(000)と言っても構わないようになります。
赤や緑、青などは光の性質の違いですが、白(111)と黒(000)は光の量の違いだったのです。

一方の絵具の白も、絵具を塗らない状態ですから、これも無色です。画用紙の地の色が白であれば白(000)は白色ですが、画用紙が黒ければ白(000)も黒ということになります。

いよいよ答えが見えてきました。結論を導き出す前にもうひとつ、黒い画用紙に白い模様を描くにはどうすればいいのかを考えてみたいと思います。白い絵具などはありません。あるのはシアン、マジェンタ、イエローの3色だけです。ここまで来ればもう簡単ですよね。白と黒は量の違いに過ぎないのですから、CMYを足し合わせて出来た黒を、とにかく重ねて塗っていけばいい訳です。とにかく量が問題なのですから、絵具を惜しまずどんどんどんどん塗っていって、諦めずにさらにどんどんどんどん塗っていけば、いつかは白く輝くはずです。

結論です。光の色と絵具の色とは基本的に異質なものです。色の合成に於いてもそれぞれに違ったメカニズムが働いているものと思われます。ですが、白と黒に関しては、光と絵具の違いを超えて性質的にまったく同質でした。3原色を足し合わせて白になるか黒になるかは量の違いに過ぎなかったのです。絵具の3原色で黒くなったのは、単に絵具の量が少ないからなのでした。
めでたし



おとなになったと思っていたけど、わたし、まだ子供なのかもしれません。
誰かおとなの人でこの問題を解決してくれる方はいませんか。




  TOP 
RGB、CMYの不思議 解決篇 (現実を生きるおとなの人のために)

このままではカラーチャートの信用まで落としてしまいそうですので、勉強いたしました(笑)。
写真のポジフィルムとネガフィルムもRGBとCMYの違いなんですね。
ネガとポジであれば相互に変換可能な関係です。逆立ちして裏返って後ろ向きに鏡を覗き込んだら普通に見えた、みたいなことなんですね。ほんとか(笑)。
それはともかくとして、CMYによる合成はRGBのネガのような合成法だったのです。


加算法(RGB)と、減算法(CMY)

RGBとCMYの違いを模式的に見ると、RGBがそれぞれ色のついた3本の光源であるのに対して、CMYは1本の白色光源の前に重ねられた3枚のフィルタだと言えます。要素を積み重ねて全体に至るのか、全体を分解して要素を導き出すのか、という違いです。
ここでも3ビット8色の環境をモデルとして考えていきます。24ビットの場合、加算法では光の強さがRGBそれぞれに256通りあり、減算法ではフィルタの濃さがCMYそれぞれに256通りあると考えてください。

加算法は、懐中電灯にRGBのカラーキャップをつけてスクリーン上の一点に照射するイメージです。RGBの順に点灯していけば、スクリーンに映し出される光は赤、黄、白と変化していきます。点灯している懐中電灯の数が増えればその分明るさも増大します。

これに対し、減算法は光源を1つだけ使って、白色光を分解していくやり方です。加算法では光を3分の1ずつ足していきましたが、こんどは3分の1ずつ引くことになります。もしここで赤いフィルタを使ったとしたらどうでしょうか。赤いフィルタは赤を透過させるために青と緑を遮断しますので、一挙に3分の2を引くことになってしまい、8色環境ではもうこれ以上の色を作ることは出来ません。光を分解していく作業では、合成の単位であるRGBは最終目標値となるのです。(註1)
ここではRGBのうち1色だけを引くようにしなければなりません。赤を引くとしたら、青と緑を透過させるのですから、シアン(青+緑)のフィルタにすればいいのです。同様に緑を引くならマジェンタ、青を引くならイエローです。減算法の3原色CMYはそれぞれ補色の関係にあるRGBを遮断するフィルタなのです。

それでは減算法で色の合成をやってみましょう。まず黄色いフィルタを掛けてみます。当然黄色く見えますが、これは青を減算した色で赤と緑の要素を持っています。ここにマジェンタを重ねると、これは緑を減算するフィルタですから赤だけが残ることになります。黄色+マジェンタ=赤です。さらにシアンを重ねると、これは赤を減算するフィルタですから、もう透過できる光はありません。黄色+マジェンタ+シアン=黒です。
おお、みごとに黒になりました。フィルタは決して濁ってもいませんし、無数に重ね合わせたわけでもありません(笑)。(註2)

以上、光の色として考えてきましたが、絵具の色もこのフィルタと同じ働きをすると考えられます。反射吸収説には賛成できないものの、とりあえず、黄色の絵具は青を吸収して赤と緑を反射するフィルタです。絵具は光源ではないので加算法はあり得ません。


◇ 註2:懐中電灯を例にとりながらもこれは理論的なお話ですから、遮断すべき色は100%遮断し、透過させるべき色は100%透過させる理想のフィルタを使っています。ですから、同じ色のフィルタは1枚も100億枚もまったくの同値です。無数に重ね合わせたからと言って、色や明るさに変化が生じることはありません。(笑)
◇ 註1:同様に、赤いフィルタに赤やイエロー、マジェンタのフィルタをどれだけ重ね合わせても出力される赤に変化は起こりません。それ以外のフィルタを重ねるとまったく光を通さなくなります。


  TOP 
色の合成と演算

右の図では、統一的に色の関係が分るようにCMYもRGB値で表しています。
減算法の図は色の包含関係を表現するベン図にもなっています。全てに共通する要素の黒(000)は空(Φ)ということです。加算法の図はそれを裏返して見ているようなもので、要素(RGB)を集めて全体(白)を形作っている図と言えるでしょう。減算法の図を中心から外側に向かって見ているわけです。そうやって見ると、加算法の合成が論理和で表されているのが分ります。赤と緑の合成は「赤∪緑=黄色」です。
先ほどの減算法による色の合成では遮断する色を引いていきましたが、これは、それぞれが透過させる色のなかの共通要素だけは最後まで透過すると言うことでもありますので、黄色とマジェンタの合成は「黄色∩マジェンタ=赤」と論理積で表すことができます。

ちょっとややこしくなりますが、右図のようにCMYを主体にした値で考える場合、これは遮断する色を引いていくときのRGB値です。透過する色にとっては補色の値であり、否定値ですから、「黄色 ∩ マジェンタ = 赤」という論理積が 「黄色の否定 ∪ マジェンタの否定 = 赤の否定」のように遮断の論理和で表されることになります。
更にややこしくなりますが(笑)、もう少し一般化すると次のようになります。

( 赤と緑の論理和 )=(( 赤の否定と緑の否定 )の論理積 )の否定

( 黄色とマジェンタの論理積 )=(( 黄色の否定とマジェンタの否定 )の論理和 )の否定

遥か昔に学校で教わったような関係式がこんなところにまで現れてきました。
論理積は積集合(交わり)、論理和は和集合(結び)を指します。否定は補集合であり、補数であり、この場合は補色になっています。
ややこしいので、色の合成パターンを作ってみました。


 

3原色の合成  要素ごとに16進数2桁で入力、または色の領域をクリック
 加算法 RGB Red
Green
Blue

 
RGB
  
  




  


 減算法 CMY Cyan
Magenta
Yellow

 
CMY
  
  




  
(RGB値)
2色の混合  16進数6桁で入力、または色の領域をクリック
 加算法 RGB # # #   
  




  
 減算法 CMY # # #   
  





     (RGB値) # # #   
背景色   おまけ   


色の表示には IE 5 以上のブラウザが必要です。
合成した色をクリックすることでも背景色を変えることができます。

おまけがつきました。RGBの各要素ごとに次のような処理を行います。
 ∩ ‥ 論理積  小さいほうの値を取り出します。 Math.min(A,B)
 ~| ‥ 論理和の否定  全体(ff)に対する大きい値の補数です。
 ~& ‥ 論理積の否定  全体(FF)に対する小さい値の補数です。
 ^ ‥ 排他的論理和  論理和−論理積、(A−B)の絶対値、隔たり値です。
 + ‥ 合算  全体値(ff)を超えたら ff と見なします。
 A ‥ 平均  足して2で割ったものです。
 R ‥ ランダム  2色の間をうろうろしながらランダムに値をとります。

簡単入力(IE 5 以上)
 各要素の色をクリックしてください。クリックする水平位置で 00〜ff が決定します。
 3要素を含む場合、垂直位置によって RGB、CMYのどの要素であるかが決まります。
 これと同じ仕組みでサイズの大きいものを作ってみました。
 RGBとCMYの関係は、こっちのほうが分りやすいかもしれない。


RGB  90  8c  73     CMY  6f  73  8c

 



 



noir  -     -  blanc




 TOP 
 
HSVの不思議

色の指定方法にもうひとつHSVというのがあります。Windowsの色の設定はこのHSVで指定するんですが、でも長いあいだこれが意味不明でした。

この両端の赤と赤を繋ぎ合わせれば円盤になるんだろうとは思っていたのですが、なるほど、繋いでみて納得です。色相円環だったんですね。むかし美術の教科書でこんな図を見たことがあります。円の中心を通って向かい合う色は互いに補色の関係でした。Hが色相、Sは彩度、Vは明度です。
そう言えばテレビの色の調節も色相、色調、明度の3要素でした。ははあん、これだったのか。


色相は60度ごとに赤(ff0000)、黄(ffff00)、緑(00ff00)、シアン(00ffff)、青(0000ff)、マジェンタ(ff00ff)と並んでいます。円の中心に向かってSの値が下がるとこれらの 00 が最大値(ff)に向かい、RGB値は均質化していきます。また、Vの値が下がると最大値である ff が 00 に向かい、ここでもRGB値の幅は狭まることになります。


HSV、RGB変換 
 
H 
S 
V 

 
 背景色 色の外枠  
パレットに入れる取り出す 入れる取り出す 入れる取り出す 入れる取り出す 入れる取り出す
  HSV→RGB RGB→HSV  R  
-+ 
G  
-+ 
B  
-+ 
%
 
 





Red  
Green  
Blue

Hは角度(0〜360)、SとVは百分率値(0〜100)とし、小数点以下も有効です。
RGBは16進数2桁で入力、または上の枠内をクリック。


変換は60度ごとに分けて考えます。
Hの値が0〜60度の場合です。まずSとVの値を100として、RGB値を百分率で表すと、
  R=100、 G=(60度までの角度割合)*100、 B=0、です。
ここにSの値を加味すると、
  R=100、 G=100-S*(60度から0度に向かう角度割合)、 B=100-S、です。
更にVの割合を掛けます。v=V/100とすると、
  R=100*v、 G=(100-S*(60度から0度に向かう角度割合))*v、 B=(100-S)*v、
これを0〜255に投影するとRGB値(24bit)になります。
60度から120度、120度から180度と、同じような発想で(ちょっと違う)処理を繰り返しますが、以下省略します。
なお、変換についてはこちらで公開されている方法に拠りました。







 


白地に黒い文字などはすっきりしていて感じもよく読みやすいのですが、背景と文字のコントラストが強すぎると目は疲れます。暗い部屋で見ていたりすると目の負担はいっそう大きくなります。
このページの背景色は空五倍子色(うつぶしいろ)と言います。ホームページの背景としてはあまり見かけない色かもしれません。目に優しく、読みやすくて、暗くならない色にしたいと考えて空五倍子色を選んでみました。ただ、このような中間色はモニターによってはうまく発色できないことがあるかもしれません。むつかしいところです。






かめゐ
 ColorChart Home 
 Page Top