コンピューターは色をどう作るのか: RGB・HEX・2進数の話

#FF0000. #00FF00. #0000FF. デザインカンプやコードで一度は目にしたことがある表記でしょう。暗号のようにも、ゲームのコードのようにも見えます。実は色の名前です。

#FF0000

#00FF00

#0000FF

上から順に赤・緑・青。コンピューターが色を呼ぶときに使う名前です。この表記がどこから来たのかを解説します。

RGB — 色を作る3文字

Red、Green、Blue。光の3原色です。混ぜる割合によって、私たちが見るすべての色が生まれます。

私たちは毎日 RGB を見ている

画面があるところには、ほぼ必ず RGB があります。

モニター / TV — ピクセル 1 つが赤・緑・青の 3 点で構成される
スマートフォンの画面 — 同じ構造で、より小さなピクセル
ゲーミングキーボードの LED — 1 キーに R・G・B LED が 3 個
PC ケースのライティング — RGB ストリップはそのまま RGB 信号

画面を十分に拡大すると見えてきます。赤、緑、青。それだけです。 何百万もの小さな RGB の点が集まって、私たちが見る 1 枚の画面ができています。

色は混ぜて作る

RGB の各チャンネルは 0 から 255 までの強さを持ちます。

RGB(255, 0, 0) — 赤だけ最大 → 純粋な赤
RGB(0, 255, 0) — 緑だけ最大 → 純粋な緑
RGB(255, 255, 0) — 赤 + 緑 → 黄色
RGB(0, 0, 0) — すべてオフ → 黒
RGB(255, 255, 255) — すべて最大 → 白

赤と緑を混ぜると黄色になるのは直感に反するかもしれませんが、これは光の加法混合です。美術の授業で習った絵の具の混色（赤 + 緑 = 茶色）とは異なるルールです。光は足すほど明るくなり、すべて合わせると白になります。

3 つのスライダーを動かして確かめてみてください。

#FF5733

RGB · 255 · 87 · 51

R 255 11111111

G 87 01010111

B 51 00110011

右端に表示される 8 桁の数字が、そのチャンネルの2 進数表現です。スライダーを動かすとこの数字も一緒に変わります。0 と 1 でどうやって 256 通りを作るのかが次のテーマです。

なぜ 0 から 255 なのか

コンピューターは 0 と 1 しか扱いません。0 か 1 を格納する 1 桁をビット（bit）と呼びます。ビットが増えるほど、表現できる値が2 倍ずつ増えていきます。

0/1

1 ビット

= 2 通り

0/10/1

2 ビット

= 4 通り

0/10/10/10/1

4 ビット

= 16 通り

0/10/10/10/1 0/10/10/10/1

8 ビット

= 256 通り ← RGB 1 チャンネル

8 ビット = 1 バイト（byte）。1 色に RGB 3 チャンネル、合計 3 バイト = 24 ビットです。24 ビットは約 1,670 万通りの色を表現できます。人間の目で識別するには十分な段階数なので、1 バイトが 1 チャンネルの標準になりました。

2 進数を直接読んでみる

各桁には決まった値があります。左から順に 128、64、32、16、8、4、2、1 — 2 の累乗です。

1282⁷

642⁶

322⁵

162⁴

82³

42²

22¹

12⁰

1 が書かれた桁の値をすべて足すと 10 進数が得られます。

例 1

0128

064

032

016

8 + 2 = 10

例 2

1128

164

132

116

128 + 64 + 32 + 16 = 240

例 3 — 8 桁すべて 1

1128

164

132

116

128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 = 255

だから 8 ビットの最大値が 255 です。RGB 1 チャンネルの表現範囲が 0〜255 である正確な理由です。

HEX — 同じ数字をもっと短く

RGB(255, 255, 255)。文字数が 16 個あります。CSS の 1 行やデザインツールの 1 フィールドに毎回書くには長すぎます。そこで同じ数字をより短く書く方法が登場します。

16 進数とは

16 進数は 1 文字で 0 から 15 まで表す記数法です。ただし、普段使う数字は 0〜9 の 10 個だけ。足りない 6 個はアルファベットから借りてきます。

0→0

1→1

2→2

3→3

4→4

5→5

6→6

7→7

8→8

9→9

10→A

11→B

12→C

13→D

14→E

15→F

ルールは 3 つです。

0〜9 はそのまま通常通り
10 から A で始まる
F が 1 文字の最大値 (= 15)

なぜ 16 進数なのか

2 進数 4 桁（0000 〜 1111）はちょうど 16 通りを表現します。

0000→0

0001→1

0010→2

0011→3

0100→4

0101→5

0110→6

0111→7

1000→8

1001→9

1010→A

1011→B

1100→C

1101→D

1110→E

1111→F

2 進数 4 桁 = 16 進数 1 文字。4 文字を 1 文字に短縮します。RGB の 1 チャンネルが 8 ビットなので、ちょうど 16 進数 2 文字に収まります。

RGB を HEX に変換する方法

RGB(255, 87, 51) を変換してみましょう。

R の値を 16 進数に

255→FF

G の値を 16 進数に

87→57

B の値を 16 進数に

51→33

先頭に # を付けて R・G・B の順に並べる

#FF5733

14 文字だった表記が 7 文字になります。

HEX を見て色を推測する

逆に HEX を見れば、どんな色かの見当がつきます。

#FF5733 — R 最大（FF）、G 中間（57）、B 低め（33）→ 赤が強いオレンジ
#3576E0 — R 低め（35）、G 中間（76）、B 強め（E0）→ 少し紫がかった青
#29A85A — R 低め（29）、G 強め（A8）、B 低め（5A）→ 爽やかな緑

3 つの部分を見るだけで「オレンジ系か、青系か」が判断できれば、デザイナーとエンジニアが同じ言語で話せるようになります。

一行まとめ

RGB — 赤・緑・青の 3 チャンネル、各 0〜255
2 進数 8 ビット — 1 チャンネルが表現する 256 通りの正体
HEX — 同じ数字を 2 文字で短く書く表記法

3 つの概念が一本の線でつながると、カラーコードはもう謎の文字列ではありません。RGB の 3 つの数字がそのまま HEX の 6 文字です。

次のステップは、これらの数字をデザイナーの言語に変えることです。「少し明るく」「彩度だけ落として」「紙に同じ色で印刷して」といった要望は、RGB と HEX だけでは対応しにくいものです。HSL・CMYK・OKLCH がこの問題をどう解決するかについては、RGB だけでは足りない: HSL、CMYK、OKLCH のカラー表記法に続きます。