色空間とは何か(What)
色空間は、色を数値で表すための座標系です。同じ「青」でも、
- sRGB(Web の標準)
- Display P3(広色域ディスプレイ)
- CMYK(印刷)
では、使える色の範囲(ガマット)が異なります。
なぜ色空間を意識するか(Why)
ブランドカラーを #4285F4 と指定しても、
- 安価なモニタと wide-gamut モニタでは 鮮やかさが違う
- 同じデータを印刷すると くすむ・ずれる ことがある
「同じ HEX = どこでも同じ見え方」ではないからです。検品・納品の前に 媒体と色空間 を揃えて確認する習慣が、実務では欠かせません。
どう使うか(How)
RGB と加算混色
ディスプレイは 光を足し合わせて 色を作ります(加算混色)。赤・緑・青のチャンネルそれぞれ 0〜255(または 0%〜100%)で指定します。
- 赤 + 緑 → 黄
- 赤 + 青 → マゼンタ
- 緑 + 青 → シアン
- すべて最大 → 白
たとえ: スマホの画面で白い背景を表示するとき、ピクセルは R・G・B を高く点灯させています。
sRGB とは
sRGB は Web ブラウザや多くのモニタが前提とする標準色空間です。CSS の #4285F4 や rgb(66, 133, 244) は、sRGB 上の値として解釈されます。
たとえ: Figma やブラウザの開発者ツールでコピーした HEX は、通常 sRGB として扱われます。P3 用に別途書き出す場合は、プロジェクトのガイドを確認します。
印刷との違い(実務のたとえ)
印刷は インクを重ねる減法混色(CMYK 等)が基本です。名刺やパンフレットでは、画面プレビューと 紙の仕上がり を別データで確認するのが一般的です。
ヘッダーの6色テーマは 画面(sRGB) 用です。印刷物の色見本(Pantone 等)とは別管理になることが多いです。
画面で鮮やかに見えた色が、紙ではくすむ — このギャップは色空間と媒体の違いから生じます。配色コースや実務では、画面用・印刷用 でデータを分けることがあります。
CIE Lab(知覚色空間の入口)
CIE Lab(L*a*b*)は、人の目の感じ方に近い 知覚的に均一 な色空間です。
| 軸 | 意味(ざっくり) |
|---|---|
| L* | 明度(0=黒 · 100=白に近い) |
| a* | 緑 ↔ 赤 の対立軸 |
| b* | 青 ↔ 黄 の対立軸 |
HSL の「同じ数値差=同じ見え方の差」とは限りません。Lab では、数値上の距離が 見た目の差 に近づくよう設計されています。
たとえ: ペイントの色調整で「もう少し黄みを足す」と言うとき、感覚に近いのは Lab の b* 軸のイメージです(実務では測色器の値で確認します)。
ミニクイズ
Web ブラウザで CSS の色指定が前提とする標準的な色空間はどれですか?
CIE Lab 色空間が実務で注目される主な理由はどれですか?