光の3原色(RGB)と色の3原色(CMY)

光の3原色(RGB)は、Red、Green、Blueの3色のことで、ディスプレイの画面表示などに使われています。色の3原色(CMY)は、Cyan、Magenta、Yellowの3色のことで、プリンターのインクの色などに使われています。

ITパスポート試験基本情報技術者試験

最終更新日：2026年8月9日

このページで覚えること

このページでは、次の4点を押さえます。

光の3原色(RGB)は、ディスプレイ表示用のRed、Green、Blueの3色のこと
RGBは加法混色で、3色を均等に混ぜると白色になる
色の3原色(CMY)は、プリンター印刷用のCyan、Magenta、Yellowの3色のこと
CMYは減法混色で、3色を均等に混ぜると黒色になる

導入トーク

岩崎芽衣

今回は光の3原色と色の3原色について学習します。

バロン

3原色は小学校で習った気がするですぞ。
たしか、赤青黄だったですかな？

岩崎芽衣

小学校で習う3原色といえば、絵の具の3原色ですね。
今回学習するのは光の3原色と色の3原色です。

岩崎芽衣

光の3原色は、RGBともいいますが、Red、Green、Blueの3色です。

バロン

赤と緑と青の3色ですな。
確かに赤、青、黄ではないですぞ。

岩崎芽衣

色の3原色は、CMYともいいますが、Cyan、Magenta、Yellowの3色です。

バロン

シアン、マゼンタ、イエロー……。
シアンとマゼンタは、聞いたこともないですぞ。

岩崎芽衣

シアンは水色っぽい色で、マゼンタが赤紫に近い色です。イエローは黄色ですね。

バロン

シアンを青、マゼンタを赤と考えれば、赤青黄ではある訳ですな。

岩崎芽衣

そうですね。小学校では分かりやすさを重視して赤青黄と説明していますが、ここでは赤青黄の3原色は一度忘れましょう。
光の3原色は、レッド、グリーン、ブルーの3色で、色の3原色は、シアン、マゼンタ、イエローの3色です。

バロン

分かったですぞ。

岩崎芽衣

それでは順番に確認していきましょう。

STEP 1

光の3原色

岩崎芽衣

まずは、光の3原色から見ていきましょう。
光の3原色は、Red、Green、Blueの3色です。

バロン

頭文字を取ってRGBですな。

岩崎芽衣

はい。
Redが赤、Greenが緑、Blueが青です。

バロン

これはそのままなので覚えやすいですぞ。

岩崎芽衣

そしてRGBは、ディスプレイなど、光を使って色を表現するときに使われます。

バロン

パソコンやスマートフォンの画面ですかな？

岩崎芽衣

そうですね。
ディスプレイでは、赤、緑、青の光を組み合わせて、さまざまな色を表現しています。

岩崎芽衣

次の図を見てください。

バロン

赤と緑を混ぜるとイエロー、緑と青を混ぜるとシアン、青と赤を混ぜるとマゼンタになるのですな。

岩崎芽衣

はい。
そして、赤、緑、青の3色すべてを同じ強さで重ねると、中央が白になります。

バロン

3色を混ぜると白になるのですかな？
なんだか不思議な感じがするですぞ。

岩崎芽衣

そうですね。
ここで混ぜているのは、赤、緑、青の光なんです。

岩崎芽衣

光は、重ねるほど明るくなります。
赤い光に緑の光を加え、さらに青い光を加えていくことで、最終的には白い光になります。

バロン

光をどんどん足していくから明るくなるのですな。

岩崎芽衣

はい。
このように、光を加えることで色を作る方法を「加法混色」といいます。

バロン

加えるから加法混色。
そのままですな。

岩崎芽衣

そうですね。
RGBと加法混色はセットで覚えておきましょう。

ここで覚えること

光の3原色は、Red、Green、Blueの3色
頭文字を取ってRGBという
ディスプレイなどの画面表示に使われる
RGBは、光を加えて色を作る加法混色
RGBの3色を同じ強さで重ねると白色になる

STEP 2

色の3原色

岩崎芽衣

次は、色の3原色です。

バロン

シアン、マゼンタ、イエローでしたな。

岩崎芽衣

はい。
Cyan、Magenta、Yellowの頭文字を取って、CMYといいます。

バロン

Cがシアン、Mがマゼンタ、Yがイエローですな。

岩崎芽衣

そのとおりです。
CMYは、プリンターのインクなど、印刷物で色を表現するときに使われます。

バロン

