CSS 函数

CSS 中的 color() 函数允许使用可以在特定色彩空间中指定的颜色，而不是大多数颜色函数使用的默认 sRGB 色彩空间。

色域 CSS 媒体功能可用于检查对特定色彩空间的支持。

可能的值

color() 函数的函数符号为 color(colorspace c1 c2 c3[ / A])。

  • colorspace:它是一个 <ident> (字符串）表示颜色空间的名称:

    • a srgb

    • a srgb-linear

    • a display-p3

    • a a98-rgb

    • a prophoto-rgb

    • rec2020

    • xyz

    • xyz-d50

    • a xyz-d65

  • c1、c2、c3:可以包含任一格式，表示颜色空间中的分量值：

    • a <number>:0 到 1 之间的任何值。

    • <percentage>:0% 到 100% 之间的任何值。

    • 关键字无

  • A:表示颜色的透明度。它是一个可选值。

    • <alpha-value>:0 到 1 之间的任何数字，其中 1 对应于完全不透明，0 对应于完全透明。

    • keyword none

语法

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

CSS color(): 使用预定义的色彩空间

以下示例展示了使用具有不同亮度、a 轴和 b 轴值的 color() 函数预定义色彩空间的用法:

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