RGBは画面が光って色を出す方式で、混ぜるほど明るくなり白に近づきます。CMYKはインクが光を吸収して色を出す方式で、混ぜるほど暗くなり黒に近づきます。
成果物がモニターで見るもの（Web・動画・資料）ならRGB、紙やグッズに印刷するものならCMYKで作成します。
- CMYKはRGBより表現できる色の範囲が狭いため、鮮やかな色ほど印刷するとくすみます。この差を知らずにRGBのまま入稿すると「画面と色が違う」という失敗につながります。
本記事では、デザイン制作時に必ず考慮することになる 色 について、「色が見える原理」から「色の表現方法（RGBとCMYK）」について解説します。
色が白または黒のみであれば、それほど深く考える必要はありません。（とはいえ、純粋な「黒」を表現するのは意外と難しく、「白」は専用のインクが必要）
ですが、カラフルなデザインを作成する場合には、PCやスマホなどのモニターで見える色合いと、紙やグッズにプリントしたときの色合いに、大きな違いが出てしまうことを考慮する必要があります。
これは、「モニター上の色」と「実物の色」の出し方が根本的に違うために起こる現象で、RGB と CMYK という表現方法が関係しています。
デザインを作成したあとに「あれ、PCで作った色となんか違う！」となってしまわないよう、ここで基本的な原理と対策を理解しておきましょう！
そもそも色って何？
赤・青・黄・ピンク・オレンジ… 私達は様々な色に囲まれて生活しています。
この色の源は、「光」です。
光と言われてもイメージしにくいかもしれませんが、光には可視光線と呼ばれる、私たち人間の目に「色」として認識されるものが混在しています。
この可視光線の一部、たとえば「赤」の性質をもつ光が目に届くと、私たちは「赤」という色を認識できます。
同様に、
- 「青」の性質をもつ光が届けば「青」
- 「黄」の性質をもつ光が届けば「黄」
というように、我々は光からすべての色を認識しているのです。
ちなみに、光には目に見えないものもたくさん混在していて、紫外線や赤外線なども光の一部です。
ただ、これらが私たちの目に届いても「色」として認識できないため、見えることはありません。
リンゴが赤く見えるのはなぜ？
「色は光から発生しているというのはわかった。
では私たちが見ている多くのもの、たとえばリンゴは、「赤」の性質をもつ 光を発している ということなのか？」
これは半分正解で、半分間違い。
リンゴが赤く見えるのは、リンゴから「赤」の性質をもつ光が出ていて、それを私たちが認識しているから赤く見えている。これは説明の通り。
しかし、リンゴ自体が太陽や電球のように、光を発しているわけではありません。
太陽などの光から、「赤」の性質をもつ光のみを反射しているのです。（残りの色は吸収されてしまい、我々の目には届きません）
ちなみに、すべての色が含まれた光は白く明るく見え、逆に色が全く含まれない光は黒く見えます。（正確には、暗くなって黒く見える）
また、上の図の太陽やネオンのように、光源から直接発せられて見える色を「光源色」、リンゴのように、光が当たって反射して見える色を「物体色」といいます。
さて、色の基本原理について解説したところで、次はデザイン制作でよく聞く「RGB」と「CMYK」について解説していきます。
RGB（加法混合）とは
RGBとは、Red(赤)、Green(緑)、Blue(青)の頭文字から付けられた色の合成方法のこと。
主にテレビやPC、スマホの画面など、それ自身が光を発することで色を表現する方法です。
少しややこしいですが、私たちがモニターで見る色というのは、正確に言うと「私たちが色と認識できる光」を見ているといえます。
そしてこの光は、RGBという名前が示す通り、赤・緑・青の3色から構成されています。
では、赤・緑・青以外はどうやって表現しているのでしょうか？
実は、この3色を色々な比率で混ぜ合わせることによって多彩な色を表現することができるのです。
たとえば、赤と緑を混ぜ合わせると黄色になり、緑と青を混ぜ合わせると水色(シアン)になります。
そしてさらに、この赤・青・緑はそれぞれ明るさ別に256段階で表現することができます。
もっとも明るくなるのは、一番数字の大きい「255」（段階は0から始まるため、256ではない）で、小さくなるほど暗くくすんだ色合いになっていきます。
ここから色の組み合わせを計算すると…
その数は256 × 256 × 256 = 約1677万にもなり、それだけの色を表現することができるのです！
このようにRGBは、光を加えることで色を表現することから「加法混合」とも呼ばれます。
また、この3色を使うことで人間が感知できるほぼ全ての色を表現できることから、赤・青・緑は「光の三原色」と呼ばれます。
（逆に、この3色は他の色を使って表現することができません）
また最初の原理で解説した通り、すべての色が含まれた状態というのは白く明るく見えます。
RGBも光源から直接色を表現しているため、色を混ぜれば混ぜるほど明るくなります。3色すべてを最大の明るさで混ぜる（R: 255 / G:255 / B:255）ことにより、白を表現できるのが特徴です。
逆に光を抑えた状態は黒くなります。
モニターの電源を切ると、画面が暗く黒くなるのをイメージしてもらえればわかりやすいかと思います。
HTMLやCSSなどで色指定をする場合、RGBを16進数で表したカラーコードを使うことがよくあります。カラーコードについて知りたい、RGBとカラーコードを相互変換したい方は こちらの記事 へ。
CMYK（減法混合）とは
CMYKとは、シアン(Cyan)、マゼンタ(Magenta)、イエロー(Yellow)、キー・プレート(Key plate)の頭文字から付けられた色の合成方法のこと。
実際に紙や物などに印刷したり、絵の具で絵を書いたりするときには、キー・プレート以外の3つの色を混ぜて物体に塗布することで、色を表現します。
RGBと比較すると、RGBは「光そのものの色」を見ているのに対し、CMYKでは「光が物体に反射した色」を見ているといえます。
またRGBの赤・緑・青を「光の三原色」というのに対し、CMYKのシアン・マゼンタ・イエローは「色の三原色」と呼ばれています。
CMYKでも、RGBと同じように3つの色を様々な比率で混ぜ合わせ、多彩な色を表現します。
RGBの「赤・緑・青」が「シアン・マゼンタ・イエロー」に変わっただけ？と思われるかもしれませんが、その表現方法は全く異なります。
CMYKでは、物体そのものが光を発しているわけではなく、むしろ逆に光を吸収しています。
リンゴの例でみたように、シアンであればシアン以外の色を吸収し、マゼンタであればマゼンタ以外の色を吸収しています。
つまり色を濃くすればするほど、他の色と混ぜれば混ぜるほど、光の吸収が強くなり（逆に反射する色が少なくなり）、色が濃く暗くなっていきます。
このように、CMYKでは光の吸収によって色が減算されていくことから「減法混合」とも呼ばれます。
また、RGBのように光源の色を直接見るわけではなく間接的に色を見るという原理から、CMYKはRGBよりくすんで見えることが多いです。
（本記事の後半に、RGBをCMYKに変換した色を載せています）
RGBでは256段階の明るさを組み合わせて色を表現しますが、CMYKでは各色のインクをどれくらいの割合で使うかで色を表現し、0〜100%で指定します。
上記の通り、CMYKではインクの量が多いほど暗くなっていき、3色すべてを混ぜ合わせると黒を表現できます。3色混ぜると白になるRGBとは真逆ですね。
ただ現実には、CMYで純粋な黒を表現するのは技術的に難しく、予め調合しておいたK(ブラック)を使って黒を表現することもあります。（CMYを混ぜるのか、Kを使うのか、は印刷機や印刷設定によって変わります。）
ここでは、黒の表現には二通りあり、CMYを混ぜる方法では純粋な黒を作るのが技術的に難しい、と覚えておいてください。
ブラックの略がなぜ「K」なのか？
「K」はKey plate(キー・プレート)の略。Key plateとは、輪郭などの表現に用いられた印刷版のことで、これに黒色が使われていたことが由来だそうです。また、「B」だとBlueと間違いやすいからという説もあるようです。
黒の表現について、どのように見えるか下図にまとめてみました。
並べて比較してみると全然違う色に見えますね。。。
尚、CMYKと言いつつPC上ではRGBとして表現されてしまうので、上図の色合は実物とは異なるかもしれません。
あくまで参考としてお考えください。
また白については、その原理上CMYKで表現することはできません。
（白とはつまり、光をまったく吸収せず反射する状態 ＝ C・M・Y・Kがすべて0%の状態 ＝ 何もインクを載せない状態 ＝ 素材そのものの色が見える）
印刷物に白インクを事前にのせておく、ということはありますが、CMYKだけで白色を表現することはできない、と覚えておいてください。
RGB と CMYK の特徴一覧
RGBとCMYKの違いをざっくり対比させると、以下の通りです。
タップで拡大できます
| 項目 | RGB | CMYK |
|---|---|---|
| 色の見え方 | 光源から直接色を見る | 反射した光を見る |
| 混色の方式 | 加法混合 | 減法混合 |
| 三原色の呼び名 | 光の三原色 | 色の三原色 |
| 構成する色 | 赤(Red)・緑(Green)・青(Blue) | シアン(Cyan)・マゼンタ(Magenta)・イエロー(Yellow)＋ブラック(Key plate) |
| 色の印象 | 鮮やか | RGBよりくすむ |
| 全部混ぜると | 白になる | 黒になる |
| 白の表現 | 表現できる | 作れない（素材そのものの色を使う） |
| 主な用途 | テレビ・パソコン・スマホなどのディスプレイ上で表現 | 印刷物や絵の具で描いた絵などの実物で表現 |
デザインはRGBとCMYKのどちらで作成すべきか？
結論としては、「最終的な成果物が何かに応じて選択すべし！」となります。
モニター等で見ることを前提としたものは RGB を使いましょう。
たとえばWebページ。場合によっては紙に印刷することもありますが、基本的にスマホやPCを通じて見ることが大半でしょう。このブログの画像も、ほぼ全てRGBで作成しています。
※CMYKで作っても致命的な問題はありませんが、上述の通りCMYKではくすんだ色合いになってしまうことがあるため、より鮮やかさを出せるRGBの方がオススメです。
紙やグッズなどの物体に印刷する場合は CMYK を使いましょう。
たとえばTシャツやマグカップなどのグッズにロゴを印刷する場合、実物に印刷することが前提となるため、デザインイメージ(モックアップ)はCMYKで作成します。
もしRGBで作成してしまうと…
いざ印刷したときに、イメージと異なる色合いのデザインができてしまいかねません。
どんな具合で変わってしまうのか、簡単なイメージを用意してみました。
RGBで作成した光の三原色をCMYKに変換してみた
RGBで作成したものをCMYKに変換すると、かなり暗い色になってしまいました。。。
ちなみに、CMYKで作成した色の三原色をRGBに変換するとこんな感じです↓
RGB → CMYKに比べると、色の変化は小さいように見えます。
どちらかというとRGBの方が艶やかで、黒はより深い黒になっていますね。
- モニターのスペックや光の加減などにより色の見え方は異なります。あくまでイメージとしてお考えください。
RGBにも種類がある（sRGB / Display P3 / Adobe RGB）
ここまで「RGB」とひとまとめに説明してきましたが、実はRGBにも表現できる色の範囲（色域）が異なるいくつかの種類があります。代表的なものは次の3つです。
タップで拡大できます
| 名称 | 特徴 |
|---|---|
| sRGB | もっとも標準的で互換性が高い。Web用の画像やHTML / CSSのカラーコードは基本的にこれ |
| Display P3 | sRGBより広い色域。近年のiPhone・iPad・Macなどのディスプレイが対応している |
| Adobe RGB | 印刷用途を意識した広い色域。写真編集や業務用モニターで使われる |
同じカラーコードを指定しても、色空間が違えば見え方は変わります。
「自分の画面では鮮やかだったのに、他の人の画面では地味に見える」といったズレは、多くの場合この色域の違いが原因です。
- 迷ったらsRGBを選んでおけば間違いありません。Webで公開する画像はsRGBに統一しておくのが無難です。
- 広い色域（Display P3など）で作った画像を、sRGBまでしか対応していない環境で見ると、鮮やかな色ほどくすんで見えます。CMYKに変換したときと似た現象が、RGBの中でも起きるということです。
最近は「RGB入稿」に対応する印刷会社もある
「印刷するならCMYKに変換しなければならない」というのが長らくの常識でしたが、近年はRGBのまま入稿できる印刷会社も出てきています。
印刷機やCMYK変換ソフトの品質が上がり、鮮やかな色を以前より再現しやすくなったためです。
RGB入稿に対応していれば、印刷会社側が最適なCMYK変換を行ってくれるため、自分で変換する手間が省けます。
- ただしRGB入稿に対応している印刷会社は、まだ多数派ではありません。利用する前に、その印刷会社が対応しているかを必ず確認してください。
- 対応していない場合や、色を自分でコントロールしたい場合は、これまで通りCMYKに変換してから入稿します。
RGB ↔ CMYKに変換する方法
RGBで作成した画像やイラストをCMYK（またはその逆）に変換する方法については、以下の記事にまとめています。
Photoshop・Illustratorでの手順のほか、Mac標準の「ColorSyncユーティリティ」や、無料で使えるツールも紹介しています。
あわせて読みたい
RGB ↔ CMYK カラーモードを変更するには？まとめ
いかがでしょうか？
モニター上で見えるRGBの色合いと、印刷物で見えるCMYKの色合いに、大きな違いがあることを理解いただけたかと思います。
うっかりRGBでデザインを作成してしまい、あとでCMYKに変換して色を選び直す…
なんてことにならないよう、目的に合わせて事前に表現方法を決めておきましょう！
「モニターで見るならRGB、紙やグッズに印刷するならCMYK」
まずはこの使い分けさえ押さえておけば、色で大きく失敗することはありません。