【RGB/CMYK】光と色の三原色と三属性 徹底解説

知っているようで知らない『色』の仕組み。

  • 光の三原色 RGB
  • 色の三原色 CMYK
  • 色は三属性で決まる

色の仕組みやRGBとCMYKの違いをたくさんの図解とともに超わかりやすく解説していきます。

黒猫のアイコン画像黒猫

これを読めば色の基礎はバッチリ!

目次

光の三原色とは? RGBの仕組み

色の三原則とは?図解

光の三原色とは『赤』『緑』『青』の3つの原色のことを指します。

この3つを混ぜ合わせるだけで人が認識できるほぼすべての色が表現可能

うさぎのアイコン画像うさぎ

色の三原色ではなく光の三原色と呼ばれるのはあくまでも光(可視光)だから

RGBスポットライト照射図
光が重なる事で色が変化する
人間の色覚について
人間の目の視覚範囲、可視光線と不可視光線
波長ごとの色変化(スペクトル)
  • 人間の色覚は3色型
  • 視覚可能な波長帯は約360~830nm
  • 可視光の大部分はRGBで表現可能
うさぎのアイコン画像うさぎ

たった3色で人間の見ることのできる色ほぼ全てを再現できちゃうってすごくないですか?

光の三原色を使った色表現がRGB

光の三原色を利用した色の表現方法をRGBカラーモデルと言います。

RGBの意味
  • 赤:Red
  • 緑:Green
  • 青:Blue

光の三原色であるRed/Green/Blueの頭文字をとって『RGB』と呼ばれる。

RGBカラーモデルは主にディスプレイに利用されており、現代ではもっとも身近な色の表現手段の一つとなっています。

RGB 3色を重ねることで鮮やかな写真に

わずか3色の組み合わせでもこんなにカラフルに!

画像はピクセルの集合体なので1ピクセルごとにRGBカラーを確認できます。

黒猫のアイコン画像黒猫

現在あなたが見ているこの画面も光の三原色の組み合わせによって色が出力されているんですよ

ディスプレイ拡大図
スマートフォンのディスプレイ拡大イメージ
身近なRGB
  • 有機ELディスプレイ
  • コンピューター
  • スマートフォン
  • 液晶テレビ
  • デジカメ

RGBは混ぜるほど明るくなる『加法混色』

三原色の組み合わせ4パターン
  • 赤(Red)緑(Green)黄色(Yellow)
  • 青(Blue)緑(Green)水色(Cyan)
  • 赤(Red)青(Blue)紫(Magenta)
  • 赤(Red)緑(Green)青(Blue)=白(White)

RGBは色を混ぜれば混ぜるほど明るくなり、色が少なければ少ないほど暗くなるという加法混色となっています。

RGBカラーの数値表記は約1677万通り

3原色の含有量を数値で表す場合、通常それぞれ8bit(0~255)で表現されます。

この場合の表現幅は256×256×256=1,6777,216万色となり、多くの色を表現することが可能。

RGB数値表記比較図解

画像の色は上図のように赤、緑、青がどれだけの量含まれているかによって数値表現されています。

うさぎのアイコン画像うさぎ

左下のオレンジ系ならRed100% / Green70%くらい

黒猫のアイコン画像黒猫

Greenの数値を100%(255)に変更すると完全に黄色になります

RGBは3原色すべてを100%にしたとき白となり、逆に全て0%にしたときに黒になります。

色相比較図

RGBの数値は絶対的なものではなく、相対的な数値なのでパーセントで考えたほうがイメージしやすいです。

  • 64=25%
  • 128=50%
  • 192=75%
  • 255=100%

RGBの数値による色変化は下記のようになります。

色の三原色とは? CMYKの仕組み

色の三原色とはシアン』『マゼンタイエローの3色のこと物質色の基礎となる3色の事。

色の三原色は『絵の具の三原色』や『色材の三原色』とも呼ばれ絵の具やインクなどの塗料で利用されます。

CMYKは印刷で利用されるカラーモデル

色の三原色を使ったCMYKは印刷用に利用される表現方式の事で、主にインクとして使用されています。

業務用の印刷機だけでなく、一般的な家庭用プリンターのカラーインクの表記もCMYKになっていますね。

