color()

基线 2023

语法

css

/* Absolute values */
color(display-p3 1 0.5 0);
color(display-p3 1 0.5 0 / .5);

/* Relative values */
color(from green srgb r g b / 0.5)
color(from #0000FF xyz calc(x + 0.75) y calc(z - 0.35))

值

以下是绝对值和相对颜色的允许值的描述。

绝对值语法

color(colorspace c1 c2 c3[ / A])

参数如下

颜色空间: 一个 <ident>，表示预定义的颜色空间之一：srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、xyz、xyz-d50 或 xyz-d65。
c1、c2、c3: 每个值都可以写成 <number>、<percentage> 或关键字 none（在本例中相当于 0）。这些值表示颜色空间的组件值。使用 <number> 值时，通常，0 到 1 表示颜色空间的边界。允许超出该范围的值，但将超出给定颜色空间的色域。使用百分比值时，100% 表示 1，0% 表示 0。
A 可选: 一个 <alpha-value>，表示颜色的 alpha 通道值，其中数字 0 对应于 0%（完全透明），1 对应于 100%（完全不透明）。此外，关键字 none 可用于明确指定没有 alpha 通道。如果未明确指定 A 通道值，则默认为 100%。如果包含，则该值前缀为斜杠 (/)。

注意： 有关 none 的影响，请参阅缺少颜色组件。

相对值语法

color(from <color> colorspace c1 c2 c3[ / A])

参数如下

from <color>: 关键字 from 始终包含在定义相对颜色时，后面跟一个 <color> 值，表示原始颜色。这是相对颜色所基于的原始颜色。原始颜色可以是任何有效的 <color> 语法，包括另一个相对颜色。
颜色空间: 一个 <ident>，表示输出颜色的颜色空间，通常是预定义的颜色空间之一：srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、xyz、xyz-d50 或 xyz-d65。
c1、c2、c3: 每个值都可以写成一个 <number>、一个 <percentage>，或关键字 none（在这种情况下等效于 0）。这些值代表输出颜色的组件值。使用 <number> 值时，通常 0 到 1 代表颜色空间的边界。允许超出该范围的值，但对于给定的颜色空间来说将超出色域。通常，使用百分比值时，100% 代表 1，而 0% 代表 0。
A 可选: 一个 <alpha-value>，代表输出颜色的 alpha 通道值，其中数字 0 对应于 0%（完全透明），而 1 对应于 100%（完全不透明）。此外，关键字 none 可用于明确指定没有 alpha 通道。如果未明确指定 A 通道值，则默认为源颜色的 alpha 通道值。如果包含，该值将以斜杠 (/) 为前缀。

定义相对颜色输出通道组件

在 color() 函数中使用相对颜色语法时，浏览器会将源颜色转换为指定颜色空间中的等效颜色（如果还没有指定为这种颜色）。该颜色定义为三个不同的颜色通道值加上一个 alpha 通道值 (alpha)。这些通道值在函数内部可用，在定义输出颜色通道值时使用。

源颜色的三个颜色通道值被解析为 <number>。对于预定义的颜色空间，根据指定的颜色空间，这些值将是以下之一
- r、g 和 b：基于 RGB 的颜色空间 srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb 和 rec2020 的颜色通道值。
- x、y 和 z：基于 CIE XYZ 的颜色空间 xyz、xyz-d50 和 xyz-d65 的颜色通道值。
  
  注意：这些值通常在 0 和 1 之间，但如上所述，它们可能超出这些范围。
  
  注意：在使用基于 XYZ 的颜色空间的 color() 函数内引用 r、g 和 b 值，在使用基于 RGB 的颜色空间的 color() 函数内引用 x、y 和 z 值，或任何其他字符都是无效的。函数内部可用的源颜色通道值必须与指定类型的颜色空间相匹配。
alpha：颜色的透明度值，解析为 <number>，介于 0 和 1 之间（含）。

在定义相对颜色时，输出颜色的不同通道可以用几种不同的方式表达。下面，我们将研究一些示例来说明这些。

在下面两个示例中，我们使用了相对颜色语法。但是，第一个示例输出与源颜色相同的颜色，第二个示例输出根本不基于源颜色的颜色。它们实际上并没有创建相对颜色！您不太可能在实际代码库中使用这些，而可能只是使用绝对颜色值。我们包含这些示例作为学习相对 color() 语法的起点。

让我们从一个 hsl(0 100% 50%)（相当于 red）的源颜色开始。虽然您不太可能编写以下函数，因为它们输出与源颜色相同的颜色，但这展示了如何使用源颜色通道值作为输出通道值。

css

color(from hsl(0 100% 50%) srgb r g b)
color(from hsl(0 100% 50%) xyz x y z)

这些函数的输出颜色分别是 color(srgb 1 0 0) 和 color(xyz-d65 0.412426 0.212648 0.0193173)。

接下来的函数对输出颜色通道值使用绝对值，输出与源颜色无关的完全不同的颜色

css

color(from hsl(0 100% 50%) srgb 0.749938 0 0.609579)
/* Computed output color: color(srgb 0.749938 0 0.609579) */

color(from hsl(0 100% 50%) xyz 0.75 0.6554 0.1)
/* Computed output color: color(xyz-d65 0.75 0.6554 0.1 */

以下函数对输出颜色通道值使用两个源颜色通道值 (r 和 b，以及 x 和 y)，但对另一个输出通道值 (g 和 z) 使用新值，在每种情况下都创建了一个基于源颜色的相对颜色

css

color(from hsl(0 100% 50%) srgb r 1 b)
/* Computed output color: color(srgb 1 1 0) */

color(from hsl(0 100% 50%) xyz x y 0.5)
/* Computed output color: color(xyz-d65 0.412426 0.212648 0.5) */

注意：如上所述，如果输出颜色使用的颜色模型与源颜色不同，则源颜色会在后台转换为与输出颜色相同的模型，以便可以用兼容的方式表示它（即使用相同的通道）。例如，hsl() 颜色 hsl(0 100% 50%) 在上面的第一个示例中转换为 color(srgb 1 0 0)，在第二个示例中转换为 color(xyz 0.412426 0.212648 0.5)。

在我们本节中看到的示例中，源颜色或输出颜色的 alpha 通道都没有明确指定。当未指定输出颜色 alpha 通道时，它默认为与源颜色 alpha 通道相同的值。当源颜色 alpha 通道未指定（并且它不是相对颜色）时，它默认为 1。因此，对于以上示例，源颜色和输出颜色 alpha 通道值均为 1。

让我们看看一些指定源颜色和输出颜色 alpha 通道值的示例。第一个示例指定输出 alpha 通道值与源 alpha 通道值相同，而第二个示例指定不同的输出 alpha 通道值，与源 alpha 通道值无关。

css

color(from hsl(0 100% 50% / 0.8) srgb r g b / alpha)
/* Computed output color: color(srgb 1 0 0 / 0.8) */

color(from hsl(0 100% 50% / 0.8) xyz x y z / 0.5)
/* Computed output color: color(xyz-d65 0.412426 0.212648 0.0193173 / 0.5) */

以下示例使用 calc() 函数来计算相对于源颜色通道值的输出颜色的新通道值

css

color(from hsl(0 100% 50%) srgb calc(r - 0.4) calc(g + 0.1) calc(b + 0.6) / calc(alpha - 0.1))
/* Computed output color: color(srgb 0.6 0.1 0.6 / 0.9)  */

color(from hsl(0 100% 50%) xyz calc(x - 0.3) calc(y + 0.3) calc(z + 0.3) / calc(alpha - 0.1))
/* Computed output color: color(xyz-d65 0.112426 0.512648 0.319317 / 0.9) */

注意：因为源颜色通道值被解析为 <number> 值，所以在使用它们进行计算时，您必须向它们添加数字，即使在通道通常接受 <percentage>、<angle> 或其他值类型的案例中也是如此。例如，将 <percentage> 添加到 <number> 并不起作用。

正式语法

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<colorspace-params> = 
  <custom-params>                  |
  <predefined-rgb-params>          |
  <predefined-polar-params>        |
  <predefined-rectangular-params>  |
  <xyz-params>                     

<alpha-value> = 
  <number>      |
  <percentage>  

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+  

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<predefined-polar-params> = 
  jzczhz [ <number> | <percentage> | none ]{2} [ <hue> | none ]  

<predefined-rectangular-params> = 
  <predefined-rectangular> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz> [ <number> | <percentage> | none ]{3}  

<predefined-rgb> = 
  srgb            |
  srgb-linear     |
  display-p3      |
  a98-rgb         |
  prophoto-rgb    |
  rec2020         |
  rec2100-pq      |
  rec2100-hlg     |
  rec2100-linear  

<hue> = 
  <number>  |
  <angle>   

<predefined-rectangular> = 
  jzazbz  |
  ictcp   

<xyz> = 
  xyz      |
  xyz-d50  |
  xyz-d65

示例

使用预定义的颜色空间与 color()

以下示例显示了改变 color() 函数的亮度、a 轴和 b 轴值的效用。

HTML

html

<div data-color="red-a98-rgb"></div>
<div data-color="red-prophoto-rgb"></div>
<div data-color="green-srgb-linear"></div>
<div data-color="green-display-p3"></div>
<div data-color="blue-rec2020"></div>
<div data-color="blue-srgb"></div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

css

[data-color="red-a98-rgb"] {
  background-color: color(a98-rgb 1 0 0);
}
[data-color="red-prophoto-rgb"] {
  background-color: color(prophoto-rgb 1 0 0);
}
[data-color="green-srgb-linear"] {
  background-color: color(srgb-linear 0 1 0);
}
[data-color="green-display-p3"] {
  background-color: color(display-p3 0 1 0);
}
[data-color="blue-rec2020"] {
  background-color: color(rec2020 0 0 1);
}
[data-color="blue-srgb"] {
  background-color: color(srgb 0 0 1);
}

结果

使用 xyz 颜色空间与 color()

以下示例显示了如何使用 xyz 颜色空间来指定颜色。

HTML

html

<div data-color="red"></div>
<div data-color="green"></div>
<div data-color="blue"></div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

css

[data-color="red"] {
  background-color: color(xyz 45 20 0);
}

[data-color="green"] {
  background-color: color(xyz-d50 0.3 80 0.3);
}

[data-color="blue"] {
  background-color: color(xyz-d65 5 0 50);
}

结果

使用 color-gamut 媒体查询与 color()

此示例显示了如何使用 color-gamut 媒体查询来检测对特定颜色空间的支持，并使用该颜色空间来指定颜色。

HTML

html

<div></div>
<div></div>
<div></div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

css

@media (color-gamut: p3) {
  div {
    background-color: color(display-p3 1 0 0);
  }
}

@media (color-gamut: srgb) {
  div:nth-child(2) {
    background-color: color(srgb 1 0 0);
  }
}

@media (color-gamut: rec2020) {
  div:nth-child(3) {
    background-color: color(rec2020 1 0 0);
  }
}

结果

使用相对颜色与 color()

此示例使用不同的背景颜色来设置三个 <div> 元素的样式。中间一个使用未修改的 --base-color，而左右两个使用该 --base-color 的浅色和深色变体。

这些变体使用相对颜色定义——--base-color 自定义属性传递到 color() 函数中，而输出颜色的 g 和 b 通道通过 calc() 函数修改，以实现所需的效用。浅色变体向这些通道添加了 15%，而深色变体从这些通道减去了 15%。

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

css

:root {
  --base-color: orange;
}

#one {
  background-color: color(
    from var(--base-color) display-p3 r calc(g + 0.15) calc(b + 0.15)
  );
}

#two {
  background-color: var(--base-color);
}

#three {
  background-color: color(
    from var(--base-color) display-p3 r calc(g - 0.15) calc(b - 0.15)
  );
}

/* Use @supports to add in support old syntax that requires r g b values
   to be specified as percentages (with units) in calculations.
   This is required for Safari 16.4+ */
@supports (color: color(from red display-p3 r g calc(b + 30%))) {
  #one {
    background-color: color(
      from var(--base-color) display-p3 r calc(g + 15%) calc(b + 15%)
    );
  }

  #three {
    background-color: color(
      from var(--base-color) display-p3 r calc(g - 15%) calc(b - 15%)
    );
  }
}

结果

输出如下

规范

规范
CSS 颜色模块 Level 5 # color-function
CSS 颜色模块 Level 5 # relative-color-function
CSS 颜色模块 Level 4 # color-function

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。