そういえば、プリンターのインクで「シアン」と「マゼンタ」は見たことがある気がするですぞ。
シアンもマゼンタも何のことか分からなかったので、今まですっかり忘れていたですぞ。

岩崎芽衣

プリンターを使っている人なら、そこで見覚えがあるかもしれませんね。

岩崎芽衣

こちらも図を見てみましょう。

バロン

今度は3色を混ぜると、真ん中が黒になるのですな。

岩崎芽衣

はい。
先ほどのRGBとは逆ですね。

バロン

RGBは混ぜるほど明るくなって、最後は白でしたぞ。
どうしてCMYは黒くなるのですかな？

岩崎芽衣

CMYの場合は、光そのものを加えているのではありません。
インクが光の一部を吸収して、反射する光を減らすことで色を作っています。
実は、これは絵の具の考え方と同じです。

バロン

確かに絵の具も色々な色を混ぜるとどんどん黒に近づいていくですぞ。
あれは反射する光を減らしているから黒になってたのですな。
今まで考えたこともなかったですぞ。

岩崎芽衣

はい。
このように、色を重ねるほど反射する光が減って暗くなっていくので、この方法を「減法混色」といいます。

バロン

RGBは光を加えるから加法混色。
CMYは反射する光を減らすから減法混色ですな。

岩崎芽衣

はい、その整理で大丈夫です。
理論上は、シアン、マゼンタ、イエローをすべて混ぜると黒になります。

バロン

黒になるのではないのですかな？

岩崎芽衣

理論上は黒になります。
ただ、絵の具もそうですが、実際のインクでは、3色を混ぜてもきれいな黒になりにくいです。
きれいな黒を印刷するために、プリンターでは黒のインクを別に用意することが一般的です。

バロン

確かに黒のインクもあったですぞ。
ところで、黒のインクだけ減るのが異様に早いのはなぜですかな？

岩崎芽衣

プリンターをどういう用途で使っているかにもよりますが、文字の多い文書などを印刷することが多いと、黒のインクは減りやすいと思います。
普段、どういったものを印刷していますか？

バロン

バロンは始末書を印刷することが多いですぞ……。

岩崎芽衣

……。

岩崎芽衣

こほん。
きれいな黒を印刷するためには、黒インクを別に用意するのが一般的です。
なので、CMYに黒を表すKを加えたものをCMYKといいますが、印刷では、このCMYKがよく使われています。

バロン

ところで、この図のシアンもシアンで良いのですかな？
画面に表示するのはRGBと言っていたはずですぞ。

岩崎芽衣

はい、シアンで大丈夫です。
ただし、この図をディスプレイで見ている以上、画面上ではRGBの光を使ってシアンを再現しています。

バロン

同じシアンでも、画面ではRGBで表示しているのですな。

岩崎芽衣

そうですね。
例えば、RGBでは緑と青の光を組み合わせることでシアンを表示できます。
一方、印刷物ではシアンのインクを使ってシアンを表現します。

バロン

なるほどですぞ。
画面では光で作って、紙ではインクで作っているのですな。

岩崎芽衣

はい。
ディスプレイと印刷物では色を作る仕組みそのものが違うので、画面で見た色と実際に印刷した色が少し違って見えることもあります。

バロン

意図した色と違うというのは、とても厄介ですぞ。

岩崎芽衣

そうですね。
デザインしたものを印刷するときには、画面上の色がそのまま印刷されるとは限らない、ということを知っておくとよいと思います。

ここで覚えること

色の3原色は、Cyan、Magenta、Yellowの3色
頭文字を取ってCMYという
プリンターなどの印刷に使われる
CMYは、反射する光を減らして色を作る減法混色
CMYの3色を均等に混ぜると、理論上は黒色になる
実際の印刷では、黒を加えたCMYKがよく使われる

STEP 3

カラーコード

岩崎芽衣

次は、コンピュータ上で色を指定するときに使われるカラーコードについて学習しましょう。

バロン

カラーコードですかな？

岩崎芽衣

例えば、Webサイトを作るときには、#FFFF00のような文字列を使って色を指定することがあります。

バロン

暗号にしか見えないですぞ。

岩崎芽衣

最初はそう見えますね。
これはRGBのそれぞれの強さを、16進数で表したものです。

バロン

16進数……。
0から15まで数えるやつですかな？

岩崎芽衣

考え方は合っています。
普段使っている10進数では、0から9までの10個の数字を使います。
16進数では、それにA、B、C、D、E、Fを加えて、0からFまでの16個の文字を使います。

