【テスト版】お絵かきギャラリーコミュの【今さら聞けない！】色のお話。

ども。
名だけ管理人のtez.です。

Photoshopの話をしろと言われたんだけど、レタッチャーでもなんでもないので、実はあんまり詳しくはわからないのだ。
てか、ホントはPhotoshop嫌いのなのだ。
仕事で使わなきゃならないから使ってるだけでw

とかいう前置きはともかく。。。

Photoshopに限らずデジタル画像作成の不思議なところは、CMYKとRGBが混在してるってことだ。

そもそも人間の目はRGBで色を見ているのだから、実はRGBが基本だとも言えるのだけど、物心つかない頃から色鉛筆やら絵の具を使ってお絵描きしている人間（ひいては印刷関係の仕事してたり）には、どうにもCMYKが基本のように思えるから困ったものだ。

そんなわけでここではつらつらと色の話なんかしてみようと思うのだが、文字が嫌いな人はぜひスルーしておいていただきたい。

活字中毒万歳。

コメント(32)

最初
全て
最新の40件

[2] mixiユーザー 07月09日 15:58

【そもそも色ってなんだ？】

太陽光の中には全ての色が入ってるのはみなさんご存知のはず。
プリズムで分解するやつだ。
いうまでもなく色=光なのね。
だから光のないところは色が見えない（=黒）。
色素っていうのは、その光のなかの特定の色を反射し、あとは吸収してしまうものだというのもご存知のはず。（合成色はめんどくさいからこの際無視するよ）

赤いリンゴは全ての光を吸収しながら赤い波長だけ跳ね返しているってことね。
逆に言えば赤だけ通すフィルターを通した光が、赤い光ってことになる。
赤い光には赤以外の要素は含まれないので、それで照らしたものは赤を反射させてくるしかないので、赤く見える。
もちろん赤を吸収するものは黒く見える。

あのにっくき（？）パトランプのケースは、光を赤く染めているのではなく、赤以外の光を遮断しているものなのである。

つまり色の元は光である。そして、
フィルターを通したりして色調を加減する、光の作る色が「RGB」カラーであり、
また、それを反射する色素で作る色が「CMYK」カラーってことだよね。

なんかうまくいえてないけど、まあ、そんな感じのもんだわよ。。。。多分。

[4] mixiユーザー 07月09日 16:23

【色の三原色/CMYKカラー】

さて、子供の頃に一度は聞かれたことのあるだろう質問
「色の三原色ってなーんだ？」

もちろんこれは信号の「赤」「青」「黄色」である。
まあ、信号の青は青いのか、とか、発光してるのに色の三原色でいいのか、とか無駄なツッコミは置いておく。（結論から言えば、「いい」のだが。）

お互いの色を足して色相を作る。
全て足したら黒（に近い）。

「白は？」とか言われそうだけど、確かに白の絵の具はあるけど、彩度の明度の問題まで話し始めるととんでもないことになるので、この際ちょっと置いておく。

お絵かきや印刷などでは三原色で完全に再現できない黒を足して「CMYK」としている。
（4色で再現できない金銀や蛍光色などの「特色」もこの際置いておく）

「赤、青、黄色」「混ぜれば黒くなる」
そんな非常に直感的で馴染みの深いカラーモードが「CMYK」である。

[5] mixiユーザー 07月09日 16:37

【光の三原色/RGBカラー】

逆にLEDとかメジャーになった今日聞かれることもあるのが
「光の三原色ってなーんだ？」
もちろん光の三原色を知った人が、「赤青黄」と答えてくれることをワクワク期待しながら発する質問ねw

これが「赤（Red）緑（Green）青（Blue）」の三色。
この3色の混色で全ての色が作られる。

直感的にわかりにくいのは「全てを足すと白」になり、「全てをなくせば黒」になることか。
足すとマイナス（色がない白）、引くとプラス（強い黒）っていうのが、絵の具感覚ではちょっとわかりにくい。

