color-gamut

Baseline 2023
Newly available

Since February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

構文

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

srgb

出力機器が sRGB 色域にほぼ対応、またはそれより広い範囲に対応している場合です。大多数のカラーディスプレイはこれに含まれます。

p3

出力機器が DCI P3 色空間にほぼ対応、またはそれより広い色域に対応している場合です。 P3 色域は sRGB 色域よりも広く、またsRGB色域を含んでいます。

rec2020

出力機器がおよそ ITU-R 勧告 BT.2020 色空間にほぼ対応、またはそれより広い色域に対応している場合です。 REC2020 色域は P3 色域よりも広く、またP3色域を含んでいます。

HTML

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

CSS

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

結果

仕様書

Specification
Media Queries Level 4
# color-gamut

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
color-gamut media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報