RGBとは？WebデザインでRGBを利用する理由やCMYKとの違い

Webや印刷物のデザインを作成した経験がある方なら、RGBという言葉を聞いたことがあると思います。

RGBとは、Webデザインで利用する色を表現する仕組みのことを言い、印刷物のデザインではCMYKと呼ばれる仕組みが利用されていて、どの媒体のデザインを行うかによって、使い分ける必要があります。

当ページでは、RGBとは何かや、WebデザインではRGBを使う理由、RGBとCMYKの変換ツールを紹介します。

RGBとは

RGBとは、Webデザインを表現するための色の仕組みのことを言い、人間が認知可能な光のRed（赤：レッド）とGreen（緑：グリーン）、Blue（青：ブルー）の頭文字を取った略語になり、加法混色と呼ばれることもあります。

テレビやパソコン、スマートフォンなどのすべてのディスプレイは、赤と緑、青の三色で表現されており、ホームページでもRGBが採用されています。

ただし、RGBで指定した色は、モニターやブラウザなどの性能によって、異なった色で表現されることがあり、ユーザー環境に左右されてしまうので注意が必要です。

人間は光の反射で色を認識し、RGBで利用される赤と緑、青の3つはそれぞれが異なる波長になっているので、光が反射する条件が異なっています。

例えば、リンゴが赤いと認識されるのは、赤1色だけが反射されるからです。

次に、バナナは黄色いと認識されるのは緑と青が合わさって反射されているからで、2色が同時に反射されていて、反射率によって黄と認識されています。

ちなみに、赤と緑、青の3色が均等に反射された場合は白と認識（加法混色）され、すべての光が集約された地点は黒と認識されます。

CMYKとは、印刷物の色を表現する仕組みのことを言い、Cyan（シアン）とMagenta（マゼンタ）、Yellow（イエロー）、Key Plate（黒：キープレート）の頭文字を取った略語になります。

CMYKは、色を混ぜ合わせるほど、黒に近い色になり、この現象を減法混合や減法混色と言います。

シアンやマゼンタ、イエローを混ぜ合わせることで、どんどん黒に近くなっていくのですが、黒になることはないので、CMYKにはキープレートと呼ばれる黒色が存在しています。

すなわちRGBとの決定的な違いは、キープレートの存在になっており、印刷物においては、黒を表現しやすく、デザインの品質を大きく向上させることが可能になっています。

カラーコードとは、色を表現するために用いられる6桁の数字とアルファベットのことを言います。

例えば、白であれば#fffffb、黒は#02010cと記載することで、パソコンなどのモニターや印刷機が何色を利用すれば良いかを認識することができます。

カラーコードは、一般的な色を表す文字列になるのですが、RGBとCMYKで異なる文字列が必要になります。

例えば、カラーコードが#02010cになる黒であれば、RGBは3色になるので「R（2）G（1）B（12）」と表記され、CMYKは4色なので「C（30）M（30）Y（0）K（100）」と表記されます。

WebデザインでRGBを利用する理由は、CMYKよりも表現できる色の領域が広く、RGBは1色につき256段階の明るさを設定できるためであり、約16,800,000万通りもの色を表現することができます。

そのため、Webデザインでは、RGBを利用するのですが、なぜ印刷物はCMYKを利用するのでしょうか。

それは、CMYKの方が表現できる色は少ないですが、印刷物は光の反射ではなくインクになるので、RGBで指定した通りの色をインクでは表現することができないからです。

CMYKでは、金や銀などのメタリックカラーや、淡く薄いパステルカラー、鮮やかな蛍光色などを表現することができないので、RGBで指定したとしても、印刷物では似た色に調整されてしまいます。

当社がおすすめしているのが、げんちゃんの色見本というホームページにあるCMYK⇔RGB変換ツールです。

もちろん、その他のツールでも問題はありませんが、さまざまなツールを見てきた限りで言うと、こちらのホームページがもっともシンプルで扱いやすいと感じました。

ただ、すでに利用されているRGBとCMYKの変換ツールがある場合は、無理に利用する必要がなく、自分が扱いやすい変換ツールを利用すれば良いと思います。

RGBとは何かを解説しました。

Webがメインの方であればRGBを、印刷物がメインの方であればCMYKを指定しておけば問題ありません。

RGBって何？とお悩みの方の参考になれば幸いです。