コンピュータの色は光の三原色（RGB）で表現されるのかについてわかりやすく解説

2025年10月28日2025年11月30日

その他

コンピュータで色を扱うとき、ほとんどの場合RGBという3つの値を使います。

Web制作でもゲームプログラミングでも、色指定の場面では必ずといっていいほど登場します。

しかし、なぜ色は3つだけでよいのか、そしてなぜその3つが赤・緑・青なのかを、きちんと理解している人は意外と多くありません。

この記事では、光の三原色とディスプレイの仕組みから、RGBカラーコード、そして実際のプログラミングでの扱い方まで、順を追ってわかりやすく解説します。

目次 [ close ]

光の三原色(RGB)とは何か

コンピュータのRGBは、人間の目の仕組みと光の性質に根ざした表現方法です。

まずは、光そのものと色の基本的な考え方から整理していきます。

光の三原色と色の三属性

私たちが「色」と呼んでいるものは、物体そのものではなく光と人間の視覚が作り出す知覚です。

色にはよく色の三属性と呼ばれる3つの特徴があります。

色相(hue): 赤・黄・緑・青といった「色み」の違い
明度(value/brightness): 明るさの度合い
彩度(saturation): 鮮やかさの度合い

この三属性は、色を「どう感じるか」を表現するための概念です。

一方で、RGBは光そのものをどのように混ぜるかという観点から色を扱う仕組みです。

私たちの目の網膜には、主に3種類の「錐体細胞」があり、それぞれ赤(長波長)・緑(中波長)・青(短波長)付近の光に強く反応します。

この生物学的な事情から、3種類の光を強さを変えて混ぜることで、ほとんどの色を表現できることがわかっています。

これが光の三原色(Red, Green, Blue)です。

RGBは色の三属性そのものではなく、それらを技術的にコントロールするための座標系のような役割を果たしていると考えると理解しやすくなります。

加法混色とは

光の世界で色を混ぜるときの基本は加法混色(additive color mixing)です。

加法という名前のとおり、光を「足し合わせる」と明るくなっていきます。

加法混色の特徴をまとめると、次のようになります。

何も光がない状態が黒(0,0,0)
赤・緑・青の光をそれぞれ強めるほど、画面は明るく・色鮮やかになる
3色すべてを最大まで強くすると白になる

ディスプレイやプロジェクタは、この加法混色の原理を利用して色を作り出しています。

減法混色(CMYK)との違い

一方、印刷や絵の具の世界では減法混色(subtractive color mixing)が使われます。

こちらは光を直接足すのではなく、白い光から一部の色を「引いて」いく(吸収する)仕組みです。

減法混色では、次のような特徴があります。

何も塗っていない紙は、外の光をそのまま反射するので白
シアン・マゼンタ・イエローのインクを重ねるほど、反射される光が減り、暗くなる
3色すべてを重ねると理論上は黒ですが、実際には濁るので黒(K)インクを加えたCMYKが使われる

つまり、RGBは光そのものを扱うときの表現であり、CMYKはインクや顔料のように光を吸収する物質を扱うときの表現です。

この違いが、ディスプレイと印刷で色指定の方法が異なる最大の理由です。

コンピュータとRGBの関係

RGBが光の三原色だとわかると、次に気になるのは「なぜコンピュータはRGBを採用しているのか」という点です。

ここからは、ディスプレイの仕組みと絡めて説明します。

ディスプレイの仕組み

現代のディスプレイ(LCD, OLEDなど)は形式こそ違いますが、どれも画面を小さな点(画素, ピクセル)の集合として表示しています。

さらに、その1つ1つの画素の中は、赤・緑・青の3つのサブピクセルに分かれています。

人間の目は細かい構造を識別しきれないため、十分に小さなRGBサブピクセルが集まると、1色の点として知覚されます。

これにより、画面全体で何百万もの色を滑らかに表示できるのです。

なぜディスプレイではRGBが使われるのか

ディスプレイがRGBを使う理由は、主に次の2点に集約されます。

人間の目が「赤・緑・青」の3種類の光に対して敏感な構造を持っているため、効率よく多くの色を再現できること
ディスプレイは自ら光を発するデバイスであり、光の三原色による加法混色がそのまま利用できること

もし目の構造が違っていれば、コンピュータの色表現も違っていたかもしれません。

しかし現実には、3つの光源を用意するだけでほとんどの色を再現できるため、コストと表現力のバランスが非常に良い方式としてRGBが採用され続けています。

1画素をRGB数値で表現する仕組み

コンピュータ内部では、画面上の1つ1つの画素に対して、赤・緑・青の強さを数値で管理しています。

典型的な方式は、各色を0〜255の整数で表現する「8ビットRGB」です。

一般的な表現は(R, G, B)のタプルで、例えば次のようなイメージです。

黒: (0, 0, 0)
白: (255, 255, 255)
赤: (255, 0, 0)

このように、1画素はRGB3つの数値による座標点として表現されます。

画面全体は、そのような座標点の巨大な配列として扱われていると考えることができます。

RGBカラーコードの基本

ここからは、Web制作などでよく登場するRGBカラーコードについて、数値表現の理由や16進数との関係を整理します。

0〜255の数値で色を表現する理由

ほとんどの環境で、RGBは各チャンネル0〜255(計256段階)で表現されます。

この理由は、コンピュータが2進数で動いていることと直結しています。

256という数は2の8乗(= 2^8)であり、8ビット(=1バイト)で表現できる値の個数と一致します。

8ビットで表現できる値の範囲は 00000000(2進) 〜 11111111(2進)
これを10進数に直すと、0 〜 255 の256通り

このように、1色につき1バイトという構造にすると、メモリ管理がシンプルで効率的になります。

