プログラミングで色を指定するとき、よく目にするのがRGBです。
「なぜ3つの数字なのか」「印刷の色と何が違うのか」という疑問に対して、光の三原色の考え方からディスプレイの仕組み、CSSでの書き方まで、実例とともにやさしく解説します。
今日から自分で色を正確に選べるようになる基礎を一歩ずつ身につけましょう。
RGBと光の三原色の基本
光の三原色(RGB)とは
RGBはRed(赤)・Green(緑)・Blue(青)の3色の光を混ぜて、さまざまな色を作る考え方です。
この3色は、人の目が色を感じる仕組みと対応しており、ディスプレイでもこの原理を使っています。
3つの光の明るさを変えるだけで膨大な色を表現できるのがポイントです。
なぜ3色なのか
人の網膜には赤・緑・青に反応しやすい3種類の受容体があり、その3つの反応の組み合わせで色を知覚します。
このため、デジタル表示でもRGBの3要素があれば、目に自然な色を再現しやすいのです。
RGBで表せる色のイメージ
各色の明るさが0なら黒、3色すべてが最大なら白になります。
例えば赤と緑を強くして青を弱くすると黄色っぽく見えます。
加法混色とは
光の色は、混ぜるほど明るくなる加法混色で表されます。
暗いところに光を足していくイメージで、RGBはこの加法混色の代表です。
よく使う組み合わせ
RGBの代表的な組み合わせは次のとおりです。
混ぜるほど明るく、最終的に白に近づくことがわかります。
| 光の組み合わせ | 結果の色 |
|---|---|
| R + G | 黄(Yellow) |
| G + B | シアン(Cyan) |
| R + B | マゼンタ(Magenta) |
| R + G + B | 白(White) |
| 何も光らせない | 黒(Black) |
減法混色との違い
インクや絵の具は光を足すのではなく、光を吸収して減らす混ざり方をします。
これを減法混色と呼び、基本はCMY(Cyan, Magenta, Yellow)です。
光を足すか、光を吸うか
ディスプレイは光源そのものなので加法混色ですが、紙に印刷する場合はインクが光を吸収するため減法混色になります。
混ぜるほど暗くなるのが特徴です。
| 方式 | 使う場面 | 混ぜるほど | 基本色 |
|---|---|---|---|
| 加法混色 | 画面(ディスプレイ) | 明るくなる | RGB |
| 減法混色 | 印刷(紙) | 暗くなる | CMY(実務ではCMYK) |
なぜコンピュータはRGBで色を表現するのか
ディスプレイの仕組み
ディスプレイは1つの画素をさらにR・G・Bの小さな光点(サブピクセル)に分け、それぞれの明るさを変えて色を作ります。
液晶でも有機ELでも基本は同じです。
ピクセルとサブピクセル
画面を拡大すると、赤・緑・青の細かな点が並び、それぞれの明るさを個別に制御していることがわかります。
3つの点が合わさって1つの色の点に見えるのです。
黒と白の作り方
3色すべて消せば黒、3色すべて最大にすれば白になります。
中間は3色のバランスで決まります。
RGBは電気信号で扱いやすい
RGBは「3つの数字で3つの明るさを制御する」だけなので、デジタルで扱いやすく高速です。
ハードウェアもソフトウェアも、この単純さを前提に最適化されています。
0〜255の数字で直接制御
多くの機器では各色を8ビットで表し、0〜255の整数をそのまま明るさとして使います。
このため、メモリにも「R値・G値・B値」を順に並べるだけで済みます。
単純で高速
和や平均をとるだけで色のブレンドなどの処理ができます。
この単純さはグラフィックス処理を効率化し、ゲームやUIの表示を滑らかにします。
カメラや映像もRGBで一貫
カメラの撮像素子はRGBのフィルタで光を受け取り、ディスプレイはRGBで表示します。
経路の途中でデータを圧縮するために別形式に変えることはありますが、入口と出口はRGBでそろっているのが基本です。
入力から出力までの流れ
撮影された光はR・G・Bの情報に分かれ、編集や合成を経て、最終的にR・G・Bの明るさとして再び画面に表示されます。
プログラミングでのRGBの表し方
0〜255の整数
最も基本的な表現は、R・G・Bそれぞれを0〜255の整数で指定する方法です。
0は暗い、255は最も明るいを意味します。
例とよくあるミス
例えば赤は(255, 0, 0)、空色は(0, 128, 255)のように表します。
各値は0〜255の範囲に収める必要があり、256や-1などは無効です。
順番は必ずR, G, Bで指定します。
16進数の色コード
CSSや画像編集でよく使うのが16進数の#RRGGBB形式です。
RRは赤、GGは緑、BBは青の明るさを表し、00〜FFが0〜255に対応します。
読み方と短縮形
例えば赤は#FF0000、緑は#00FF00、青は#0000FFです。
#RRGGBBの各2桁は16進数で、#112233のように書きます。
#RGBの短縮形(#F00は#FF0000と同じ)もあります。
| 色 | 10進(R,G,B) | 16進(#RRGGBB) |
|---|---|---|
| 赤 | (255, 0, 0) | #FF0000 |
| 緑 | (0, 255, 0) | #00FF00 |
| 青 | (0, 0, 255) | #0000FF |
| 白 | (255, 255, 255) | #FFFFFF |
| 黒 | (0, 0, 0) | #000000 |
CSSの書き方(rgb(), rgba())
CSSではrgb()やrgba()関数で直感的に色を指定できます。
数字は0〜255の整数で、読みやすいようにカンマやスペースを使います。
よく使う指定
純赤なら rgb(255, 0, 0)。
半透明な赤なら rgba(255, 0, 0, 0.5) のように書きます。
最近のブラウザは rgb(255 0 0 / 50%) のような書き方も対応していますが、まずはカンマ区切りから覚えると安心です。
| 目的 | 記述例 |
|---|---|
| 不透明な赤 | rgb(255, 0, 0) |
| 半透明50%の赤 | rgba(255, 0, 0, 0.5) |
| 不透明な空色 | rgb(0, 128, 255) |
RGBAの透明度(A)の意味
RGBAのAはAlpha(透明度)で、0が完全に透明、1が完全に不透明を意味します。
CSSでは0〜1の小数、または0%〜100%で指定します。
透明度で重ねたときの見え方
背景の上に半透明の色を置くと、背景色と手前の色が混ざって見えます。
例えば白い背景に rgba(0, 0, 255, 0.5) を重ねると、薄い青に感じられます。
透明度は色そのものではなく、重なり方に影響すると理解しましょう。
初心者が知っておきたい注意点
印刷はCMYK
画面の色(RGB)をそのまま印刷しても、同じ色にはなりません。
印刷は減法混色で、CMYK(Cyan, Magenta, Yellow, blacK)のインクを使うからです。
鮮やかな蛍光色などは、画面では光で明るく見えても紙では再現が難しいことがあります。
どうすればいいか
印刷前提のデザインは、早い段階で印刷向けの色指定に切り替えるか、印刷所の推奨設定に従いましょう。
ウェブ制作なら基本はRGBで問題ありません。
同じRGBでも端末で見え方が変わる
同じrgb(0, 128, 255)でも、スマホやPC、テレビで少し違って見えることがあります。
画面の明るさ設定や部品の違いが影響します。
実務でのコツ
ウェブ向けではまずは「sRGB」を基準に考えると無難です。
複数端末で見比べ、極端に暗い・暗すぎる配色を避けると、違いの影響を減らせます。
明るさと環境光で見え方が変わる
周囲が明るい場所では色は薄く感じ、暗い場所では強く感じます。
同じ画面でも屋外と室内では見え方が変わるため、重要な色のコントラストは十分に取りましょう。
アクセシビリティを意識した配色は多くのユーザーにやさしいです。
色名より数値指定が正確
CSSにはredやblueなどの色名がありますが、厳密な色あいを再現したいなら数値で指定するのが確実です。
rgb(0, 128, 255) や #0080FF のように決めれば、人に共有しても同じ指定を再現できます。
まとめ
コンピュータがRGBを使うのは、光そのものを表示するディスプレイにとって自然で、3つの明るさを数字で扱えば膨大な色を簡単かつ高速に表現できるからです。
加法混色(RGB)と減法混色(CMYK)の違いを押さえ、プログラミングでは0〜255や#RRGGBB、rgb()/rgba()を正しく使い分けることで、意図した色を確実に指定できます。
最後に、印刷物はCMYK、端末や環境光で見え方が変わる点も覚えておけば、実務でも迷いが減ります。
今日からRGBの数字が「意味のある色」に見えてくるはずです。
