私たちが普段みている Webサイトやスマホアプリのゲームの画面や電子機器のディスプレイ。
そこに出てくる「色」は、すべて ある法則 にしたがって作られています。

実は Web の世界の色は、

  • 光で色を作るしくみ である RGB
  • 数字だけで色を表す 16進数カラーコード

によって成り立っています。

今回は、「そもそもなぜRGBなの？」という基本の疑問からはじまり、色を数字で表す「16進数カラーコード」まで解説していきます！

🔦 1. 色には2つの作り方がある

RGB（光の三原色）と CMYK（インクの四色）

日常にある「色」には、大きく分けて 2つの作り方 があります。

💡① 光で色を作る → RGB（光の三原色）

スマホ・パソコン・テレビなど、光を自分で出すもの は RGB を使います。

RGBとは…

  • R = Red（赤）
  • G = Green（緑）
  • B = Blue（青）

この3つの光の強さで色が決まります。

光は混ぜるほど明るくなるので、
加法混色（かほうこんしょく） と呼ばれます。

・赤＋緑＋青 → 白
・赤＋緑 → 黄色
・赤＋青 → ピンク
・緑＋青 → 水色


🖨② インクで色を作る → CMYK（インクの四色）

一方、プリンター・絵の具・雑誌の印刷などは光を出さないもの なので CMYK を使います。

  • C = シアン（青みの水色）
  • M = マゼンタ（赤紫）
  • Y = イエロー
  • K = 黒（ブラック）

インクは混ぜるほど暗くなるので、
減法混色（げんぽうこんしょく） と呼ばれています。

🌐 2. Webの世界は「光」でできている

だから RGB が使われる！

ここまでで2つの色の作り方が見えてきました。

  • 光は RGB
  • インクは CMYK

スマホやパソコンの画面は、
自分で光を出して色を作る仕組み です。

したがって…

💡 → Webやアプリの色は 、すべて RGB が基準

Webデザインに出てくる

  • #FF0000
  • rgb(255,0,0)
  • rgba(255,0,0,0.5)

などの表記は、全部 RGB をベースにしています。

🔢 3. RGBは「0〜255」の数字で色を表す

RGB の3色は、どれだけ光らせるか？を 0〜255 の数字で表します。

  • 0 → 光らない
  • 255 → 最強に光る

例：

色RGB
赤25500
緑02550
青00255
白255255255
黒000

とてもシンプル！

💻 4. Webでよく見る「#FF0000」って何？

16進数カラーコードとは

HTML や CSS で出てくる #FF0000 などの表記。
これが 16進数カラーコード と呼ばれるものです。

これは RGB を
2桁の16進数に変換したもの です。

🧮 16進数とは？

10進数のように 0〜9 までではなく…

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

という 16種類 の記号を使う数の表し方です。

  • 10進数の10 → 16進数では “A”
  • 10進数の15 → 16進数では “F”

🔄 5. RGB → 16進数の変換方法

例：RGB(255, 0, 0)

255 を 16進数にすると…

255 ÷ 16 ＝ 15 あまり 15
→ 15 は 16進数で「F」

なので

255 → FF

よって

RGB(255,0,0) → #FF0000

となります。

もう1つ例：RGB(128, 64, 32)

  • 128 → 80
    （128 ÷ 16＝8 あまり0 → 16進数で「80」）
  • 64 → 40
  • 32 → 20

まとめると…

#804020

🔁 6. 16進数 → RGB の変換方法

例：#33AAFF

2桁ずつ分けて 16進数 → 10進数に戻します。

  • 33 → 16×3＋3 = 51
  • AA → 16×10＋10 = 170
  • FF → 16×15＋15 = 255

つまり…

RGB(51,170,255)

きれいな水色です！

🧪 7. プログラミングで色を変えてみよう！（体験）

入力したカラーコードで背景色が変わるデモです。

<input id="color" placeholder="#33AAFF を入力してね">
<button onclick="changeColor()">色を変える</button>

<div id="box" style="width:200px;height:200px;margin-top:20px;"></div>

<script>
function changeColor() {
  const color = document.getElementById("color").value;
  document.getElementById("box").style.backgroundColor = color;
}
</script>

実際に動かすと、色の仕組みがよりよく理解できます。

🎉 まとめ：Webの色のしくみは 「光の世界」 だった！

  • RGB は光の三原色（赤・緑・青）
  • CMYK はインクの四色
  • Webは光で色を作るから RGB を使う
  • RGB は 0〜255 の数字で強さを表す
  • 16進数カラーコードは RGBを16進数にしたもの
  • #RRGGBB の形で表される
  • 変換方法を知ると色の仕組みがよくわかる！

Webの色の裏側には、光の性質や数学の考え方がぎゅっと詰まっています。

色のルールを知れば、自分で Web サイトやゲーム画面を作るときにも、
もっと自由に、もっと正確に色を扱えるようになりますよ！