3色で合計3バイト(24ビット)なので、1画素あたり約1677万色(256^3)が表現可能です。

この数は人間の目の分解能から見ても十分であり、実用上「フルカラー」として扱われています。

2進数と16進数

プログラミング現場では、RGBの値を16進数で扱う場面も非常に多くあります。

とくにCSSのカラーコードではおなじみです。

ここで、2進数・10進数・16進数の関係を整理しておきます。

2進数: 0と1だけを使う。コンピュータ内部の実際の表現。
10進数: 私たちが普段使う数の表現。0〜9までを使う。
16進数: 0〜9とA〜F(=10〜15)を使う。2進数と相性が良く、人間にも読みやすい。

8ビット(0〜255)は、16進数では2桁で表現できます。

例えば、次のような対応になります。

例えば、赤のチャンネル値が255のとき:

2進数: 11111111
10進数: 255
16進数: FF

これが3色分あるので、CSSなどでは#RRGGBBという形で色を表現します。

例えば:

赤: #FF0000
緑: #00FF00
青: #0000FF

という具合です。

代表的な色(RGB)の具体例とイメージ

代表的な色について、RGB値とイメージを整理しておくと、プログラミング中の色指定が直感的になります。

色の名前	RGB(10進)	RGB(16進 #RRGGBB)	イメージ
黒	(0, 0, 0)	#000000	まったく光が出ていない状態
白	(255, 255, 255)	#FFFFFF	3色すべてが最大の明るさ
赤	(255, 0, 0)	#FF0000	強い注意喚起、警告
緑	(0, 255, 0)	#00FF00	成功、自然、安心
青	(0, 0, 255)	#0000FF	信頼感、リンクカラー
グレー	(128, 128, 128)	#808080	中立、背景、テキストのサブカラーなど
黄	(255, 255, 0)	#FFFF00	強い注意、ハイライト
シアン	(0, 255, 255)	#00FFFF	冷たさ、サイバーな印象
マゼンタ	(255, 0, 255)	#FF00FF	ビビッド、女性的・ポップな印象

RGB値を見たときに、「どの成分が強いか」「3色がどれくらいバランスしているか」を意識すると、数値から色のイメージを逆算しやすくなります。

プログラミングでのRGBの扱い方

ここからは、実際にプログラミングでRGBをどのように扱うかを、CSS・JavaScript・ゲーム/グラフィックスAPIの3つの観点からコンパクトに紹介します。

CSSでの色指定

Webフロントエンドでは、CSSで色を指定する場面が頻繁にあります。

CSSでは、RGBに基づく色指定方法が複数用意されています。

代表的な指定方法をいくつか挙げます。

16進数表記

フル指定: color: #RRGGBB;

例:

.title {
  color: #3366CC; /* やや暗めの青 */
}

rgb() 関数(10進数)

color: rgb(51, 102, 204); のように書く

例:

.button {
  background-color: rgb(255, 128, 0); /* オレンジ系 */
}

rgba() 関数(アルファ付き)
- rgba(R, G, B, A) 形式で、Aは0〜1の不透明度
- 例:
```
.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
}
```

CSS Color Level 4 以降では、rgb() にもスラッシュ区切りでアルファ値を指定できるなど仕様が広がっていますが、基本はどれもRGB値に不透明度を足した表現だと理解しておけば十分です。

JavaScriptでの色の扱い方

JavaScript単体には「色型」は存在せず、色は文字列や数値の組み合わせとして扱われます。

DOM操作でスタイルを変更するときは、CSSと同じ表記を文字列で渡すのが一般的です。

JavaScript

const box = document.getElementById('box');

// 16進数カラーコードで指定
box.style.backgroundColor = '#ff6600';

// rgb() 関数で指定
box.style.borderColor = 'rgb(0, 128, 255)';

// rgba() 関数で指定 (半透明)
box.style.color = 'rgba(255, 255, 255, 0.8)';

Canvas API や画像処理では、数値としてのRGBを扱う場面も多くなります。

例えば、ImageData オブジェクトでは、ピクセルの色がRGBAの4チャンネル×画素数分のUint8Arrayに格納されています。

JavaScript

const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data; // Uint8ClampedArray

// 先頭ピクセルのRGBAを取得
const r = data[0];
const g = data[1];
const b = data[2];
const a = data[3]; // 0〜255

このように、JavaScriptでは文字列としての色指定と数値としてのRGB(A)配列の2パターンで色を扱うことが多いです。

ゲームやグラフィックスAPIでのRGBA(透明度付き)表現

ゲームエンジンやグラフィックスAPI(OpenGL, WebGL, DirectX など)では、RGBAという4つのチャンネルで色を扱うのが一般的です。

R: Red(赤)
G: Green(緑)
B: Blue(青)
A: Alpha(アルファ, 不透明度)

アルファ値は、0.0〜1.0の浮動小数点数で表現されることが多く、0が完全に透明、1が完全に不透明を意味します。

例えば、WebGLなどでは次のような形でRGBAを指定します。

JavaScript

// gl.clearColor(r, g, b, a) - 0.0〜1.0で指定
gl.clearColor(0.0, 0.0, 0.0, 1.0); // 不透明な黒
gl.clear(gl.COLOR_BUFFER_BIT);

// フラグメントシェーダ内の例 (GLSL)
vec4 color = vec4(1.0, 0.0, 0.0, 0.5); // 半透明の赤

ゲームのスプライト、UI、パーティクルエフェクトなどでは、アルファブレンディングを使って「重なりの見え方」を制御します。

RGBだけでは「何色か」しか表現できませんが、RGBAにすることで「どれだけ透けるか」まで含めて制御できるようになります。

RGBAが一般的になった今でも、RGBの3つの値が色の本体であり、Aはそれに付加された透明度情報だと考えると整理しやすくなります。