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>

打印页面