CSS color() 函数

定义和用法

CSS 的 color() 函数允许在特定的颜色空间中指定颜色。

实例

例子 1

在 display-p3 颜色空间中指定背景颜色（透明度为 0.3）：

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(display-p3 0.6 0.6 0 / .3);
}

亲自试一试

例子 2

使用相对值语法：

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(from blue srgb r g b / 0.4);
}

亲自试一试

CSS 语法

绝对值语法

color(colorspace c1 c2 c3 / A)
值 描述
colorspace

必需。定义预定义的颜色空间之一：

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

必需。表示颜色空间的组件值。

每个值可以写为数字（0 到 1 之间）、百分比（0% 到 100%）或关键字 none。
/ A

可选。表示颜色的透明度通道值（0 表示完全透明，100 表示完全不透明）。

也可以使用 none（表示无透明度通道）。

默认值为 100。

相对值语法

color(from color colorspace c1 c2 c3 / A)
值 描述
from color

以关键字 from 开头，后跟表示原始颜色的颜色值。

这是相对颜色所基于的原始颜色。
colorspace

必需。定义预定义的颜色空间之一：

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

必需。表示颜色空间的组件值。

每个值可以写为数字（0 到 1 之间）、百分比（0% 到 100%）或关键字 none。
/ A

可选。表示颜色的透明度通道值（0 表示完全透明，100 表示完全不透明）。

也可以使用 none（表示无透明度通道）。

默认值为 100。

技术细节

版本： CSS Color Module Level 5

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
111 111 113 15 97

相关页面

参考：CSS 颜色