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;  }}

結果

仕様書

ブラウザーの互換性

関連情報

• color() 関数で、定義された色空間における色を指定します。
• CSS 色モジュール
• @media アットルールは、 color-gamut 式を指定するために使用します。
• メディアクエリーの使用: メディアクエリーをいつ、どうやって使うかを理解する
• CSS メディアクエリー モジュール
• sRGB（ウィキペディア）