RGBとは？RGBカラーの仕組みや色の作り方をわかりやすく解説

RGBとは、赤（Red）・緑（Green）・青（Blue）の3色を組み合わせて色を表現する方式です。 パソコンやスマートフォンのディスプレイ、デジタルカメラ、画像ファイル、Webサイトなど、デジタル機器のさまざまな場所で利用されています。

RGBでは、赤・緑・青それぞれの強さを数値で指定します。 一般的な8ビットRGBでは、それぞれ0～255の256段階で表現できるため、3つの色を組み合わせることで約1,677万色を表現できます。

例えば、赤を最大にして緑と青を0にすると赤色になります。 RGB(255, 0, 0)は赤、RGB(0, 255, 0)は緑、RGB(0, 0, 255)は青を表します。

RGBとは？

RGBは、Red・Green・Blueの3色を使って色を表現する方式です。 日本語では、それぞれ赤・緑・青を意味します。

デジタル画像やディスプレイでは、この3色の光を組み合わせることでさまざまな色を表現します。 例えば、赤と緑の光を組み合わせると黄色、赤と青を組み合わせるとマゼンタ、緑と青を組み合わせるとシアンになります。

RGBは、Webデザインや画像編集、デジタルカメラ、テレビ、スマートフォンなど、デジタル画像を扱うさまざまな分野で利用されています。

RGBの3色の意味

R = Red（赤）

RはRed（赤）を表します。 RGBカラーでは、赤い光の強さを数値で指定します。

一般的な8ビットRGBでは、0が赤の光を出さない状態、255が最大の強さです。 例えば、RGB(255, 0, 0)では赤だけが最大になっています。

G = Green（緑）

GはGreen（緑）を表します。 緑の光の強さを0～255の数値で指定します。

RGB(0, 255, 0)では、赤と青が0で、緑だけが最大になっているため、純粋な緑になります。

B = Blue（青）

BはBlue（青）を表します。 青の光の強さを0～255の数値で指定します。

RGB(0, 0, 255)では、青だけが最大になっているため、純粋な青になります。

RGBカラーの仕組み

RGBでは、赤・緑・青それぞれの光の強さを変えることで色を作ります。 3つの値を組み合わせて、1つの色を表現する仕組みです。

例えば、 RGB(255, 0, 0) と指定すると、赤の光が最大で、緑と青が0になります。 その結果、赤色が表示されます。

一方、 RGB(255, 255, 0) では赤と緑が最大、青が0になります。 赤と緑の光が加わることで黄色になります。

このように、RGBでは3つの数値を変えることでさまざまな色を表現できます。

0～255の数値は何を表す？

RGBカラーで使われる0～255という数値は、赤・緑・青それぞれの色の強さを表しています。

0はその色の光がない状態、255は最大の強さを表します。 その間の数値では、光の強さを段階的に調整できます。

8ビットRGBでは、R・G・Bのそれぞれが256段階を持ちます。 そのため、 256 × 256 × 256 = 16,777,216色 を表現できます。

このため、一般的な24ビットカラーでは約1,677万色を扱うことができます。

RGBで色を作る方法

RGBで色を作るときは、R・G・Bの3つの数値を調整します。 それぞれの数値が大きいほど、その色の光が強くなります。

赤を作る

RGB(255, 0, 0)

赤を最大、緑と青を0にすると赤になります。

緑を作る

RGB(0, 255, 0)

緑を最大、赤と青を0にすると緑になります。

青を作る

RGB(0, 0, 255)

青を最大、赤と緑を0にすると青になります。

白を作る

RGB(255, 255, 255)

3色すべてを最大にすると白になります。

黒を作る

RGB(0, 0, 0)

3色すべてを0にすると黒になります。

グレーを作る

RGB(128, 128, 128)

R・G・Bを同じ値にすると、グレー系の色になります。 値を大きくすると明るいグレー、小さくすると暗いグレーになります。

RGBカラーの代表例

RGBでは、3つの数値を組み合わせることでさまざまな色を表現できます。 代表的なカラーを以下にまとめます。

RGBの色を混ぜる仕組み

RGBは、絵の具のように色を混ぜる方式ではなく、光を組み合わせて色を表現する加法混色を基本としています。

赤・緑・青の光を組み合わせることで、より明るい色を作ることができます。

この仕組みは、ディスプレイの画素が赤・緑・青の成分を組み合わせて色を表示することと関係しています。 そのため、RGBはパソコンやスマートフォンなどの画面で色を扱うのに適した方式です。

RGBとHEXの違い

RGBとHEXは、どちらもデジタルカラーを表現するために使われます。 大きな違いは、色を表す数値の表記方法です。

RGBは10進数を使って、 RGB(255, 0, 0) のように表します。

一方、HEXカラーコードは16進数を使って、 #FF0000 のように表します。

例えば、 RGB(255, 0, 0) と #FF0000 は、同じ赤色を表します。

RGBとHEXは表記方法が違うだけで、対応する値が同じであれば同じ色を表現できます。

HEXカラーコードについて詳しく知りたい場合は、 HEXカラーコードとは？ も参考にしてください。

CSSでRGBカラーを使う方法

RGBカラーはWebサイトのCSSでも使用できます。 例えば、文字色を赤にする場合は以下のように指定できます。

color: rgb(255, 0, 0);

背景色を青にする場合は、

background-color: rgb(0, 0, 255);

このようにRGB値をCSSへ指定することで、Webページ上の文字や背景、ボーダーなどの色を設定できます。

