見出し画像

RGBとCMYKの違いを復習する

個人的に。

デザインをしている人であればそんなこと当たり前じゃんか〜〜!と思うような内容かもしれませんが、人に教える、となった時にあれ、どうだったかな、となりそうだったので復習も兼ねてまとめます。

RGBってなに?

RGBとは「Red」「Blue」「Green」からなる光の三原色のことで、その頭文字をとってRGBと呼ばれています。

画像1

こちらはパソコンやスマートフォン、テレビなど、電子機器に用いられる液晶画面はこの色からなりたっています。肉眼ではわかりづらいですが、液晶画面に埋め込まれている無数の電球が映し出す光の密度によって表現される色です。

CMYKってなに?

CMYKとは、色の三原色である「シアン」「マゼンタ」「イエロー」の3色に加えて黒を表す「キープレート(ブラック)」の頭文字をとってそう呼ばれています。

画像2

インクや絵具などで再現される本やチラシ、ポスターなどは基本的にこの4色で再現されています。RGB同様、色の密度を調整することで色を表現しています。昔から輪郭線や文字などの黒の版は「Keyplate」= 鍵となる版(確かに重要そう)と呼ばれていたらしく、現在でもその名残から黒い版を表す色はKと呼ばれています。(※諸説あり)
Bとしてしまうと、RGBのBと混同する!という理由も言われたりしますがー

画像4

Kの版が存在する理由として、もしKがなかった場合シアン・マゼンタ・イエローから黒を作り出す必要が出てくるのですが、それに付随し、以下の理由があります。
・シアン・マゼンタ・イエローの3色から安定した黒を作り出すことが難しい(実際に絵具で作ろうと思うとほんとに辛い)
・3色のインクを使うとなるとその分コストがかかる
・3色のインクを重ねてしまうと、その分乾かす時間がかかったり、インクが染みてしまったりする。

印刷の時のカラー設定について

なんとなくここまででRGBとCMYKの違いが明らかになってきましたが、なぜweb全般のデザインと印刷のデザインでカラーモードを気をつけなければならないのか?というのには再現性のお話が絡んできます。(そもそも大前提の色が違うんだったら作るものも違うよね、で納得もできますが)

画像4

全ての色を表現する、となった時に必要な色をグラデーションで表すと図のようになります。その中でも赤い枠で囲んだものがRGB、水色の枠で囲んだものがCMYKの再現領域です。

例えばRGBのカラーモードで印刷に用いるデザインを作ってしまったが、CMYKのカラーモードに直したら色味が変わってしまった、ということは再現領域の違いから、CMYKの再現できる色の中で最も近い色に差し替えてくれていた、ということなんですね。(イラレさんありがとう)

カラー設定でもAdobeRGBやsRGBなど様々な設定がありますが、それも色の再現領域が異なり、AdobeRGBでは再現できる色味が多いものの、一般的に普及されているディスプレイでは再現できない色味で作ってしまうことになりかねない…などからwebデザインはsRGB、デジタルサイネージなど特殊な媒体でのデザイン、であればAdobeRGBなどその場その場に応じた設定が必要です。

カラー設定がすり合っているとイラレさんに注意されずにすんだり、完成したデザインの色味の違いを防げるのでデザインをする前に職場内で事前にすり合わせておくとより統一感のあるデザインができそうですね。

(誤っていることなどあればコメントいただければ幸いです)

この記事が気に入ったらサポートをしてみませんか?