色空間とワイドガモット（CSS Color 4とディスプレイP3）

なぜ同じ#ff0000でも画面ごとに赤さが違うのか

color: #ff0000 と書いたとき、ブラウザが画面に出す「赤」は1つに決まりません。同じRGBの数値でも、画面が再現できる色の範囲が違えば、出てくる赤の鮮やかさが変わるからです。ここを原理から理解する鍵が、色域（ガモット）と色空間という別物の2概念です。色域は「再現できる色の集合の広さ」、色空間は「数値をどの色として解釈するかの規則」を指します。両者を混同すると、color(display-p3 1 0 0) がなぜ普通の赤より鮮やかなのか、oklch() がなぜ明度を保てるのかが説明できません。本稿では sRGB / Display-P3 / Rec2020 の色域差から、CSS Color 4 の color() と oklch()、color-gamut メディア特性、そして HDR との切り分けまでを内部動作の順に整理します。色の数値が最終的にどう確定するかは CSS値の計算過程 と地続きの話です。

色域と色空間 ― 三角形と座標系

人が見える色全体は、CIE xy色度図という馬蹄形の領域で表せます。ディスプレイは赤・緑・青の3原色を混ぜて色を作るため、再現できる色は3原色を頂点とする三角形の内側に限られます。この三角形が**色域（ガモット）**です。原色がより純粋（彩度が高い）なほど三角形は大きくなり、より多くの色を出せます。

ここで重要なのは、色空間は「三角形の頂点位置 + 数値の解釈規則」をセットで定めるという点です。rgb(255 0 0) は「赤原色を最大、緑青を0」という指示ですが、その赤原色が sRGB の頂点なのか P3 の頂点なのかで、画面に出る色は物理的に別物になります。つまり同じ 1 0 0 でも、色空間が変われば指している色が変わります。さらに sRGB は数値と光量が比例しないガンマ補正（おおむね2.2乗相当の非線形変換）を含み、128 は物理光量の半分ではありません。色空間とはこの「原色位置・白色点・非線形変換（トランスファ関数）」の総体を指します。

sRGBの外へ ― color()関数とdisplay-p3

従来のCSSの rgb() / #rrggbb は sRGB色空間に固定されており、定義上 sRGB の三角形の外側の色は表現できません。P3画面が出せる「sRGBより鮮やかな赤」を指定する手段がそもそも無かったわけです。これを解いたのが CSS Color 4 の color() 関数で、色空間を明示してその座標系で色を指定できます。

.brand {
  /* sRGBの最大赤。P3画面でもsRGBの三角形内に留まる */
  color: #ff0000;
  /* P3の赤原色。sRGBの外側で、対応画面ではより鮮やかに出る */
  color: color(display-p3 1 0 0);
}

color(display-p3 1 0 0) は「P3色空間の赤を最大」という意味で、これは sRGB の三角形の外にある色です。後に書いた宣言が優先されるため、P3非対応のブラウザは color() 行を解釈できず、直前の #ff0000 にフォールバックします。この「無効な宣言は無視され、直前の有効値が残る」挙動はカスケードの基本で、詳しくは CSS値の計算過程 の通りです。

色がガモットの外に出た場合の扱いも仕様化されています。指定値が画面の色域に収まらないとき、ブラウザはガモットマッピング（gamut mapping）でその色域内の最も近い色へ寄せます。CSS Color 4 はこの写像を OKLCh 空間上で彩度（chroma）を落とす方式で規定しており、明度と色相をできるだけ保ったまま再現可能な色に丸めます。color(display-p3 …) で範囲外を指定しても、画面の能力に応じて破綻なく表示されるのはこのためです。

oklch() ― 知覚均等な色空間

color() がガモットの拡張だとすれば、oklch() は操作のしやすさを解く関数です。従来の hsl() は計算が単純な反面、同じ明度パラメータでも色相によって人の感じる明るさが大きくぶれます（黄色は明るく、青は暗く見える）。これは HSL が sRGB を機械的に変換しただけで、人の知覚に沿っていないためです。

oklch() は OKLab という知覚均等を狙って設計された色空間に基づきます。3つの軸はそれぞれ独立した意味を持ちます。

:root {
  /* Lを固定し色相だけ回すと、明るさの揃ったパレットになる */
  --primary:  oklch(0.65 0.2  250);  /* 青 */
  --accent:   oklch(0.65 0.2  20);   /* 赤。明度は青と同じに感じる */
  /* Cを上げるとP3でしか出せない鮮やかさに踏み込める */
  --vivid:    oklch(0.65 0.37 150);
}

OKLab の利点は実務に直結します。第一に、L を固定して H だけ変えれば知覚上の明るさが揃ったパレットを作れ、コントラスト比の管理が安定します。第二に、2色間の補間（グラデーションやアニメーション）が知覚的に滑らかになり、hsl で起きがちな途中のくすみ（グレーを通る現象）を避けられます。第三に、oklch() は C を大きく取ればsRGBの外まで自然に指定できるため、color(display-p3 …) を直接書かずとも広色域へ踏み込めます。範囲外なら前述のガモットマッピングで丸められます。

color-gamutメディア特性で出し分ける

画面が広色域に対応しているかは @media (color-gamut: …) で問い合わせできます。srgb / p3 / rec2020 の3段階があり、指定した色域を画面がおおむねカバーしていれば真になります（P3画面は通常 color-gamut: srgb も p3 も真になります）。これを使えば、対応環境にだけ広色域値を渡す出し分けが書けます。

.hero {
  /* 既定はsRGB。全環境で確実に表示される */
  background: #1763ff;
}
@media (color-gamut: p3) {
  .hero {
    /* P3画面でだけ、sRGBの外まで踏み込んだ鮮やかな青に */
    background: color(display-p3 0.09 0.39 1);
  }
}

ただし color() 自体がフォールバックを持つため、多くの場合このメディアクエリは必須ではありません。color(display-p3 …) を直接書けば、非対応ブラウザは直前のsRGB宣言に自動で落ちます。color-gamut が要るのは、対応状況によってレイアウトや画像素材ごと切り替えるなど、色値の単純フォールバックでは足りないケースです。

ワイドガモットとHDRは別物

最後に最も誤解されやすい切り分けです。ワイドガモット（広色域）と HDR（ハイダイナミックレンジ）は別の軸で、混同するとメディアクエリを取り違えます。

色域は xy色度図上の「三角形の広さ」、HDR は z軸方向の「輝度の天井の高さ」に当たり、直交します。CSS では HDR 能力を @media (dynamic-range: high) で別に問い合わせます。Rec2020 が両方の文脈で出てくるため混同されますが、Rec2020 は色域の規格であり、HDR はそこに PQ/HLG のような輝度のトランスファ関数を組み合わせて初めて成立します。なお色域や輝度の指定が最終的に画素値となって画面へ届くまでの段は ピクセルパイプライン、画像側の色の扱いは 画像のデコードとレンダリング で補完してください。

まとめ