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-gamut は CSS のメディア特性で、ユーザーエージェントおよび出力機器が対応している色域のおおよその範囲に基づいて CSS スタイルを適用するために使用されます。

構文

color-gamut 特性は、以下の色空間のいずれかをキーワード値で指定します。

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

html

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

css

p {
  padding: 10px;
  border: solid;
}

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

Specification
Media Queries Level 4 # color-gamut