rgb()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

rgb() 函数标记根据 sRGB 色彩空间中颜色的红色、绿色和蓝色分量来表达颜色。可选的 alpha 分量代表了颜色的透明度。

尝试一下

语法

css
/* 绝对值 */
rgb(255 255 255)
rgb(255 255 255 / 50%)

/* 相对值 */
rgb(from green r g b / 0.5)
rgb(from #0000FF calc(r + 40) calc(g + 40) b)
rgb(from hwb(120deg 10% 20%) r g calc(b + 200))

rgba() 函数也可以用来表达 sRGB 颜色。这是 rgb() 的别名，接受相同的参数。

备注： rgb() / rgba() 都可使用旧版的语法编写，即所有的值都是用逗号分隔的，如 rgb(255, 0, 0)。在逗号分隔的旧版语法中，混合数字和百分比值类型是无效的（即 R、G 和 B 值必须是全部数字或全部百分比），也不允许使用 none 值。

值

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

绝对值语法

rgb(R G B[ / A])

参数如下：

R、G、B

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

A 可选

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

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

相对值语法

rgb(from <color> R G B[ / A])

参数如下：

from <color>

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

R、G、B

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

A 可选

<alpha-value> 表示输出颜色的 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 之间（包含）的 <number>。
  • alpha 通道会被解析为取值范围在 0 到 1 之间（包含）的 <number>。

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

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

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

css
rgb(from hsl(0 100% 50%) r g b)

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

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

css
rgb(from hsl(0 100% 50%) 132 132 224)

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

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

css
rgb(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

css
rgb(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)。

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

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

形式语法

<rgb()> = 
  <legacy-rgb-syntax>  |
  <modern-rgb-syntax>  

<legacy-rgb-syntax> = 
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )      

<modern-rgb-syntax> = 
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

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

示例

基础语法

在这个例子中，下面我们会有三个展示在条纹背景上，且具有不同背景颜色的 <div> 元素。

HTML

html
<div>
  <div id="integer"></div>
  <div id="percent"></div>
  <div id="alpha"></div>
</div>

CSS

背景颜色是使用 rgb() color 函数设置的。这三种颜色是一样的。第三个是半透明的，所以我们在 <body> 上使用了 repeating-linear-gradient()，以更好地展示 alpha 通道的透明度。

css
body {
  background: repeating-linear-gradient(-45deg, #eee 0 2px, #fff 2px 6px);
  padding: 10px;
}

#integer {
  background-color: rgb(189 85 218);
}

#percent {
  background-color: rgb(74% 33% 85%);
}

#alpha {
  background-color: rgb(189 85 218 / 0.25);
}

结果

在 rgb() 中使用相对值

本示例使用了不同的背景颜色来设置三个 <div> 元素样式。左边元素被赋予未修改的 --base-color，而中间和右边的元素被赋予 --base-color 的变体，会逐渐减小红色通道的值，增大蓝色通道的值。

这些变体是使用了相对颜色定义的——--base-color 自定义属性被传递到 rgb() 函数中，然后通过 calc() 函数修改输出颜色的红色和蓝色通道值，得到预期效果，同时绿色通道值保持不变。

CSS

css
:root {
  --base-color: orange;
  /* 等价于 rgb(255 165 0) */
}

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

#two {
  background-color: rgb(from var(--base-color) calc(r - 76.5) g calc(b + 76.5));
  /* 76.5 是 255 的 30%  */
}

#three {
  background-color: rgb(from var(--base-color) calc(r - 153) g calc(b + 153));
  /* 153 是 255 的 60% */
}

/*  使用 @supports 添加对旧语法的支持，该语法要求在计算中将 r g b 值指定为百分比（带单位）。
    这对于 Safari 16.4+ 是必需的。 */
@supports (color: rgb(from red r g calc(b + 30%))) {
  #two {
    background-color: rgb(from var(--base-color) calc(r - 30%) g calc(b + 30%));
  }

  #three {
    background-color: rgb(from var(--base-color) calc(r - 60%) g calc(b + 60%));
  }
}

结果

旧版语法：逗号分隔值

由于历史原因，rgb() 函数接受所有值用逗号分隔的形式。

HTML

html
<div class="space-separated"></div>
<div class="comma-separated"></div>

CSS

css
div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: rgb(255 0 0 / 50%);
}

div.comma-separated {
  background-color: rgb(255, 0, 0, 0.5);
}

结果

rgba() 语法

rgba() 语法是 rgb() 的别名。

HTML

html
<div class="rgb"></div>
<div class="rgba"></div>

CSS

css
div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.rgb {
  background-color: rgb(255 0 0 / 50%);
}

div.rgba {
  background-color: rgba(255 0 0 / 0.5);
}

结果

规范

Specification
CSS Color Module Level 5
# relative-RGB
CSS Color Module Level 4
# rgb-functions

浏览器兼容性

BCD tables only load in the browser

参见