RGBで透明度を指定する

CSSではRGBカラーに透明度（アルファ値）を加えて指定することもできます。 例えば、

background-color: rgba(255, 0, 0, 0.5);

とすると、赤色に50％の透明度を設定できます。 RGBAの最後の値はアルファ値で、一般的には0～1の範囲で指定します。

0に近いほど透明になり、1に近いほど不透明になります。

RGBが使われる場所

RGBはデジタル画像を扱うさまざまな場面で利用されています。

パソコン・スマートフォンのディスプレイ

ディスプレイでは、赤・緑・青の光を組み合わせてさまざまな色を表示します。 そのため、RGBは画面上の色を扱う基本的な仕組みの一つです。

Webサイト

Webサイトでは、CSSによる文字色・背景色・ボーダーなどの指定にRGBを利用できます。 HEXカラーコードと並んで、Webデザインでよく使われる色の表現方法です。

画像編集

画像編集ソフトでは、RGBカラーモードを使ってデジタル画像の色を編集することがあります。 写真やWeb用画像など、画面表示を目的とした画像ではRGBが広く利用されています。

デジタルカメラ

デジタルカメラで撮影された画像も、デジタルデータとしてRGBの各色成分を利用して色を表現します。

Webデザイン・UIデザイン

ボタン、背景、文字、アイコンなどの色を指定するときにもRGBカラーを利用できます。 HEXカラーコードやHSLなど、目的に応じて異なる表現方法が使い分けられています。

RGBのメリット・デメリット

メリット

• デジタル画面で色を扱いやすい
• 赤・緑・青の3つの値で色を表現できる
• 0～255の数値で色の強さを細かく指定できる
• 約1,677万色を表現できる
• CSSや画像編集ソフトなど幅広い用途で利用できる

デメリット

• 3つの数値だけでは直感的に色をイメージしにくい場合がある
• 印刷物ではRGBとは異なるCMYKが使われることが多い
• 同じRGB値でも表示環境によって見え方が完全に一致するとは限らない

RGBとHEXの比較

RGBとHEXは、どちらもWebデザインやデジタル画像で利用される代表的なカラー表現です。

どちらを使うべきかは、用途や作業環境によって異なります。 RGB値を直接調整したい場合はRGB、Webページのカラーコードを短く記述したい場合はHEXが便利です。

RGBとHEXの相互変換について詳しく知りたい場合は、 RGBとHEXの変換方法 も参考にしてください。

RGBカラーを確認・変換する方法

RGBの値をHEXカラーコードへ変換したり、HEXカラーコードをRGBへ変換したりする場合は、専用の変換ツールを利用すると簡単です。

例えば、RGB(51, 102, 204)はHEXでは#3366CCと表現できます。 逆に#3366CCをRGBへ変換するとRGB(51, 102, 204)になります。

複数のカラーコードを扱う場合は、手作業で計算するよりも変換ツールを利用すると効率的です。

よくある質問

RGBとは何ですか？

RGBは、Red（赤）・Green（緑）・Blue（青）の3色を組み合わせてデジタル上の色を表現する方式です。

RGBの0～255は何を意味しますか？

赤・緑・青それぞれの色の強さを表しています。 一般的な8ビットRGBでは0が最小、255が最大です。

RGBは何色まで表現できますか？

一般的な8ビットRGBでは、R・G・Bがそれぞれ256段階あるため、256 × 256 × 256 = 16,777,216通りの組み合わせがあります。

RGB(255, 0, 0)は何色ですか？

RGB(255, 0, 0)は赤色です。 赤の値が最大で、緑と青が0になっています。

RGB(0, 0, 0)は何色ですか？

RGB(0, 0, 0)は黒色です。 赤・緑・青のすべてが0になっています。

RGB(255, 255, 255)は何色ですか？

RGB(255, 255, 255)は白色です。 赤・緑・青のすべてが最大値になっています。

RGBとHEXは何が違いますか？

RGBは赤・緑・青の強さを10進数で表す方式で、HEXはそれぞれの値を16進数で表す方式です。 例えばRGB(255, 0, 0)と#FF0000は同じ赤色を表します。

まとめ

RGBとは、赤（Red）・緑（Green）・青（Blue）の3色を組み合わせて色を表現する方式です。

一般的な8ビットRGBでは、それぞれの色を0～255の256段階で指定できます。 3つの値を組み合わせることで、約1,677万色を表現できます。

• RGBはRed・Green・Blueの3色で構成される
• 一般的な8ビットRGBでは各色を0～255で指定する
• 3色の光を組み合わせてさまざまな色を表現する
• 約1,677万色を表現できる
• Webサイトや画像、ディスプレイなどで幅広く利用されている
• RGB(255, 0, 0)は赤、RGB(0, 0, 0)は黒、RGB(255, 255, 255)は白
• HEXカラーコードとは異なる表記方法で同じ色を表現できる

RGBはデジタル画像やWebデザインを理解するうえで基本となるカラー表現です。 RGBの仕組みを理解しておくと、HEXカラーコードやCSSの色指定、画像編集などについても理解しやすくなります。

関連ツール

• RGBからHEXへ変換 ：RGBカラーをHEXカラーコードへ変換
• HEXからRGBへ変換 ：HEXカラーコードをRGBへ変換
• カラーコード一覧 ：HTML・CSSで使えるカラーコードを確認

関連記事

• HEXカラーコードとは？
• RGBとHEXの違いとは？
• RGBとHEXの変換方法
• カラー・Webデザインガイド