家庭用プリンターのインク(CMYK)
CMYKの意味
  • 水色:Cyan
  • :Magenta
  • 黄:Yellow
  • 黒:Black

色の三原色であるCyan/Magenta/YellowにBlackを合わせ『CMYK』と呼ばれる。

語源的にはBlackのKではなく印刷版(Key Plate)のKが由来ですが、現在では黒=Kとして扱われている。
プリンターではKではなくBKと表記されて販売されている事も多い。

PC画面と印刷物の色の違い

現代ではコンピュータでデザインから印刷までを行うDTPといわれる手法が主流になっていますが、PCディスプレイと印刷物のカラー表現方式は全くの別物。

DTPを行う場合の色の差異
  • コンピューターの光:RGB
  • 印刷機やインクの色:CMYK

PCの画面上ではRGBで表示されていますが、インクや印刷機はCMYKのためPC上の色と印刷物の色に差異が生まれます。

その色の差異をPC上で再現するためのものがCMYKカラーマネジメントと呼ばれる色のプロファイル。

うさぎのアイコン画像うさぎ

カラーマネジメントにより完全再現ではないものの、ディスプレイ表示を印刷物の色に近づけることができます

黒猫のアイコン画像黒猫

とは言えインクや用紙によって仕上がり色が異なるためディスプレイ上で印刷物の色を完全再現することはできません

RGBとCMYKの違い

RGBとCMYKの違いを表にまとめると下記のようになります。

比較項目RGBCMYK
性質光源色物体色
表現方式加法混色減法混色
使用用途ディスプレイ印刷物
表現色数多い少ない

CMYKは光の三原色と違い、物質に色を付与し、反射した光で色を表現する仕組みなのでインクが直接光を発しているわけではありません。

RGBとCMYKの違い、光の見え方

上図のようにRGBが見せたい光を放つのに対してCMYKは見せたくない色を減らす減法混色となっています。

うさぎのアイコン画像うさぎ

マゼンタのインクは赤と青の光は反射・透過するが、緑の光は吸収して視覚させない塗料っていう事ですね

CMYKの混色

色の三原色カラーモデル

CMYKの色の3原色の塗料にはそれぞれ下記の特徴があります。

  • Cyan=赤色の光を吸収
  • Magenta=緑色の光を吸収
  • Yellow=青色の光を吸収

それぞれ光の3原色の光を吸収する事ができるので、2色を混ぜることで赤緑青の3色が表現可能。

うさぎのアイコン画像うさぎ

赤を吸収するシアンと緑を吸収するマゼンタを混ぜることで、青色のみが吸収されずに残り、青色の塗料となります。

黒猫のアイコン画像黒猫

同じ要領で赤と青を吸収するシアンとイエローを混ぜれば緑色になりますね!

このようにCMYKでは表現したい色以外を減らしていくので減法混合といわれます。

CMYKの色の組み合わせ
  • 加法混合のRGBは3色の光を重ねて白にし、光を弱くし黒にする。
  • 減法混合のCMYKは何も塗らないことで白にし、3色を重ねて黒にする。
CMYだけでも黒が作れるのに何故Kが必要なの?

色の三原色に黒を追加している理由は主に2つ

  • 綺麗な黒を表現するため
  • インクコストを下げるため

3色を混ぜ合わせることで黒を表現可能ですが、混ぜ合わせの黒は綺麗な黒にはなりません。

また、黒を使うたびに3色をたくさん使う事になるのでインク代がかさんでしまい経済負担が大きくなります。

このような理由からKが追加されています。

CMYKで注意したい『黒』の扱い

DTP印刷で『黒』を扱う際に注意したい事が3つあります。

CMYKの黒には下記のような種類があり、それぞれデメリットがあるので覚えておきましょう。

黒印刷配合比率シチュエーションデメリット
スミベタK100%文字や線など細かいもの広範囲のベタ塗りには向かない
4色ベタCMYK各100%使用しないインク量過多により滲みや裏写り
リッチブラックCMY各40% / K100%深い黒を表現したいもの細かいものは色ズレの可能性あり

覚えておくべきことは3つ

  • 文字や線など細かいオブジェクトはK100%のスミベタが基本
  • 4色ベタはインク過多でトラブルが起こるから使用しない
  • 綺麗な深い黒を表現するにはリッチブラックが最適