バロン

AからFも数字の代わりに使うのですな。

岩崎芽衣

はい。
Aが10、Bが11、Cが12、Dが13、Eが14、Fが15に相当します。

バロン

Fまで行ったら、次はどうなるのですかな？

岩崎芽衣

10進数で9の次が10になるのと同じように、16進数ではFの次が10になります。

バロン

10と書いてありますが、10進数の10ではないのですな。

岩崎芽衣

そうですね。
16進数の10は、10進数では16です。

岩崎芽衣

2桁の16進数を順番に数えると、00、01、02……0E、0Fと進み、その次が10、11、12……1E、1Fになります。

バロン

そして、その次は20ですかな？

岩崎芽衣

はい。
その後も、20～2F、30～3Fというように進んでいきます。

岩崎芽衣

さらに進めると、90～9F、A0～AF、B0～BFとなって、最後はF0～FFです。

バロン

00からFFまであるのですな。

岩崎芽衣

はい。
10進数に直すと、0から255までの256段階になります。

バロン

それを赤、緑、青のそれぞれに使うのですかな？

岩崎芽衣

そのとおりです。
Webのカラーコードでは、#RRGGBBという順番で色を表します。

バロン

最初の2文字がRed、次の2文字がGreen、最後の2文字がBlueですな。

岩崎芽衣

はい。
それぞれ00が最も弱く、FFが最も強い状態です。

岩崎芽衣

では、一つ問題を出してみましょう。
#A20000と#5F0000では、どちらの方がRの値が大きいでしょうか？

バロン

どちらも後ろが全部0なので、赤だけということですな。

岩崎芽衣

そうですね。
比べるのは、先頭のA2と5Fです。

バロン

5は分かりますが、Aは10でしたな。
ということは、A2の方が大きそうですぞ。

岩崎芽衣

正解です。

岩崎芽衣

実際に10進数へ直すと、A2は、10×16＋2＝162です。
一方、5Fは、5×16＋15＝95になります。

バロン

162と95なら、A2の方がかなり大きいですな。

岩崎芽衣

はい。
そのため、#A20000の方がRの値が大きく、赤い光を強く出しています。

バロン

16進数でも、数の大きさが色の強さにつながっているのですな。

岩崎芽衣

そういうことです。

岩崎芽衣

では、もう一問です。
#FFFF00は何色でしょうか？

バロン

最初のFFが赤で最大。
次のFFが緑で最大。
最後の00は青がなしですな。

バロン

赤と緑を混ぜると……イエローですぞ！

岩崎芽衣

正解です。

バロン

さっき見たRGBの図でも、赤と緑を混ぜると黄色になっていましたぞ。

岩崎芽衣

そうですね。
カラーコードを丸暗記するより、RGBの仕組みから考えた方が分かりやすいと思います。

バロン

RGBは必ず16進数で表すのですかな？

岩崎芽衣

いいえ。
例えば黄色なら、10進数でR=255、G=255、B=0と表すこともあります。
Webのカラーコードでは、#FFFF00のような16進数表記がよく使われる、と考えてください。

バロン

なるほどですぞ。

バロン

では、CMYも16進数で表すのですかな？

岩崎芽衣

印刷で使うCMYKでは、通常はC、M、Y、Kをそれぞれ何％使うかという形で表します。

岩崎芽衣

例えば、C=0%、M=0%、Y=100%、K=0%なら、イエローを100％使った黄色という意味です。

バロン

RGBのカラーコードでは16進数を使うことがあって、CMYKは何％使うかで表すことが多いのですな。

岩崎芽衣

はい、そのように整理しておけば大丈夫です。

ここで覚えること

WebのRGBカラーコードでは、#RRGGBBの形で16進数を使って色を表す
16進数では、0～9とA～Fを使う
00が最小、FFが最大
RGBの各色は0～255の256段階で表すことができる
#FFFF00は、赤と緑が最大、青が0なので黄色
CMYKでは、各色を何％使うかという形で表すことが一般的

STEP 4

色の3属性

岩崎芽衣

最後に、色の3属性について学習しましょう。

バロン

また3つ覚えるのですかな？

岩崎芽衣

はい。
色の3属性は、「色相」「明度」「彩度」です。

バロン

色相、明度、彩度……。
急に難しそうな言葉が出てきたですぞ。

岩崎芽衣

意味はそれほど難しくありません。
まず色相は、赤、青、緑、黄色といった色の違いのことです。

バロン