でも、コメ[2]で言った通り「光がなければ闇」と考えればストンと納得できるし、四方八方からいろんな色をバシバシ照射されたら眩しく真っ白になりそうな感じもわかるんぢゃないかなw

ちなみに、ビー玉を虫眼鏡がわりに、電源つけたテレビをのぞいてみるとRGBの素子がみっちり並んでいるのが見える。
黒い部分は何も発光がなく、白い部分はRGB三色が光っている。
その他の色の部分はそれぞれ3色が見えたり見えなかったり。
これ見てるとなんかスゲー楽しいから、一度やってみようw
（ただしあまり長時間やって目が悪くなっても知らない）

「赤、緑、青」「混ぜれば白くなる」
そんなちょっと分かりにくくも、色の源である光の基本カラーモードが「RGB」である。

[6] mixiユーザー 07月09日 16:47

ちなみに

「CMYK」では、各々を%で表現する。
「C=0、M=100、Y=100、K=0」なら「赤」である。

一方「RGB」は各々を256階調で表現する
「R=255、G=000、B=000」で「赤」である。
（※「256階調なのにMAX255なの？」という問いには「000があるでしょ？」って答えてあげようぜ！）

また、256階調を2桁の16進法（0～F）に落とし込んで
「#FF0000」なんて書いても「赤」。
主にWeb現場などで使われる表現である。

[7] mixiユーザー 07月09日 17:24

で、さっきのね、混色の図を見比べてみると....

[8] mixiユーザー 07月09日 17:28

ちょっと片方（CMY（K）にしてみよう）を裏っ返してかたむけてみたりすると、わかるかな？

[9] mixiユーザー 07月09日 17:29

ここに出てくるものって同じなんだよね。

[10] mixiユーザー 07月09日 17:38

RGB三原色のそれぞれの色は、複数の要素の幅を持っている収束された色なのね。
（Rはマゼンダからイエロー、Gはイエローからシアン、Bはシアンからマゼンタ）
対してCMY（K）は、他の色が持ってない単独要素なのよ。

RGBは各色が混ざることで、それぞれ持っていない要素を打ち消していく。
CMY（K）は、それぞれが補い合っていく。

文字通り、RGBとCMY(K)は、表裏一体の構造ってことなのね。

よくわからんけど、直接光と反射光ゆえなのかしらね。。。

[11] mixiユーザー 07月09日 17:43

と、ここまで長々と書いたのはなんでかというと、
Photoshopのレイヤー効果で、
例えば「乗算」「スクリーン」「オーバーレイ」といったモードの使用や、チャンネルの活用をするときに、密かに根底にある概念だからなんですね。

まずはわかってることの再確認。
大事、大事ですよ。

[12] mixiユーザー 07月09日 18:14

仕事が早いっ(*ﾟ▽ﾟ)ﾉ！　ありがとうございます。取り急ぎ御礼まで。これから夕食の支度ですのでのちほど熟読させていただきます。

[13] mixiユーザー 07月09日 18:31

>>[12]
こっちもご飯食べようかと思ったら、また鬼に石山を崩されたんで、また後程。

[14] mixiユーザー 07月09日 20:19

なんか余計に分かりにくくなった気もするので、RGBをまとめます。

はじめに信号の話ししたけど、虹の色って地域によって3色から8色とかバラバラぢゃない？
日本では7色だけど、アメリカでは（旧appleロゴも）6色だし、それを大まかにグルーピングして、「ここからここまで赤、ここまで緑、ここまで青」って分けたのがRGBの概念。（左図）
もちろん真ん中にいるリーダーがR、G、Bなのはいうまでもないけど。（中図）

試しにRとGを混ぜた場合（右図）
この中で一番勢力を増やすのは黄色くんだよね。
これがR+G=Yellowになる仕組み。

こう考えると、RGBも足し算って考え方で行けるねw

[15] mixiユーザー 07月09日 20:33

