RGB｜東京のホームページ制作会社

RGB

RGBとは？

RGB（アールジービー）とは、Red（赤）・Green（緑）・Blue（青）という光の三原色を用いた色表現の方式です。この3色を基準として、それぞれの強さを数値で調整することで、あらゆる色を再現することができます。

RGBは、特にディスプレイやモニター、デジタルカメラ、スマートフォンなどの光を使った表示デバイスで用いられており、Web制作やアプリデザインなど、デジタル領域の色設計において標準的なカラーモデルとなっています。

RGBの仕組みと「加法混色」

RGBの特徴は、色を混ぜれば混ぜるほど明るくなる「加法混色（加法混合）」という特性にあります。

赤 + 緑 → 黄
緑 + 青 → シアン（水色）
青 + 赤 → マゼンタ（赤紫）
赤 + 緑 + 青（全て最大値）→ 白

このようにRGBは、三色すべてを100%（255）で重ねると白色となり、逆に全て0の状態では黒色となります。
この「加法混色」は、光を前提とした表現方法であるため、印刷物などのインクを使った「減法混色（CMYK）」とは原理が逆になります。

RGBと数値表現

RGBはそれぞれの色成分を0〜255の256段階で数値化して指定します（8ビットカラー）。
例）

黒：rgb(0, 0, 0)
白：rgb(255, 255, 255)
赤：rgb(255, 0, 0)
緑：rgb(0, 255, 0)
青：rgb(0, 0, 255)

また、Webデザインなどでは、16進数表記（HEX）で色指定することも多く、

赤：#FF0000
緑：#00FF00
青：#0000FF
というように表されます。

RGBとWeb制作の関係

Webサイトやアプリケーションのデザインにおいては、RGBによる色指定が標準です。
HTMLやCSSでは、colorやbackground-colorなどのプロパティにRGBもしくはHEX形式で色を指定します。

/* CSSでのRGB指定例 */
body {
  background-color: rgb(245, 245, 245);
  color: #333333;
}

近年では、CSSでもrgba()のように透明度（アルファ値）を加えた指定もよく使われます。

/* 半透明の黒を指定 */
background-color: rgba(0, 0, 0, 0.5);

RGBとデバイス環境の関係

RGBは、モニターやデバイスの種類やキャリブレーション設定により見え方が異なるため、特にデザイン業務では「カラープロファイル」の設定にも注意が必要です。
MacとWindowsで同じRGB値でも色味が若干異なることがあり、正確なカラー再現を求める場合はsRGBなどの標準プロファイルを使用するのが一般的です。