CSS 函式 - color()

CSS 中的 color() 函式允許使用特定顏色空間指定的顏色，而不是大多數顏色函式使用的預設 sRGB 顏色空間。

color-gamut CSS 媒體功能可用於檢查對特定顏色空間的支援。

可能的值

color() 函式的功能表示法為 color(colorspace c1 c2 c3[ / A])。

colorspace：它是表示顏色空間名稱的 <ident>（字串）
- a srgb
- a srgb-linear
- a display-p3
- a a98-rgb
- a prophoto-rgb
- a rec2020
- a xyz
- a xyz-d50
- a xyz-d65
c1, c2, c3：可以包含以下格式之一，表示顏色空間中的元件值
- a <number>：0 到 1 之間的任何值。
- a <percentage>：0% 到 100% 之間的任何值。
- 關鍵字 none
A：表示顏色的透明度。這是一個可選值。
- <alpha-value>：0 到 1 之間的任何數字，其中 1 對應於完全不透明，0 對應於完全透明。
- 關鍵字 none

語法

color(display-p3 0.45 1 0) | color(display-p3 0.45 1 0 / 0.4)

CSS color() - 使用預定義的顏色空間

以下示例顯示了使用預定義的顏色空間和 color() 函式，以及亮度、a 軸和 b 軸的不同值。

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   
   .color-srgb {
      background-color: color(srgb 1 0 0);
   }  

   .color-srgb-linear {
      background-color: color(srgb-linear 0 1 0);
   }  

   .color-display-p3 {
      background-color: color(display-p3 0.4 0.6 35%);
   }  

   .color-a98-rgb {
      background-color: color(a98-rgb 1 1 0);
   }  

   .color-prophoto-rgb {
      background-color: color(prophoto-rgb 0 0 1);
      color: white ;
   }

   .color-rec2020 {
      background-color: color(rec2020 0.6 0.1 1 / 0.4);
   }
</style>
</head>
<body>
   <div class="color-srgb">color(srgb 1 0 0)</div>
   <div class="color-srgb-linear">color(srgb-linear 0 1 0)</div>
   <div class="color-display-p3">color(display-p3 0.4 0.6 35%)</div>
   <div class="color-a98-rgb">color(a98-rgb 1 1 0)</div>
   <div class="color-prophoto-rgb">color(prophoto-rgb 0 0 1)</div>
   <div class="color-rec2020">color(rec2020 0.6 0.1 1 / 0.4)</div>
</body>
</html>

CSS color() - 使用 xyz 顏色空間

以下示例顯示了使用 xyz 顏色空間和 color() 函式，以及亮度、a 軸和 b 軸的不同值。

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   
   .color-xyz {
      background-color: color(xyz 1 0 0);
   }  

   .color-xyz-d50 {
      background-color: color(xyz-d50 1 1 0);
   }  

   .color-xyz-d65 {
      background-color: color(xyz-d65 1 0 75% / 0.3);
   }  
</style>
</head>
<body>
   <div class="color-xyz">color(xyz 1 0 0)</div>
   <div class="color-xyz-d50">color(xyz-d50 1 1 0)</div>
   <div class="color-xyz-d65">color(xyz-d65 1 0 75% / 0.3)</div>
</body>
</html>

列印頁面