色域を説明: sRGB、P3、およびRec. 2020
Embed This Widget
Add the script tag and a data attribute to embed this widget.
Embed via iframe for maximum compatibility.
<iframe src="https://colorfyi.com/iframe/entity//" width="420" height="400" frameborder="0" style="border:0;border-radius:10px;max-width:100%" loading="lazy"></iframe>Paste this URL in WordPress, Medium, or any oEmbed-compatible platform.
https://colorfyi.com/entity//Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/entity//)Use the native HTML custom element.
スクリーン上の色は、ほとんどのユーザーが決して考えない制限によって境界付けられています: 色域。ウェブの歴史の大部分では、その制限は、実際にすべてのデバイスについて同じでした。1996年に確立されたsRGB。今日、モダンなスマートフォン、ラップトップ、モニターは、sRGBが許可する場合よりもはるかに多くの色を日常的に表示し、CSSはこれを活用するツールを持っています。知っているなら。
このガイドでは、色域が何であるかを説明し、sRGB、Display P3、およびRec. 2020を、ウェブ作業に最も関連する3つの色域として説明し、CSS @media（color-gamut）機能クエリで幅広い色を使用する方法を正確に示します。
色域とは?
色域は、色システムが表現または再現できる完全な色の範囲です。人間の目で見える、すべての色を各色システムで表現することはできません。物理的および技術的な制約は、すべてのシステムが認識できるもののサブセットのみをカバーしていることを意味します。
CIE 1931色度図
色科学者は、CIE 1931色度図を使用して色域を視覚的に表現します。平均的な人間の目で認識できるすべての色の馬蹄形の2D地図。馬蹄形の外側の境界は、最も純粋で、最も飽和した分光色を表しています。内部領域は、彩度が低い、より混合された色を表しています。白は中心の近くに位置しています。
いかなる特定の色域は、このダイアグラムに多角形として表示されます。通常、3つのプライマリ色（赤、緑、青）で定義される三角形。その三角形の面積は、色域がカバーする可視色の数を決定します:
- 小さな三角形 = 狭い色域（より少ない色）
- 大きな三角形 = ワイド色域（より多くの色）
いかなる色域の3つのプライマリが、三角形の頂点がどこに座るかを決定します。馬蹄形の外側の端（より飽和したプライマリ）に向かってプライマリをプッシュすると、三角形と色域が拡張されます。
ウェブデザインで色域が重要な理由
最近まで、これは学問的な関心事でした。使用中のほぼすべてのディスプレイはsRGB対応で、ウェブ色は普遍的にsRGBの色でした。ただし、Display P3がAppleデバイス（2016年以来のすべてのiPhone、すべての最新のMacBooks、iMac、iPad Pros、およびStudio Displays）で標準になり、HDRモニターがWindowsとゲーミングに広がるにつれて、実用的なディスプレイランドスケープが分裂しました。
sRGBで提供されたウェブコンテンツはP3およびRec. 2020ディスプレイ上で正しく見えます。sRGB色はこれらのより広い色域のサブセットです。ただし、ワイド色スペースで指定されたコンテンツは、P3およびRec. 2020が提供する、より豊かで、より飽和したプライマリを活用することができます。
sRGB: 1996年以来のウェブスタンダード
歴史と採用
sRGB（標準赤緑青）色空間は1996年にHPとマイクロソフトによって共同開発され、IECによってIEC 61966-2-1として標準化されました。その目的は、消費者向けモニター、プリンター、ウェブの共通の参照を提供することでした。デバイスキャリブレーションなしで一貫した色再現を有効にしています。
sRGBは以下のデフォルト色空間になりました: - ウェブブラウザー（明示的に指定された場合を除き、すべてのCSS色はsRGBです） - デジタルカメラ（JPEGファイルはデフォルトでsRGBになります） - 2000年代から2010年代を通じたほとんどの消費者モニター - Windowsディスプレイサブシステム - 標準SDR（標準ダイナミックレンジ）コンテンツ
sRGB カバレッジ
sRGBは、CIE 1931色度図で定義される可視色域の約35%をカバーしています。これは制限されているように見えますが、日常生活で遭遇する自然で製造された色の幅広い多様性を網羅する実用的な範囲をカバーしています。
sRGBプライマリは以下のとおりです: - 赤: 約x = 0.64、y = 0.33（やや橙赤） - 緑: 約x = 0.30、y = 0.60（黄-緑） - 青: 約x = 0.15、y = 0.06（青-バイオレット）
CSSのsRGB
これまでに書き込んだすべてのCSS色はsRGBであり、明示的に別の色を指定した場合を除きます。これは以下を含みます:
- 16進コード:
#3B82F6 - 指定された色:
blue、coral、rebeccapurple rgb()とrgba():rgb(59, 130, 246)hsl()とhsla():hsl(217, 91%, 60%)
これらはすべてsRGB値に解決されます。#FF0000の値はsRGBプライマリ赤を正確に意味します。sRGBが表現できる赤い赤。P3ディスプレイ上では、その赤は忠実に描画されますが、P3の実質的により赤いネイティブプライマリを利用しません。
Display P3: Appleのモダンスタンダード
Display P3とは?
Display P3はAppleがそのRetinaディスプレイ用に開発した色空間で、デジタルシネマプロジェクションで使用されるDCI-P3色空間から派生しています。sRGBと同じホワイトポイント（D65、標準の日光）と同じガンマを使用していますが、異なり、より飽和したプライマリ色を定義します。
Display P3は可視色域の約45%をカバーしています。sRGBより約26%大きい領域です。拡張カバレッジは赤と緑の地域で最も顕著であり、青のドラマ的でない拡張があります。
どのデバイスがDisplay P3をサポートしていますか?
Appleは2015年から2016年に始まるDisplay P3を広く採用しました:
- iPhone 7以降 — すべての後続のiPhoneモデル
- iPad Pro（9.7インチ、2016）以降 — すべての後続のiPad Proモデル
- MacBook Pro（late 2016）以降 Retina ディスプレイ付き
- iMac（Retina 5K、late 2015）以降
- Apple Pro Display XDR、Studio Display
Windows および Android側では、多くの高級なラップトップとスマートフォンもP3対応ディスプレイで出荷していますが、採用は均一性が低い。2025年の時点で、高級消費者デバイスの大部分は、少なくともP3をサポートしています。
CSSでP3色を指定する
CSS Color Level 4は、display-p3色空間を持つcolor()関数を提供し、P3プライマリを直接使用する色を指定できます:
/* P3赤 — sRGBより赤より鮮やか */
color: color(display-p3 1 0 0);
/* 鮮やかなP3緑 */
color: color(display-p3 0 1 0);
/* P3のリッチコーラル */
color: color(display-p3 0.95 0.42 0.37);
color(display-p3 R G B)の3つの値は0～1に正規化されます（0～255ではなく）。これはrgb()関数とは異なります。
違いを見る
P3の実用的な影響は、高度に飽和した色で最も目に見えます。鮮やかなP3赤[color(display-p3 1 0 0)に比較可能]はsRGB赤#FF0000よりP3対応ディスプレイで明らかに飽和しています。ブランド色とヒーロー画像が最大の活力を必要とする場合、P3は有意義なアップグレードを提供します。
Rec. 2020: HDRおよびシネマの未来
Rec. 2020とは?
Rec. 2020（正式にはITU-R BT.2020）は、Ultra High Definition Television（UHDTV）およびHDRコンテンツの色標準です。これは2012年に国際電気通信連合によって定義され、消費者用で一般的に使用されているもの以上の劇的にワイダー色域を表しています。
Rec. 2020は可視色域の約75%をカバーしています。sRGBの面積の2倍以上とP3よりも実質的にワイダー。その原始が特定のレーザー波長の分光限度で定義されており、これらの波長での理論的に最も飽和した可能な色であることを意味します。
現在のディスプレイサポート
これが重要な注意点です: 現在入手可能なほぼすべての消費者ディスプレイはRec. 2020色域を完全にカバーしていません。高品質のHDRテレビは75～90%のRec. 2020をカバーする場合があります。専門的なシネマプロジェクターと専門のHDRマスターモニターは完全なカバレッジに必要です。
ただし、Rec. 2020はHDRコンテンツ標準（HDR10、DolbyVision、HLGを含む）の参照色域です。ディスプレイが完全に再現できなくても、Rec. 2020でマスターされたコンテンツは、より小さい色域スクリーンへのディスプレイ用にトーンマップされます。
CSSのRec. 2020
/* Rec. 2020グリーン — 非常に活気のある。ほとんどのディスプレイ機能を超えて */
color: color(rec2020 0 1 0);
/* Rec. 2020の深い赤 */
color: color(rec2020 0.8 0.1 0.1);
ウェブ作業の場合、Rec. 2020色は、ディスプレイがサポートしている色域で達成できる最も近い色として表示されます。これは、Rec. 2020機能を持つブラウザーが完全な色を示しています。これにより、将来に互換性があります。他の人は最高の近似を表示します。
@media（color-gamut）を使用したCSS幅広い色
CSSは、ディスプレイ色域機能を検出し、適切な色を提供するために特別に設計されたメディアクエリを提供しています:
@media (color-gamut: srgb) {
/* ほぼすべての色ディスプレイでサポートされています */
}
@media (color-gamut: p3) {
/* ディスプレイは少なくともP3色域をサポートしています */
}
@media (color-gamut: rec2020) {
/* ディスプレイは少なくともRec. 2020色域をサポートしています */
}
値は進歩的です。p3は、ディスプレイがP3をサポートしています（sRGBもカバーされています）。rec2020は、ディスプレイがRec. 2020（P3とsRGBもカバー）をサポートしていることを意味します。
プログレッシブエンハンスメントパターン
推奨されるアプローチは、ベースのsRGB色を最初に定義し、その後、より広い色域ディスプレイのプログレッシブに強化することです:
.hero-button {
/* sRGBフォールバック — すべてのディスプレイで機能します */
background-color: #E63946;
}
@media (color-gamut: p3) {
.hero-button {
/* P3ディスプレイ上でより活気のある赤 */
background-color: color(display-p3 0.95 0.17 0.23);
}
}
@media (color-gamut: rec2020) {
.hero-button {
/* Rec. 2020ディスプレイ上でさらに活気のある */
background-color: color(rec2020 0.89 0.14 0.21);
}
}
標準的なsRGBモニターでは、ボタンは16進赤#E63946を表示します。iPhone、MacBook Pro、またはモダンな広色域モニター上では、より活気のあるP3バージョンを表示します。Rec. 2020をサポートできるディスプレイ上では、最も活気のあるバージョンを示しています。
OKLCHをワイド色域に使用する
OKLCH色空間は特定の色域に特定ではありませんが、sRGBの範囲外の色を自然に表現できます。sRGB用語で0～1の範囲外に落ちる値は、自動的にワイド色域です。これにより、OKLCHは色域に対する作業に便利です:
.accent {
/* OKLCHはP3以上を表現できます */
color: oklch(60% 0.25 27deg);
}
ブラウザは、指定されたOKLCH色を、ディスプレイがサポートしている色域の最も近い再現可能な色にマップします。ディスプレイがP3対応の場合、P3色にマップします。sRGBの場合、最も近いsRGB同等物にクリップします。
これはデザインシステムにOKLCHを使用するための説得力のある理由です: 意図した色知覚を指定でき、ブラウザは色域マッピングを自動的に処理します。ColorFYIの色コンバーターを使用して、sRGB16進値とそのOKLCH同等物の間で変換します。
color-gamut: srgb ベースライン
すべての色ディスプレイは、少なくともcolor-gamut: srgbをサポートしています。これは単色ディスプレイとは対照的に色ディスプレイに合致します。仮説的なモノクロームディスプレイに対して色ディスプレイをターゲットにする場合を除き、このメディアクエリ値のみが必要です。ほとんどの場合、それは必要ありません。
実際には、有用なクエリはcolor-gamut: p3であり、Appleのエコシステムと、AndroidおよびWindowsデバイスの増加シェアをカバーしています。
ブラウザーサポート
2025年の時点で:
- @media (color-gamut) — すべての主要なブラウザー（Chrome、Firefox、Safari、Edge）でサポートされています
- color(display-p3) — すべての主要なブラウザーでサポートされています
- color(rec2020) — ChromeおよびSafariでサポートされています。Firefoxサポートが続きました
- oklch() — すべての主要なブラウザーでサポートされています
現在一般的に使用されているブラウザーはありません。これらの機能を解析できません。それらのいずれかが、広色域色を描画するか、前のsRGB宣言に適切に落ち返ります。
ウェブデザインプロジェクトの実用的なガイダンス
今日P3色を使用すべきですか?
はい、プログレッシブエンハンスメントアプローチを使用しています。欠点のリスク はゼロです。sRGBフォールバックは、デザインがすべてのディスプレイで正しく見えるようにします。利点は、聴衆の重要で成長する部分がより活気のある、より豊かな色を見ています。
最も影響力のあるユースケースは: - ブランド色とアクセント — できるだけ活気のあるように表示されるべき - ヒーロー画像とプロモーショングラフィック — 活力がエンゲージメントを駆動する場所 - データビジュアライゼーション — より広い色範囲でより異なるカテゴリ色が可能
どの色がP3から最も利益を得るか?
sRGBに対するP3の利得は最大です: - 鮮やかな赤とオレンジ: P3赤プライマリがかなり飽和しています - 飽和したグリーン: P3は黄-緑地域に大きく広がります - 活気のあるピンクとマゼンタ: P3は活気のあるファッション/美容パレットをよりよくキャプチャします
ニュートラル色、暗い色、およびパステル色は、sRGBとP3間で最小限の可視差を示しています。色域の中心の近くにあるため、両方の色空間が大幅に重複しています。
実用的なワークフロー
- 通常通りHEX（sRGB）でカラーシステムを設計
- 最大活力が重要な2～5色を特定（プライマリブランド色、ヒーローアクセント、主要なUI状態）
- ColorFYIの色コンバーターを使用して各OKLCHの同等物を見つけます
- CSSで、OKLCH値（または
color(display-p3)同等物）を指定し、ブラウザーに色域マッピングを処理させます - P3対応ディスプレイ（最新のMacBookまたはiPhone）でテストして、視覚的な改善を確認します
色域比較サマリー
| 標準 | 色域カバレッジ | 主な使用 | CSS関数 |
|---|---|---|---|
| sRGB | 可視の約35% | ウェブ（ユニバーサルベースライン） | rgb()、hsl()、hex |
| Display P3 | 可視の約45% | Appleデバイス、モダンフォン/ラップトップ | color(display-p3) |
| Rec. 2020 | 可視の約75% | HDRビデオ、シネマ | color(rec2020) |
重要なポイント
- 色域は、システムが表現できる色の合計範囲で、CIE色度図上の三角形として視覚化されます。より広いプライマリ = より大きな三角形 = より多くの色。
- sRGBは、1996年からのユニバーサルウェブ標準で、可視色の約35%をカバーしています。すべての標準CSS色値（
rgb()、hsl()、hex）はsRGBです。 - Display P3は可視色の約45%をカバーしており、2016年以来のすべてのAppleデバイス（iPhone、MacBook、iPad Pro、iMac）と多くのモダンWindowsおよびAndroidデバイスの標準です。
- Rec. 2020は可視色の約75%をカバーし、HDRコンテンツの参照色域として使用されていますが、今日は完全に再現するために消費者向けディスプレイはほとんどありません。
- sRGBをベースラインフォールバックして、
@media (color-gamut: p3)を使用してP3対応ディスプレイの色をプログレッシブに強化します。 color(display-p3 R G B)はCSS内のP3色を指定します。値は0～1に正規化されます。oklch()は自然に幅広い色を表現し、デザインシステムに対してますます好まれています。ブラウザは色域マッピングを自動的に処理します。- ColorFYIの色コンバーターを使用してHEX、OKLCH、および他の色空間の間で変換し、広色域色システムを構築します。
