RGBとは？色の仕組み・数値・カラーコードを解説
RGBは赤・緑・青の光の強さで色を表す方式です。0〜255の数値、sRGB、HEXカラーコードとの関係、CMYKとの違いをわかりやすく解説します。
資料・研究ベース表示結果はディスプレイの色域・設定・観察環境でも変わります。
はじめて読む方へ｜まず知っておきたい基本
この記事で出てくる基本用語を先に確認します。ここだけ押さえておけば、専門知識がなくても本文を読み進められます。
sRGBは、Webや一般的なディスプレイで広く使われる標準的なRGB色空間です。同じRGB数値でも色空間が違えば見え方や意味が変わることがあります。
RGBはRed・Green・Blueの3つの光を組み合わせて色を表す方式です。一般的な8bit表現では各成分を0〜255で示します。
CMYKはCyan・Magenta・Yellow・Blackのインキを基準に色を扱う印刷向けの方式です。実際の値や再現色は紙・インキ・印刷条件・ICCプロファイルで変わります。
RGBは、Red（赤）、Green（緑）、Blue（青）の3成分で色を表す方式です。PC・スマートフォン・テレビなど、光を出すディスプレイで広く使われます。Webのカラーコードを理解するうえでも基本になる仕組みです。
RGBは『光の三原色』を数値で扱う仕組みです。一般的な8bit表現では各成分を0〜255で指定し、3成分を足すほど明るくなります。HEXも、従来のWebカラーではこのRGB値を16進数で表した書き方です。
記事テーマを視覚的に理解するための色見本です。概念に固定の公式色がない場合は教材表示として扱います。
#FF0000#00FF00#0000FFRGBとは？赤・緑・青の光を組み合わせる
RGBは3色の光の強さを組み合わせて色を作る加法混色です。光を重ねるほど明るくなり、3色を最大にすると白になります。
0〜255の数値でどう色が変わる？
| RGB値 | 色 | HEX |
|---|---|---|
rgb(255,0,0) |
赤#BE0032色ページを見る → |
#FF0000 |
rgb(0,255,0) |
緑#00B66E色ページを見る → |
#00FF00 |
rgb(0,0,255) |
青#006AB6色ページを見る → |
#0000FF |
rgb(255,255,255) |
白#F0F0F0色ページを見る → |
#FFFFFF |
rgb(0,0,0) |
黒#2A2A2A色ページを見る → |
#000000 |
RGBとHEXの関係
HEXはRGB各成分を16進数で表したものです。たとえば #336699 は、R=51、G=102、B=153に対応します。表記方法が違うだけで、従来のWebカラーでは同じsRGBの色を指します。
カラーコード検索・変換を使えば、HEXとRGBを相互に確認できます。
sRGBとは？Webで基準になる代表的なRGB色空間
RGBは1種類ではありません。どの赤・緑・青を基準にするかによって色空間が変わります。Webで長く標準的に使われてきたのがsRGBです。
現在のCSSではDisplay P3やLab、LCH、OKLab、OKLCHなども使えますが、HEXや一般的な rgb() を理解する入口としてsRGBは重要です。
RGBとCMYKの違い
| 項目 | RGB | CMYK |
|---|---|---|
| 主な用途 | 画面・Web・写真 | 印刷・入稿 |
| 方式 | 加法混色 | 減法混色 |
白#F0F0F0色ページを見る → |
3成分最大で白 | 紙の白を利用 |
黒#2A2A2A色ページを見る → |
3成分0で黒 | KやCMYで作る |
CMYKとは？とRGBとCMYKの違いでさらに詳しく確認できます。
同じRGB値でも、見え方が完全に同じとは限らない
ディスプレイの明るさ、色域、キャリブレーション、ブラウザやOSのカラーマネジメント、周囲の照明などによって見え方は変わります。RGB値は指定値であって、すべての画面で完全に同じ見え方を保証するものではありません。
厳密な色管理では、RGB値だけでなく色空間・ICCプロファイル・表示環境まで含めて考える必要があります。
RGBを理解するとWeb配色が楽になる
RGBの各成分を直接見ると、赤み・緑み・青みのどこが強いかを数値で把握できます。さらにHSLやOKLCHなど別の表現と比較すると、色相・明るさ・鮮やかさの調整もしやすくなります。
色しるべでRGBを実際に確認する
RGBを数値で見る
RGBは、赤（R）・緑（G）・青（B）の光を0〜255などの数値で表す方式です。Webで使うHEXカラーコードは、一般的なsRGBのRGB値を16進数で表現したものとして扱われます。
| 色 | RGB | HEX |
|---|---|---|
| sRGB 赤（R） | 255, 0, 0 | #FF0000 |
| sRGB 緑（G） | 0, 255, 0 | #00FF00 |
| sRGB 青（B） | 0, 0, 255 | #0000FF |
| sRGB 白 | 255, 255, 255 | #FFFFFF |
| sRGB 黒 | 0, 0, 0 | #000000 |
RGBは色の表現方式の総称です。sRGB、Display P3、Adobe RGBなどでは再現できる色域が異なります。Webの従来RGB/HEXは通常sRGBとして扱われます。
RGBについてよくある質問
RGBは0〜255でしか表せませんか？
一般的な8bit表現では0〜255ですが、内部処理やCSSでは百分率・浮動小数点など別の表現もあります。
HEXとRGBはどちらが正確ですか？
従来のsRGB範囲で同じ色を指定する限り、表記方法が違うだけで同じ色を表せます。
RGBの色はそのまま印刷できますか？
印刷はCMYKなど別の出力条件を使うため、RGBの鮮やかな色の一部はそのまま再現できません。
参考にした資料
出典・確認情報
sRGBとrgb()の定義を参照。色管理部分はInternational Color Consortiumも補助参照。
色の仕組みを、実際の数値で確かめる
RGB・CMYK・HEXの説明を読んだら、変換ツールで同じ色を数値として見比べられます。
