色空間の基礎(RGB/sRGB)

目安 18

学習目標

  • RGB が加算混色であることを説明できる
  • sRGB が Web のデフォルト色空間であることを知っている
  • モニタと印刷で色が一致しない理由を1つ挙げられる

色空間とは何か(What)

色空間は、色を数値で表すための座標系です。同じ「青」でも、

  • sRGB(Web の標準)
  • Display P3(広色域ディスプレイ)
  • CMYK(印刷)

では、使える色の範囲(ガマット)が異なります。

加算混色(RGB)と減法混色(CMYK)、および sRGB と広色域のガマット関係を示す模式図。
画面は光を足す加算混色、印刷はインクで吸収する減法混色。Web の既定は sRGB。広色域ディスプレイは同じ HEX でも鮮やかに見えることがある(模式図)。

なぜ色空間を意識するか(Why)

ブランドカラーを #4285F4 と指定しても、

  • 安価なモニタと wide-gamut モニタでは 鮮やかさが違う
  • 同じデータを印刷すると くすむ・ずれる ことがある

「同じ HEX = どこでも同じ見え方」ではないからです。検品・納品の前に 媒体と色空間 を揃えて確認する習慣が、実務では欠かせません。

どう使うか(How)

RGB と加算混色

ディスプレイは 光を足し合わせて 色を作ります(加算混色)。赤・緑・青のチャンネルそれぞれ 0〜255(または 0%〜100%)で指定します。

  • 赤 + 緑 → 黄
  • 赤 + 青 → マゼンタ
  • 緑 + 青 → シアン
  • すべて最大 → 白

たとえ: スマホの画面で白い背景を表示するとき、ピクセルは R・G・B を高く点灯させています。

sRGB とは

sRGB は Web ブラウザや多くのモニタが前提とする標準色空間です。CSS の #4285F4rgb(66, 133, 244) は、sRGB 上の値として解釈されます。

たとえ: Figma やブラウザの開発者ツールでコピーした HEX は、通常 sRGB として扱われます。P3 用に別途書き出す場合は、プロジェクトのガイドを確認します。

印刷との違い(実務のたとえ)

印刷は インクを重ねる減法混色(CMYK 等)が基本です。名刺やパンフレットでは、画面プレビューと 紙の仕上がり を別データで確認するのが一般的です。

ヘッダーの6色テーマは 画面(sRGB) 用です。印刷物の色見本(Pantone 等)とは別管理になることが多いです。

画面で鮮やかに見えた色が、紙ではくすむ — このギャップは色空間と媒体の違いから生じます。配色コースや実務では、画面用・印刷用 でデータを分けることがあります。

ミニクイズ

Web ブラウザで CSS の色指定が前提とする標準的な色空間はどれですか?

Web ブラウザで CSS の色指定が前提とする標準的な色空間はどれですか?