RGBとCMYKの違いとは?画面用と印刷用の色指定を初心者向けに解説

Webデザインの色は「RGB」、印刷物のデザインの色は「CMYK」で指定する、と聞いたことはないでしょうか。この2つは、色を数値で正確に表現するための代表的な方式です。

この記事では、RGBとCMYKがそれぞれどんな方式で、なぜ使い分ける必要があるのかを、初心者向けに解説します。

基本の理解

まずはRGB・CMYKそれぞれの仕組みと、使い分けの理由を押さえましょう。

RGB・CMYKとは何か

RGB・CMYKは、色を数値で表現するための2つの代表的な方式です。RGBは赤(Red)・緑(Green)・青(Blue)の光の3色、CMYKはシアン(Cyan)・マゼンタ(Magenta)・イエロー(Yellow)・黒(Key)のインクの4色で色を表します。どちらも、その頭文字を並べた呼び名です(黒だけ「K」になっている理由は、後述のよくある質問で解説します)。

RGBを使うことで、パソコンやスマホの画面上で色を正確に指定・再現できます。CMYKを使うことで、印刷物の色をインクの配合として正確に指定・再現できます。この2つが分かれているのは、光と色料による色の違いで解説している通り、画面(光)と印刷物(インク)では色の作られ方がまったく異なるためです。光は重ねるほど明るく白に近づき、インクは重ねるほど暗く黒に近づく、という正反対の性質があります。

「色を混ぜると暗くなる」のは絵の具で経験があっても、「光を混ぜると白くなる」はイメージしにくいかもしれません。暗い部屋で、赤・緑・青の懐中電灯を壁の同じ場所に向けて照らすところを想像してみてください。3色の光が重なった真ん中は、白く明るく光ります。ライブ会場のステージ照明で、色付きのライトが重なった部分が明るく白っぽく見えるのも同じ仕組みです。

光(RGB):重ねるほど明るくなり、中央は白

インク(CMY):重ねるほど暗くなり、中央は黒に近づく

理論上の混色イメージ。実際のインクでは、CMYの3色を重ねても真っ黒にはならず濁った色になります

RGBとCMYKをどう使い分けるか

Webサイトやアプリのデザインでは、色をHEXカラーコードやRGB値で指定します。HEXカラーコードとは「#ff0000」のような書き方で、「#」の後ろの6桁を2桁ずつ区切り、前から赤・緑・青の光の強さを表しています。

カラーコード	赤(最初の2桁)	緑(真ん中の2桁)	青(最後の2桁)	見える色
#ff0000	ff(最大)	00(ゼロ)	00(ゼロ)	鮮やかな赤
#00ff00	00(ゼロ)	ff(最大)	00(ゼロ)	鮮やかな緑
#ffffff	ff(最大)	ff(最大)	ff(最大)	白(3色とも最大)

「ff」や「00」は16進数という数え方ですが、最初は「00が最小、ffが最大」とだけ覚えておけば十分です。仕組みを詳しく知りたい場合はWebでRGBカラーが使われる理由とは?で解説しています。

一方、チラシやパンフレットなど印刷物のデザインでは、色をCMYK値で指定します。Web用に作った色をそのまま印刷用に使うと、画面で見た色と印刷結果の色が異なって見えることがあるため注意が必要です。

同じ色をWebと印刷物の両方で使いたい場合は、それぞれの方式に変換した上で、実際の見え方を確認することが大切です。デザインツールの多くは、RGB値とCMYK値を相互に変換する機能を備えています。確認は次の2段階で行うと安心です。

画面上で確認する:PhotoshopやIllustratorの「校正設定」(印刷したときの色味を画面上でシミュレーションする機能)で、くすんでしまう色がないかを確認する
実際に紙に印刷して確認する:画面上のシミュレーションも完璧ではなく、紙の種類やプリンターによって色味は変わります。重要な印刷物は、本番を依頼する印刷会社の色校正(本番に近い条件での試し刷り)で確認するのが確実です。手元のプリンターでの試し刷りは、おおまかな確認の目安として使いましょう

実践のポイント

RGBとCMYKを扱うときに気をつけたい点と、よくある疑問をまとめます。

注意点・よくある間違い

RGBで作った鮮やかな色をそのままCMYKに変換すると、インクで表現できる色の範囲(色域)の違いにより、思ったより地味な色に印刷されてしまうことがあります。特に鮮やかな緑や青は差が出やすいため、印刷前に必ず確認しましょう(理由は下記)。
Web用のデザインなのにCMYKで色を考えてしまう、またはその逆の混同が起きやすくなります。今作っているものが画面用か印刷用かを、作業の最初に確認する習慣をつけましょう。

なぜ地味になってしまうのかというと、画面は自ら光っているため、蛍光ペンのようなとても鮮やかな色まで表示できる一方、紙とインクではその鮮やかさを再現しきれないからです。この「表現できる色の範囲」を色域と呼びます。CMYKの色域の外にある色は、変換するときに「インクで出せるいちばん近い色」に置き換えられるため、少し落ち着いた、くすんだ色になってしまうのです。色域については色域(ガモット)とは?で詳しく解説しています。

よくある質問

Q. CSSでCMYK値は使える?
A. CSS(Webページの見た目を指定する言語)ではRGB(HEXカラーコードやrgb())が基本で、CMYK値を直接指定する仕組みは一般的ではありません。Web制作ではRGB系の指定方法を使うと考えておけば十分です。
Q. なぜCMYKには黒(K)が含まれているの?
A. シアン・マゼンタ・イエローの3色を混ぜるだけでも理論上は黒に近づきますが、実際のインクでは濁った茶色っぽい黒にしかなりません。そのため、くっきりとした黒や、文字の印刷に使う黒インクとして、Kが別途用意されています。
Q. 黒なのに、なぜ「B(Black)」ではなく「K」なの?
A. Kは「Key(キー)」の頭文字で、印刷で輪郭や文字などの要となる部分を刷り、ほかの色の版を重ねるときの位置合わせの基準にもなる「キープレート(Key Plate)」に由来するとされています。「Bだと青(Blue)と紛らわしいからK」という説明を見かけることもありますが、こちらは覚え方としては便利なものの、由来としては正確ではないとされています。実用上は「K=黒インク」と覚えておけば十分です。