さらに良くみると、RチームとGチームの黄色くん以外は、実は補色の関係にあるんだよね。
つまり自分の反対、自分が持ってない色のお友達だ。

光は全色混ぜると.....白になっちゃうんだよね！
つまり補色同士が打ち消しあって、残った黄色くんだけ目に見える。

そんな風に考えればいいのかもしれない。（これが引き算の理屈かな）

[17] mixiユーザー 07月09日 20:47

>>[15]
補色は。。。ほぼ補色、なのかな?
ま、あくまでも「こんな感じっ!」位にとらえといてくださいませ。
紙媒体のひとなので。。。(←逃げた)

[18] mixiユーザー 07月09日 21:37

>>[17] ここまで昔の色彩検定３級（受けてみた）の教本よりわかりやすいです。

[19] mixiユーザー 07月09日 22:57

>>[18]
正しいかどうかわからないけど、経験則から逆引きのロジックがこんな感じなだけw
先に知識があるからわかるんですよ、きっとw

[20] mixiユーザー 07月10日 00:22

ま、これまでが「色相」のお話ね。

****************************
ここに「明度」がかかってくると、明るい色と暗い色ができるよね。

CMYKなら単純に混ぜればどんどん濃くなるんだから
c100+m100+y100+k100が一番濃い黒。（←印刷屋に怒られる配分）
数値が多いほど明度は下がり、少ないほど明度が上がる。

RGBで一番黒い黒は....電源入れないテレビだよね。つまり
R0+G0+B0が一番暗くて、数値が上がるとどんどん明度は上がり、最後には白になるって話。

*****************************

さらに「彩度」ってーのがあって、読んで字のごとく鮮やかさなんだけど、

要は純粋な色（「c100+m0+y+0」とか「R255+G0+B0とか」）ほど「彩度が高く」なり、
逆に他の色が混ざるほど「彩度が低く」なる。

CMYKで考えると分かりやすいけど、白が混ざろうと黒が混ざろうと他の色が混ざろうと、絵の具は濁るよね。
彩度は、いわゆる原色から明るくなっても暗くなっても落ちるのがポイントかな。

[21] mixiユーザー 07月10日 00:32

さ、ここまで頑張ってついてこられた我慢強いひと(もしくは活字中毒患者)は、もう一回Photoshopを開いて、モードメニューを覗いてみよう。
チャンネルミキサーやら、色相彩度やら、明度やら、そんなところの理解度もさらっとあがってるハズだ。

(もしくはそんな風な気になってるハズだ)

[24] mixiユーザー 07月10日 02:03

さて、今夜はもう疲れたので、
その実践編を見て終わりにしよう。

どこかで見た絵があります。（左図）
RGBモードで作成された絵です。

では、チャンネルを見てみましょう。
（右図）
上段：左=RGB（表示画面）、右=Rチャンネル
下段：左=がGチャンネル、右=Bチャンネル

吹き出しは、B、Gチャンネルは黒く塗り潰されて光の透過を完全ブロック、Rだけ通過できるよう白くなってるのがわかるよね。つまり見える色は赤だ。

では、バックの青は...（ちょっとどうなってるか考えてみよう！）
----------------------------------------
----------------------------------------
----------------------------------------
そう、
Bのみ透過（白）で、RGブロック（黒）だ。

では、「久々にィ」「イエ～～ィ！！」の黄色は？？？
----------------------------------------
----------------------------------------
----------------------------------------
さっき例を出したよね、R+Gだった。
チャンネルを見るとR、Gチャンネルは白く抜けて、Bチャンネルは黒塗りブロックだ。

口（歯）は白だから全てのチャンネルが透過しているのも良くわかるね。

これがRGB チャンネルの構造だ。

ではCMYKではどうなってるかといえば、それは次回のお楽しみ。
でゎ！

[26] mixiユーザー 07月10日 13:44

ちょっとわかりにくかったので[22]コメを削除しました。
内容は分かりやすく書き直しますねー。

[28] mixiユーザー 07月10日 16:32

