ウェブの色空間：sRGB・DCI-P3・Rec.2020・ガンマ、そして同じ16進数カラーが二つの画面で異なって見える理由
色空間とは：原色、色域、基準白色
色空間は三つのものを定義します：原色のセット、基準白色点、そして転送関数です。原色は CIE 1931 xy 色度図上の正確な色度座標として指定されます——これは標準的な観察者が知覚できるすべての色を表す二次元マップです。三つの原色はこの図上で三角形を形成します。三角形の内側にあるすべての色は、それらの原色をさまざまな比率で混合することで再現できます；外側の色は再現できません。この三角形が色空間の色域（ガマット）です。
基準白色は、三つの原色すべてが最大強度で駆動されたときに現れる色です。ほとんどの民生用・ウェブ標準では、これは D65 ——約 6500 K の色温度の平均的な昼光をモデル化した標準光源——です。ガマット原色が同一でも白色点が異なる二台のディスプレイは、中性グレーを異なる方法でレンダリングします。ブラウザが CSS 値 #808080 を解釈するとき、D65 白色点の sRGB を仮定し、ディスプレイがその仮定に一致することを前提とします。
sRGB：1996年に標準化されたウェブの汎用ベースライン
sRGB は1996年に国際電気標準会議によって IEC 61966-2-1 として定義されました。1990年代中頃の典型的な民生用 CRT モニターの特性に合わせて設計されました。赤の原色の CIE xy 座標は約 (0.64, 0.33)、緑は (0.30, 0.60)、青は (0.15, 0.06) です。結果として得られる色域三角形は、CIE 1931 色度図上で標準的な観察者に見える色のおよそ 35% をカバーします。
すべての CSS 十六進数カラー、ICC プロファイルを埋め込んでいない PNG や JPEG、HTML canvas のすべてのピクセルは、暗黙的に sRGB に属します。ブラウザは特に指定がない限り sRGB を仮定します。実際の限界は色域の端で顕著です：高彩度の赤、鮮やかな緑、純粋なシアンは完全に表現できません。屋外で撮影した熟したトマトは、sRGB 色域の外にある赤を持つことが多く、画像ファイルはその赤を最も近い sRGB 値にクリップするため、実物より画面上でわずかに鮮やかさが失われます。
DCI-P3：映画館規格が民生用ディスプレイへ
DCI-P3 はデジタル・シネマ・イニシアティブス・コンソーシアムで生まれました。その原色は sRGB と比べてシフトしています：赤の原色がわずかにオレンジ寄りに移動し（xy 約 0.680, 0.320）、緑はより純粋な緑方向に伸びています（0.265, 0.690）。結果として得られる色域は CIE 1931 色度図の約 45.5% をカバーします——sRGB より約 26% 広い面積です。この広い色域は、デジタル映写機がアナログフィルムに匹敵する彩度の高い色を再現できるように設計されました。
民生用ディスプレイが P3 原色を採用し始めたのは 2015 年頃で、Apple が 27 インチ iMac に P3 対応パネルを導入し、2016 年の iPhone 7 でも採用されました。P3 色空間を使用する P3 ディスプレイで #FF0000 としてレンダリングされたピクセルは、sRGB ディスプレイの同じ値より明らかに彩度が高く見えます。CSS は color() 関数で P3 を公開しています：color(display-p3 1 0 0) で最も彩度の高い P3 レッドを指定できます。2023 年以降、すべての主要ブラウザがこの構文を理解し、P3 対応ハードウェアでより広い色域を表示します。
Rec.2020：放送の未来規格と現在のディスプレイのギャップ
Rec.2020（正式には ITU-R BT.2020）は2012年に国際電気通信連合によって超高解像度テレビの規格として定義されました。その原色は単色光に近づきます：赤は約 630 nm、緑は約 532 nm、青は約 467 nm 付近で定義されています。結果として得られる色域は CIE 1931 色度図の約 75.8% をカバーし、sRGB の約2倍の面積です。
規格と実用の間のギャップは大きく、2025 年時点で完全な Rec.2020 色域を再現できる民生用ディスプレイは存在しません。ハイエンドのプロフェッショナル・リファレンス・モニターは、三次元色外観モデル CIECAM02 で測定すると Rec.2020 ボリュームの約 75–80% に達することがあります。HDR ビデオコンテンツは多くの場合、Rec.2020 原色に PQ または HLG 転送関数を組み合わせてマスタリングされますが、ストリーミングプラットフォームは最終的にトーンマッピングで Display P3 または sRGB にダウンマップされたシグナルを配信します。
ガンマと転送関数：sRGB エンコーディングが純粋なべき乗則でない理由
「ガンマ 2.2」という表現は sRGB を表すために広く使われていますが、sRGB は純粋なべき乗則ではなく区分的転送関数を使用しています。IEC 61966-2-1 規格は二つのセグメントを定義しています：非常に低い輝度値（線形 C が 0.0031308 以下）では C × 12.92 という線形エンコーディングで、このしきい値を超えると 1.055 × C^(1/2.4) − 0.055 に近い累乗曲線に切り替わります。結果は使用可能な範囲の大半でガンマ 2.2 に非常に近い近似になります。
このエンコーディングは画像処理で重要です。ガンマエンコードされた領域で隣接ピクセルを平均してダウンスケールすると、線形光での平均よりわずかに暗い結果になります——これは「ガンマ暗化平均問題」と呼ばれる既知のアーティファクトです。正しい画像縮小は値を先に線形化し、平均を取ってから再エンコードします。CSS グラデーションと color-mix() はデフォルトで sRGB 空間でブレンドされます——ガンマ圧縮された値を補間するため、線形光ではなく。CSS Color Level 4 では in srgb-linear で補間色空間を明示的に指定できます。
同じ16進数カラーが二つの画面で異なって見える理由
いくつかの独立した要因が、なぜ #FF6600 があるスクリーンで別のスクリーンと異なって見えるかを説明します。第一に、ディスプレイが広い物理色域（P3 ハードウェア）を持っているが OS による色管理がない場合、sRGB 信号値を広い原色ガマットに単純に展開し、すべての色が過飽和に見える可能性があります。第二に、未キャリブレーションのディスプレイは、sRGB 規格が想定する白色点、ガンマ曲線、色温度と異なる実際の値を持つ可能性があります。第三に、ブラウザの色管理サポートは歴史的にばらつきがありました：macOS の Safari は完全な ICC プロファイルによる色管理を適用しますが、他のブラウザの旧バージョンはサポートが部分的でした。
画像に埋め込まれた、またはキャリブレーションソフトウェアによってディスプレイに適用される ICC カラープロファイルは、そのコンテンツのエンコードされた色空間からディスプレイの実際の測定応答へのマッピングを記述します。OS の色管理パイプライン——macOS の ColorSync、Windows の Windows Color System——が接続された各ディスプレイに対してこの変換を行います。ワイドガマットディスプレイをターゲットにするウェブ開発者は、@media (color-gamut: p3) を使って鮮やかなインターフェースカラーに color(display-p3 ...) の値を提供し、プレーンな16進数を sRGB フォールバックとして保持できます。TeaFun のカラーパレットと色覚シミュレーションツールは sRGB で動作します。