CSScolor-gamut メディア特性は、ユーザーエージェント及び出力機器が対応している色のおよその範囲を調べるために使用することができます。

構文

color-gamut 特性は以下の一覧のうち一つのキーワード値で指定します。

srgb
出力機器が sRGB 色域にほぼ対応、またはそれより広い範囲に対応している場合です。大多数のカラーディスプレイはこれに含まれます。
p3
出力機器が DCI P3 色空間にほぼ対応、またはそれより広い色域に対応している場合です。 P3 色域は sRGB 色域よりも広く、またsRGB色域を含んでいます。
rec2020
出力機器がおよそ ITU-R 勧告 BT.2020 色空間にほぼ対応、またはそれより広い色域に対応している場合です。 REC2020 色域は P3 色域よりも広く、またP3色域を含んでいます。

HTML

<p>This is a test.</p>

CSS

@media (color-gamut: srgb) {
  p {
    background: #f4ae8a;
  }
}

結果

仕様書

仕様書 状態 備考
Media Queries Level 4
color-gamut の定義
勧告候補 初回定義。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
color-gamut media featureChrome 完全対応 58Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 45Safari 完全対応 ありWebView Android 完全対応 58Chrome Android 完全対応 58Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 完全対応 43Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09, takot
最終更新者: mdnwebdocs-bot,