[24]の続き
さて、同じ画像をCMYKモードに変換します。（画像左）
ここでこれを構成しているチャンネルを見て見ると（画像右）

これは非常に分かりやすいですね。
上からインクを重ねて、混色している感じです。

吹き出しの赤は、M100+Y100。
バックの青は、C100+M50。
口は白。
文字の黄色は............

あれ？Cが5％くらい混じってるの、気づきました？

これが「RGBをCMYKに変換した時に色がくすむ」って現象です。

さらに黒に注目すると。
例えば顎下の影です。CMYKみんな黒です。
いや、むしろKチャンネルが薄い。。。

RGBの画像をCMYKにモード変更すると、こんな風に無理やり混色で近似値に変換するのです。
もともとの光の色は、絵の具で表現できないってことなんですね。（あたりまえ）

じゃあ、これをRGBに戻したらどうなるのか...
とかいってたら、いけね、サッカーの時間だ。行ってきますw

続きを乞うご期待！（←誰が？）

------------------------
一文字間違えるとコメ削除するしかリカバーできないのつらいわねw

[29] mixiユーザー 07月10日 21:25

でゎここで、

>>[24]のRGBでの口の部分（白）と、
>>[28]のCMYKでの口の部分（白）を見比べてみてほしい。
どちらも全てのチャンネルでデーターはない（白い）。

逆に
>>[24]のRGBでの顎下の部分（黒）と、
>>[28]のCMYKで顎下の部分（黒）を見比べてみてほしい。
どちらも全てのチャンネルでデーターがある（黒い）よね。

では、バックの青はどうだろう。
>>[24]のBチャンネル（右下）。青い部分は...白い（データがない）。
>>[28]のCチャンネル（左上）。青い部分は...黒い（データがある）!!??

白黒は同じなのに、色がつくと逆転する？？

さあ、この謎が解けるかな？

[30] mixiユーザー 07月10日 22:27

さて、解答だ。

RGBモードの場合、各チャンネルはその色を透過させるフィルターだと考えてみよう。
Bのチャンネルで白くなっている部分はBの光の進行を邪魔しない部分だと考える。
（データが乗っていれば遮断される）
もともと全色ある光から、フィルターごとに減色を行い、残った色が『表現された色』。
ってことになる。（左図）

CMYKモードは逆に、何もないところに色をつけていく。
Cのチャンネルにデータがあれば（黒ければ）、そこでCの要素が足される。
4チャンネルの色が加算された結果が表現された色ということになる。（右図）

---------------------------------

RGBでの「白」は。全ての光を混ぜた色（何も遮断しない色）だったよね。
だから全てのチャンネルで光を遮るデータがない。

CMYKでは、何も塗らないが「白」だ。
だから全てのチャンネルでデータがない。

見た目は同じだけど、全く逆の理屈がここにある。

--------------------------------

そしてもっとも厄介なのが「黒」。
RGBでは「R0+G0+B0」が黒だけど、
CMYKでは「K100」でも黒だし、CMYのどれかが、どれだけ入ってても、全部100でも黒なのです。
※印刷業界では最も濃くてもc60+m40+y40+k100がリッチブラックとして推奨されてます。
（↑こう書いておかないと副管理人の目に触れたらに怒られるから書いとく）

ちなみにイラレで、「K100」の黒をRGBスケールで見てみると「R35+G24+B21」と表示され、
「C60+M40+Y40+K100」でようやく「R0+G0+B0」になります。
黒はそのくらい厄介なのです。

[31] mixiユーザー 07月10日 22:33

だから、RGBからCMYKに変換してしまうと、画像処理が面倒になる場合があります。
「だったらまたRGBに戻せばいいぢゃん！」
とか思っても、一度CMYKに変換してしまうと、綺麗なRGBには戻らないのです。

>>[28]のCMYKデータを、再度RGBに変換したもののチャンネルがこちら↓
>>[24]の各チャンネルと比較すると、雑味が多いのがわかる。