「何色なのか」が色相ですかな？

岩崎芽衣

はい。
そのくらいの理解で大丈夫です。

岩崎芽衣

次に明度は、色の明るさを表します。

バロン

同じ赤でも、明るい赤と暗い赤があるということですな。

岩崎芽衣

そうですね。
明度が高いほど明るく、低いほど暗くなります。

岩崎芽衣

そして彩度は、色の鮮やかさを表します。

バロン

鮮やかさですかな？

岩崎芽衣

はい。
鮮やかな赤は彩度が高く、くすんだ赤や灰色に近い赤は彩度が低い、というイメージです。

バロン

色相は何色か。
明度は明るいか暗いか。
彩度は鮮やかか、くすんでいるか、ですな。

岩崎芽衣

はい、その整理で大丈夫です。

バロン

色の3属性もRGBやCMYのように英語の頭文字を取って表したりするのですかな？

岩崎芽衣

はい。
色相、彩度、明るさを使って色を表す方法として、HSLがあります。

岩崎芽衣

HSLは、Hue、Saturation、Lightnessの頭文字を取ったもので、それぞれ色相、彩度、明るさを表しています。
また、画像編集ソフトなどでは、HSBという表し方を使うこともあります。

バロン

最後がLだったりBだったりするのですな。

岩崎芽衣

そうですね。
HSBは、Hue、Saturation、Brightnessの頭文字です。
HSLとHSBは同じものではありませんが、ここでは細かな違いまで覚える必要はありません。

バロン

まずは色相、明度、彩度の3属性を覚えれば良いのですな。

岩崎芽衣

はい。
試験対策としては、まずそれぞれの用語と意味を対応させられるようにしておきましょう。

ここで覚えること

色相は、赤、青、緑などの色の違い
明度は、色の明るさ
彩度は、色の鮮やかさ
HSLやHSBなど、色相や彩度などを使って色を表す方法もある

STEP 5

今日のまとめ

岩崎芽衣

それでは、今日の内容をまとめましょう。

バロン

まずは光の3原色、RGBですな。

岩崎芽衣

はい。
Red、Green、Blueの3色で、ディスプレイなどの表示に使われます。

バロン

光を加える加法混色で、3色を同じ強さで重ねると白ですぞ。

岩崎芽衣

次に色の3原色、CMYです。

バロン

Cyan、Magenta、Yellow。
プリンターなどの印刷で使われて、減法混色ですな。

岩崎芽衣

はい。
3色を均等に混ぜると理論上は黒になります。
実際の印刷では、黒を加えたCMYKがよく使われます。

バロン

RGBは混ぜると白、CMYは混ぜると黒。
ここは逆なので注意ですな。

岩崎芽衣

そうですね。

岩崎芽衣

そして、WebなどではRGBを16進数のカラーコードで表すことがあります。

バロン

#RRGGBBですな。
00が一番弱くて、FFが一番強いですぞ。

岩崎芽衣

はい。
#FFFF00なら、赤と緑が最大で青が0なので黄色です。

バロン

16進数とRGBの仕組みが分かれば、カラーコードも読めるのですな。

岩崎芽衣

そうですね。

岩崎芽衣

最後に、色の3属性は色相、明度、彩度です。

バロン

色相は何色か、明度は明るさ、彩度は鮮やかさですな。

岩崎芽衣

そのとおりです。
今回は覚える内容が少し多いので、それぞれを混同しないように整理しておきましょう。

バロン

RGB、CMY、カラーコード、色の3属性。
しっかり覚えるですぞ。

岩崎芽衣

はい。
今日もお疲れさまでした。

項目	内容
光の3原色	RGB：Red、Green、Blue
RGBの混色	加法混色。3色を同じ強さで重ねると白
RGBの主な用途	ディスプレイなどの画面表示
色の3原色	CMY：Cyan、Magenta、Yellow
CMYの混色	減法混色。3色を均等に混ぜると理論上は黒
CMYの主な用途	プリンターなどの印刷
RGBカラーコード	#RRGGBB
色相	色の違い
明度	色の明るさ
彩度	色の鮮やかさ

光の3原色(RGB)と色の3原色(CMY)

このページで覚えること

光の3原色

色の3原色

カラーコード

色の3属性

今日のまとめ

確認問題

学習完了

この記事は役に立ちましたか？

このページで覚えること

光の3原色

色の3原色

カラーコード

色の3属性

今日のまとめ

確認問題

学習完了

この記事は役に立ちましたか？

この記事をシェア