紙のデザインを中心にされている方はCMYKで色を扱うことが多いと思います。たまーにウェブをやったり、紙からウェブへ移行したての方の中には、RGBで色を扱うことに抵抗がある（あるいはまだ感覚がつかめていない）人もいたりするでしょう。自分も元々は紙デザインから入った人間なので、そのあたりの気持ちはよく分かります。ここでは、RGBカラーの扱いにおける抵抗感を少なくするため、CMYKとRGBの関係を簡単に解説してみようと思います。（あくまでも理屈上のざっくり解説です）
01三原色と混合について
まず、CMYKとRGBの話において欠かせないのがこれ。
この手の話になると必ず出てきますね。これは、三原色の混合を表した図で、それぞれを「加法混合」、「減法混合」と呼びます。このあたりは紙デザインをされている方なら、ある程度理解できていると思いますが、簡単に言うとそれぞれの原色が混ざり合ったときに何色になるのかを表しています。理屈上、光の三原色すべてが交われば「白」、色の三原色がすべて交われば「黒」になります。この大前提が分かっていないと色の話は難しいです。ちょっとぐぐれば簡単なものから詳しいものまでたくさんの解説が見つかりますので、詳しく知りたい方はいろいろ見てみてください。
- 原色 - Wikipedia
- 光と色の三原色｜いまさら聞けない!? 印刷・DTPの基礎知識｜クリエイターズ広場｜OKIデータ
- SciTech web — 色と光の三原色 ～三原色定食～
- 色のこと 三原色と色相・明度・彩度・トーン - ルーニーズ | LOONEYS
実際のインクでは、軽微な誤差や不純物、その他諸々の影響によって、【シアン】、【マゼンタ】、【イエロー】の3色を混ぜても完全な黒にはなりません。印刷においてそれを補うのが【ブラック】のインクです。そのため、理屈上の色の話では【ブラック】は省いて考えます。
02色を認識する仕組み
次に、色というものがどのようにして認識されるかを知っておきましょう。
すべての色は最終的に人間の目に光として入ってきます。真っ白なテーブルが白く見えるのは、RGBすべての光が反射されて目に入ってくるためです。先ほどの「加法混色」の図を見て分かる通り、光の三原色すべてが入ってくれば、それは当然「白」として認識されます。
では、この白いテーブルに【マゼンタ】のインクをのせた場合はどうでしょうか。後で解説しますが、【マゼンタ】の色は光の三原色のうち【グリーン】の光だけを吸収します。【グリーン】の光が吸収されることで、残る【レッド】と【ブルー】の光だけが反射されて目に届き、それが【マゼンタ】という色として認識されます。つまり、理屈の上では【マゼンタ】＝【レッド】＋【ブルー】ということです。
03CMYKとRGBの関係
先ほど、“【マゼンタ】の色は光の三原色のうち【グリーン】の光だけを吸収する”と書きました。これはどういう法則で決まるのでしょうか。それは「十二色相環」を見れば一目瞭然です。これも色についての話ではよく登場します。連続する色相を12種類に分類し、それを円状に均等配置したものです。
下図の中央を見ても分かる通り、十二色相環では、【マゼンタ】と【グリーン】は相反した場所に位置しています。このように、十二色相環において反対に位置する色同士を「反対色」や「補色」と呼びますが、この2色はまさにその関係にあります。つまり、反対色にあたる光を吸収するということです。同様に、【シアン】は【レッド】、【イエロー】は【ブルー】を吸収します。
分かりやすく表にしてみました。各インクがどの光を吸収し、その結果どの光が目に入ってきて色が認識されるのかが分かりますね。
| 色 | 吸収される光 | 反射されて目に届く光 |
|---|---|---|
| シアン | レッド | グリーン／ブルー |
| マゼンタ | グリーン | レッド／ブルー |
| イエロー | ブルー | レッド／グリーン |
なお、吸収される光の量は色の濃度によって変わります。例えば、【マゼンタ】の濃度が100％なら光を100％吸収してしまうので、【グリーン】の光は全く反射されませんし、【マゼンタ】が30％なら【グリーン】は30％だけ吸収され、残り70％反射されて目に届きます。
70％の光というのは8ビットで言うところの約180ですので、「M：30％」は「R：255／G：180／B：255」と言い換えることもできるでしょう。（あくまでも単純計算です）
04RGBでCMYK的な色補正をやってみよう
CMYKでの色の扱いに慣れていると、写真の色補正で「シアンをもう少し強くしたい」とか「イエローが強いので抑えたい」というように考えてしまうことがあります。PhotoshopでモードをCMYKカラーにして作業すればいいのですが、それを言っちゃうとこの記事の意味がなくなるので、そのような要望をどうRGBカラーに反映すればいいかを考えてみます。
例として、上図のように写真の【シアン】を少し強くするケースを考えてみます。先に説明した、各色が吸収する光と目に届く光を考えれば簡単です。なお、この写真は下記よりダウンロードできますので、実際に作業される方はご利用ください。
実践-A【レッド】で補正する
【シアン】は【レッド】の光を吸収しますので、【シアン】の色味に関係するのは【レッド】ということが分かりますね。先の項目で書いた通り、【シアン】が濃くなるほどに反射される【レッド】の光は少なくなります。これを言い換えれば、【レッド】の光を弱くするほど、相対的に【シアン】が濃くなるということです。
実際に試してみましょう。モードがRGBカラーの写真をPhotoshop、またはFireworksで開きます。Photoshopの場合は［イメージ］→［色調補正］→［トーンカーブ…］、Fireworksの場合は［フィルター］→［カラーを調整］→［カーブ…］を選択します。
［チャンネル］を［レッド］に変更し、カーブの中央あたりを下方向にドラッグして【レッド】を弱くしていきます（画面はPhotoshopですがFireworksも同じです）。そうすると、全体的に【シアン】の色味が強くなるのが分かるかと思います。
実践-B【レッド】以外で補正する
［実践-A］の考えとは逆に【レッド】以外の光の量を調整することでも【シアン】の色味を変えることもできます。【シアン】は、RGBから【レッド】が吸収された結果なので、【シアン】＝【グリーン】＋【ブルー】と考えられます。つまり、【グリーン】と【ブルー】を同時に補正することで、【シアン】を補正するのと同じことになるのです。
これも実際に試してみましょう。今回は複数のチャンネルを同時に操作するのでPhotoshopのみです。［チャンネルパネル］を開き、shiftキーを押しながら［レッド］のチャンネルをクリックします。［レッド］チャンネルの選択が解除されて、［グリーン］［ブルー］だけが選択された状態になりました。
このままだと［レッド］チャンネルが抜けた状態の表示になっていて色が分かりづらいので、［RGB］の目のアイコンをクリックして表示を通常に戻しておきます。［チャンネルパネル］が右側の図のようになっていればOKです。
この状態で［イメージ］→［色調補正］→［トーンカーブ…］を選択すれば、［チャンネル］の項目が［GB］になっていることが分かります。これは、【グリーン】＋【ブルー】を同時に編集するということです。カーブの中央を上方向にドラッグして【グリーン】＋【ブルー】を強くすると、全体的に【シアン】の色味が強くなるのが分かるかと思います。
05［実践-A］と［実践-B］の違い
［実践-A］では、【シアン】が強くなるほど光の総量が減るため画像は暗くなります。逆に、［実践-B］では、【シアン】が強くなるほど光の総量が増えるため画像は明るくなります。希望に応じた方法を使い分けるのがポイントです。
06まとめ
まずは、色を構成する光の組み合わせを意識するのが一番です。難しいことは抜きにして「各インクに対する反対色をRGBから抜いたもの」と考えてください。そうすれば、「【シアン】の反対色は【レッド】だから、RGBから【レッド】を抜いたGBの2色を調節すればいいんだな」というのが分かります。そうしていくうちに、自然とRGBで色を扱うことに慣れてくるはずです。これは経験上ですが、一度RGBに慣れたからと言ってCMYKでの感覚はあまり鈍りません。両方の感覚をハイブリッドに使い分けられればいいですね。
普段RGBしか扱わないウェブデザイナーの方も、「なんだよあのディレクター。CMYK感覚で色補正の指示出してくるんじゃねーよ」なんて文句言ってるよりも、「シアン味強くね。オッケー」って感じでサクッとRGBに置き換えて対応できた方がカッコいいですよね。