rgb() - CSS：层叠样式表

值

下面是对绝对颜色和相对颜色的描述。

绝对值语法

rgb(R G B[ / A])

参数如下：

R、G、B

每个都是从 0 到 255 之间的 值，或从 0% 到 100% 之间的 值，或为关键字 none（与 0% 等价），分别代表红色、绿色和蓝色的通道。

A 可选

表示输出颜色的 alpha 通道值，其中数字 0 对应于 0%（完全透明），1 对应 100%（完全不透明），关键字 none 用于显式地指定无 alpha 通道。未明确指定 A 通道值，则会默认为 100%。若包含此值，需在值的前面添加斜杠（/）。

备注：参见缺失颜色分量以了解 none 的效果。

相对值语法

rgb(from R G B[ / A])

参数如下：

from

当使用相对颜色时，需用到关键字 from，其后跟着一个表示原始颜色的 ：这是相对颜色所基于的原始颜色。原始颜色可以是任意有效的 语法，包括其他相对颜色。

R、G、B

每个都是从 0 到 255 之间的 值，或从 0% 到 100% 之间的 值，或为关键字 none（与 0% 等价），分别代表输出颜色中红色、绿色和蓝色的通道值。

A 可选

表示输出颜色的 alpha 通道值，其中数字 0 对应于 0%（完全透明），1 对应 100%（完全不透明），关键字 none 用于显式地指定无 alpha 通道。未明确指定 A 通道值，则会默认为原始颜色的 alpha 通道值。若包含此值，需在值的前面添加斜杠（/）。

备注：别名 rgba() 也可用于输出指定原始颜色的相对颜色，当使用 rgba() 输出相对颜色时，必须使用无逗号的现代语法。

备注：要完全启用可见颜色的全光谱表示，相对 rgb() 颜色函数的输出会被序列化为 color(srgb)。这意味着通过 HTMLElement.style 属性或 CSSStyleDeclaration.getPropertyValue() 方法查询输出颜色值时，会以 color(srgb ...) 值返回输出颜色。

定义相对颜色输出通道分量

在 rgb() 函数中使用相对颜色语法时，浏览器会将原始颜色转换为等价的 RGB 颜色（如果尚未指定）。颜色定义为三个不同的颜色通道值——r（红色）、g（绿色）和 b（蓝色）——加上 alpha 通道值。这些通道值在定义输出颜色通道值时要使用的函数内部可用：

r、g 和 b 值均被解析为取值范围在 0 到 255 之间（包含）的 。

alpha 通道会被解析为取值范围在 0 到 1 之间（包含）的 。

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

在下面的前两个示例中，我们都使用了相对颜色语法。但是，示例一输出与原始颜色相同的颜色，示例二输出完全不基于原始颜色的颜色。它们不能真正地创造相对颜色！你也不太可能会在真正的代码仓库中去使用这些，更多只会使用绝对值颜色。我们将这些示例作为学习相对 rgb() 语法的起点。

让我们从 hsl(0 100% 50%)（与 rgb(255 0 0) 等价）作为原始颜色开始。以下函数输出与原始颜色相同的颜色——它使用原始颜色的 r、g 和 b 通道值（255、0 和 0）作为输出通道值：

cssrgb(from hsl(0 100% 50%) r g b)

此函数的输出颜色是与 rgb(255 0 0) 等价的 sRGB color()：color(srgb 1 0 0)。

下一个函数在输出颜色通道值中使用了绝对值，输出一种完全不基于原始颜色的不同颜色：

cssrgb(from hsl(0 100% 50%) 132 132 224)

在上述情况下，输出颜色是与 rgb(132 132 224) 等价的 sRGB color()：color(srgb 0.517647 0.517647 0.878431)。

下一个函数会基于原始颜色来创造一个相对颜色：

cssrgb(from hsl(0 100% 50%) r 80 80)

在这个例子中：

将原始颜色（hsl(0 100% 50%)）转换为等价的 rgb()（rgb(255 0 0)）。

将输出颜色的 R 通道值设置为原始颜色 rgb() 的等价 R 通道值——255。

将输出颜色的 G 和 B 通道值设置为不基于原始颜色的新值：分别为 80 和 80。

最终输出颜色为 rgb(255 80 80) 在 sRGB 颜色空间中的等价——color(srgb 1 0.313726 0.313726)。

备注：如上所述，如果输出颜色使用了与原始颜色不同的颜色模型，则原始颜色会在后台转换为与输出颜色相同的模型或空间，从而可以以兼容的方式表示（即使用相同的通道）。

在本节之前我们看到的示例中，均未明确指定 alpha 通道值用于原始颜色或输出颜色。如果未指定输出颜色的 alpha 通道值，默认为与原始颜色的 alpha 通道值相同。如果未指定原始颜色的 alpha 通道（并且它不是相对颜色），则默认为 1。因此，对于上述示例，原始颜色和输出颜色的 alpha 通道值都为 1

cssrgb(from hsl(0 100% 50% / 0.8) r g b / alpha)

/* 计算的输出颜色：color(srgb 1 0 0 / 0.8) */

rgb(from hsl(0 100% 50% / 0.8) r g b / 0.5)

/* 计算的输出颜色：color(srgb 1 0 0 / 0.5) */

在接下来的示例中，hsl() 表示形式的原始颜色再次转换为 rgb()——rgb(255 0 0)。calc() 计算会应用于 R、G、B 和 A 值。经过计算，R、G、B 和 A 的值分别为 127.5、25、175 和 0.9。最终输出颜色为 rgb(127.5 25 175 / 0.9) 在 sRGB 颜色空间中的等价：color(srgb 0.5 0.0980392 0.686275 / 0.9)。

cssrgb(from hsl(0 100% 50%) calc(r/2) calc(g + 25) calc(b + 175) / calc(alpha - 0.1))

备注：因为原始颜色通道值会被解析为 值，所以在使用它们进行计算时，即使通道能够接受 、 或其他值类型，我们也必须使用 进行运算。例如在 中添加 是不起作用的。