CSS 媒體特性 - color-gamut

CSS 媒體特性color-gamut用於檢測裝置顯示器能夠再現的顏色範圍。

color-gamut幫助 Web 開發人員建立針對使用者裝置色域最佳化的樣式和佈局。

可能的值

srgb - 此值針對能夠顯示標準 sRGB 色域的裝置，sRGB 是大多數消費類顯示器中使用的標準色彩空間。sRGB 表示顏色範圍有限，在許多裝置上很常見。
p3 - 此值表示裝置至少可以顯示與 Display P3 色彩空間一樣多的顏色，甚至更多。Display P3 色彩空間比 sRGB 具有更廣的色域，可以顯示更多顏色。它常見於某些現代 iPhone 和高質量顯示器等裝置。
rec2020 - 此裝置至少可以顯示與 ITU-R 建議 BT.2020 色彩空間一樣多的顏色，該色彩空間比 P3 色域具有更廣的顏色範圍。它通常與高階顯示器和媒體制作相關聯。

語法

color-gamut: srgba|p3|rec2020;

CSS color-gamut - srgb 值

以下示例演示瞭如何在 CSS 中使用color-gamut: srgb媒體特性來定位具有 srgb 色域的裝置。當色域為 srgb 時，文字將為紅色，背景顏色將變為黃色 -

<html>
<head>
<style>
   p {
      background-color: pink;
      color: black;
   }
   @media (color-gamut: srgb) {
      p {
         background-color: yellow;
         color: red;
      }
   }
</style>
</head>
<body>
   <p>CSS Media Feature color-gamut: srgb</p>
</body>
</html>

CSS Color-gamut - p3 值

以下示例演示了color-gamut: p3媒體特性，p 元素預設將具有粉紅色背景顏色和黑色文字顏色。

支援 p3 色域的裝置，p 元素的背景顏色將更改為綠色，並帶有紫色邊框。

<html>
<head>
<style>
   p {
      background-color: pink;
      color: black;
   }
   @media (color-gamut: p3) {
      p {
         background-color: green;
         border: 3px solid violet;
      }
   }
</style>
</head>
<body>
   <p>CSS Media Feature color-gamut: p3</p>
</body>
</html>

CSS color-gamut - rec2020 值

以下示例演示了color-gamut: rec2020媒體特性，p 元素預設將具有粉紅色背景顏色和黑色文字顏色。

支援 rec2020 色域的裝置，p 元素的背景顏色將更改為紫色，文字顏色為藍色。

<html>
<head>
<style>
   p {
      background-color: pink;
      color: black;
   }
   @media (color-gamut: rec2020) {
      p {
         background-color: violet;
         color: blue;
      }
   }
</style>
</head>
<body>
   <p>CSS Media Feature color-gamut: rec2020</p>
</body>
</html>

列印頁面