これはあくまで参考です。
印刷に関しては各印刷会社に独自のマニュアルがあるためそれに従ってください。

色の三属性『色相』『明度』『彩度』

色の三属性『色相』『明度』『彩度』

すべての色は色の三属性によって表現されています。

色の三属性とは下記の3つの性質の事。

  • 色相:色み
  • 明度:色の明るさ
  • 彩度:色の鮮やかさ

これら3つの属性を組み合わせることであらゆる『色』を自由自在に作成可能になります。

色の三属性まとめ

色相はメインとなる色

色相(hue)図解

色相とは赤、緑、青、黄、紫…といった色みの事を指します。

一般的に『色』というと色相のことを指している場合が多いですね。

色相環とは
色相環図解

色相環とは色相に応じて円環状に並べた上図のようなもの。

色相環は『補色』や『トライアド』など様々な色の組み合わせとして利用され、デザインにおいて非常に重要な要素となっています。

明度は色の明るさ

明度(brightness)図解
←高い |明度| 低い→

明度は文字通り色の『明るさ』を表す属性の事。

明度が高くなれば白に近づき、明度が低くなれば黒に近づきます。

色を明るくする、暗くすると言った感じで文字通りに受け止めればいいので一番イメージしやすい要素ですね。

彩度は色の鮮やかさ

彩度(Chroma)図解
←高い |彩度| 低い→

彩度は色の『鮮やかさ』を表す属性の事。

彩度が高ければ高くなるほど鮮やかな色になり、逆に彩度が低くなると色みがなくなりどんどんくすんだ色になっていきます。

彩度は『色みの量』を決定する要素で、彩度を下げれば無彩色と言われる明度のみで表される色に変化していく。

無彩色とは

彩度のない無彩色は3属性の『色相』と『彩度』が無く、明度のみで表されるモノクロカラーになります。

彩度に関する用語
  • 高彩度:色が鮮やか
  • 低彩度:色がにごる
  • 有彩色:彩度のある色
  • 無彩色:白、黒、グレー

色調は明度と彩度により作られる

彩度と明度の比較図

色調はカラートーンとも呼ばれ、明度と彩度から作られます。

カラートーンによって色が与える印象が大きく変化するため、色相だけでなく明度と彩度もとても重要。

主な色調
  • ビビッドトーン:明度と彩度を高く
  • パステルカラー:明度を高く、彩度を低く
  • ディープトーン:明度を低く、彩度を高く

トーンを合わせる=明度と彩度を合わせる

デザイン用語でトーンを合わせると言いますが、これは『明度』と『彩度』を合わせるということ。

色相が変わってもトーンが一致していれば統一感のあるデザインになります。

トーンを合わせ色相のみを変更した例

3原色と3属性を知れば色がもっと身近に

光と色の三原色&色の三属性
  • 映像の色を表現している光の三原色
  • 物体の色を表現する色の三原色
  • 膨大な色を作る色の三属性

これら3つの色の仕組みを理解しておけば色がもっと身近になり楽しくなりますよ。

RGB、CMYK、3属性による色調整はデザイナーはもちろん、ノンデザイナーでも知っておいて損はありません。

しっかりと色について理解を深めておきたいですね。

黒猫のアイコン画像黒猫

参考になったと思ったら感想いただけるととっても嬉しいです。
ツイッターにて感想付きで引用RTしていただければRTいたしますのでよろしくおねがいします!

色の組み合わせはAdobe Colorを使おう

色を扱う上で外せないのが色の組み合わせ

奥が深くむずかしい色合わせですが、ツールを使えば超かんたんに素敵な配色が作れちゃいます。

配色ツールはたくさんありますが数ある中でも無料で使えるプロ御用達のAdobe Colorが最適。

無料で使える配色サービス

色を使う際は心理効果も意識しよう

色には印象を与える効果だけでなく五感に直接作用する効果もあり、デザインには欠かせない要素となっています。

なぜその色を使ったのか言語化できるよう、色の特徴と心理効果を理解しておきましょう。

コメント

コメント一覧 (1件)

  • むかし勉強したけど完全に忘れてました!
    でもとてもわかりやすい解説だったのでバッチリ理解できました。

    RGB やCMYK ってなんか難しいんですよね。

    色についての理解が深まりました、ありがとうございます。

コメントする

目次
閉じる