CSS の色域：sRGB / Display P3 / Rec2020 / OKLCH の違いと使い分け
CSS で色を書くときの色域は長らく sRGB（hex / rgb / hsl）に固定でしたが、CSS Color Module Level 4 と Display P3 ディスプレイの普及で、より広い色域（Display P3、Rec2020）が現実に使えるようになりました。本記事では各色域がカバーする色の範囲、CSS での書き方、ディスプレイ・ブラウザ側の対応状況、そして OKLCH のような知覚均等な空間との関係を整理します。
色域とは
「色域（gamut）」は、ある色空間で表現できる色の集合。広いほど鮮やかな色が出せるが、対応するディスプレイがないと意味がありません。
各色域がカバーする CIE 1931 chromaticity diagram 上の三角形面積（おおよそ）：
| 色域 | 占有率 | 主な用途 |
|---|---|---|
| sRGB | 35% | 従来の Web、HD 動画 |
| Display P3 | 45% | iPhone・Mac・最新スマホ |
| Rec2020 | 75% | UHD/4K HDR コンテンツ |
| Rec2100 | Rec2020 と同じ | HDR10 / HLG |
数字は「人間が見える全色のうちこの色空間でどれだけ表現できるか」のおおよその割合。Rec2020 を完全に表示できるディスプレイはまだ少ないですが、Display P3 はモダン端末で標準です。
CSS での書き方
従来：sRGB に固定
color: #ff0000;
color: rgb(255, 0, 0);
color: hsl(0, 100%, 50%);これらはすべて sRGB 空間。Display P3 の赤を表現できない（最大値 255 でも sRGB の範囲を超えられない）。
color() 関数：色空間を明示
color: color(display-p3 1 0 0);
color: color(rec2020 1 0 0);color() 関数で色空間を明示して指定。display-p3 の (1, 0, 0) は sRGB の (1, 0, 0) より鮮やかな赤。
oklch()：知覚均等な空間
color: oklch(70% 0.2 30);OKLCH（Oklab を極座標で書いたもの）は、人間の視覚に均等になるように設計された色空間。
L（明度）：0% - 100%C（彩度、chroma）：0 - 0.4 程度H（色相）：0deg - 360deg
OKLCH は色域ではなく色の表現方法。OKLCH の値は Display P3 や Rec2020 の色域もカバーできます（C を大きくすれば sRGB 域外の色も表せる）。
display-p3 キーワード
color: rgb(from #ff0000 r g b / display-p3);
/* CSS Color 5 の機能、まだ広くは未対応 */CSS Color Module Level 5 では from 構文での色空間変換が定義されていますが、サポートはまだ限定的。
なぜ OKLCH が推されるのか
hsl(0deg, 100%, 50%) のような HSL は記述しやすいが、色相を変えても明度が一定にならない：
hsl(0deg, 100%, 50%) /* 純赤 */
hsl(60deg, 100%, 50%) /* 黄色 — 同じ "50% 明度" のはずが眩しい */
hsl(240deg, 100%, 50%) /* 純青 — 黒に近い */HSL の「明度 50%」は計算上の値で、人間が感じる明るさは色相によって大きくぶれる。OKLCH はこの問題を解消：
oklch(70% 0.2 0) /* 明度 70% の赤 */
oklch(70% 0.2 60) /* 明度 70% の黄色 — 知覚的に同じ明るさ */
oklch(70% 0.2 240) /* 明度 70% の青 — 同じく */「明度 70% の色相違いセット」を作るときに色相間で明度が揃う。デザインシステムのカラーパレット定義が圧倒的に楽になります。
ディスプレイの対応状況
| 端末 | 色域 | 備考 |
|---|---|---|
| iPhone 7 以降 | Display P3 | 9 年連続で標準 |
| MacBook 2015 以降 | Display P3 | iMac 5K 以降標準 |
| iPad Pro | Display P3 | iPad Air 第 4 世代以降も対応 |
| Galaxy S 系・最新 Pixel | Display P3 | Android はメーカー差大 |
| PC モニター（ハイエンド） | Display P3 / Adobe RGB | Eizo・Apple Studio Display 等 |
| PC モニター（一般） | sRGB（70-99%） | 4K でも sRGB 止まりの製品多数 |
ユーザーの端末が Display P3 をサポートしていない場合、color(display-p3 1 0 0) はブラウザが sRGB の最も近い色にマップして表示します（ガマットマッピング）。色は出るが、Display P3 の旨味は失われる。
color-gamut メディアクエリ
ユーザーのディスプレイ性能で出し分け：
.brand-red {
color: #ff0000;
}
@media (color-gamut: p3) {
.brand-red {
color: color(display-p3 1 0 0);
}
}
@media (color-gamut: rec2020) {
.brand-red {
color: color(rec2020 1 0 0);
}
}「Display P3 で見ているユーザーには P3 の鮮やかな赤、sRGB ディスプレイには互換の sRGB 赤」という出し分け。
用途別の推奨
ブランドカラー・アクセント色
OKLCH or Display P3 をベース、sRGB をフォールバック：
.btn-primary {
background: #c84b1f; /* sRGB フォールバック */
background: color(display-p3 0.78 0.3 0.13); /* P3 で鮮やか */
}CSS は最後に解釈できる宣言を採用するので、ブラウザが color() を理解できれば P3、理解できなければ sRGB hex を使用。
デザインシステム全体
OKLCH で統一し、CSS variables で抽象化：
:root {
--color-red-500: oklch(60% 0.2 25);
--color-red-400: oklch(70% 0.18 25);
--color-red-600: oklch(50% 0.2 25);
}明度・彩度を一貫した刻みで定義でき、tailwind のような階段状パレットを手動でも作りやすい。
写真と動画
色プロファイルを画像・動画ファイルに埋め込み、CSS で介入しない。ブラウザが ICC プロファイルを見てディスプレイに合わせて表示。
ブラウザサポート（2026 年）
| 機能 | Chrome | Firefox | Safari |
|---|---|---|---|
color(display-p3 ...) | ✓ (111+) | ✓ (113+) | ✓ (15+) |
color(rec2020 ...) | ✓ (111+) | ✓ (113+) | ✓ (15+) |
oklch() / oklab() | ✓ (111+) | ✓ (113+) | ✓ (15.4+) |
@media (color-gamut) | ✓ | ✓ | ✓ |
color-mix() | ✓ (111+) | ✓ (113+) | ✓ (16.2+) |
主要機能はモダンブラウザ全対応。ただし、Internet Explorer 系は完全非対応で切り捨て前提。
実装の落とし穴
1. P3 ディスプレイで sRGB 値を表示すると鮮やかすぎる場合
ブラウザによっては「sRGB 値を P3 ディスプレイに表示するときに、わざと P3 の色域に拡張する」設定があり、見た目が変わることがあります。意図した色を出したいなら明示的に色空間を指定する。
2. スクリーンショットで色が変わる
Display P3 の色を含むページのスクショを sRGB の Slack に貼ると色が変わって見えることがあります。これはツール側の色管理問題で、CSS の問題ではない。
3. プリンタ印刷では sRGB が前提
Web で見える色と紙に印刷した色は色域が違うので、Web で Display P3 の鮮やかな赤を選んでも印刷では再現できない。印刷も意識するならブランドカラーは Adobe RGB か CMYK で定義し、Web では sRGB に落とす。
まとめ
CSS の色域は sRGB の固定から、color() と oklch() で広色域・知覚均等な空間が選べる時代に入りました。Display P3 はモダン端末で標準化済みなので、ブランドカラーは Display P3、デザインシステムは OKLCH、フォールバックは sRGB hex という 3 段構えが 2026 年の標準的な書き方です。@media (color-gamut) で出し分けると、対応端末では鮮やかさを引き出しつつ、互換性も保てます。
色コードの相互変換・色域比較は カラー変換ツール で確認できます。