rgb()

rgb() 函数表示法根据其红色、绿色和蓝色分量在 sRGB 颜色空间 中表达颜色。可选的 alpha 分量表示颜色的透明度。

试一试

语法

css
/* Absolute values */
rgb(255 255 255)
rgb(255 255 255 / 50%)

/* Relative values */
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 通道值的<alpha-value>，其中数字 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 颜色（如果尚未指定为 RGB 颜色）。颜色定义为三个不同的颜色通道值——r（红色）、g（绿色）和b（蓝色）——以及一个 alpha 通道值（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。

最终输出颜色在 sRGB 色彩空间中相当于rgb(255 80 80)——color(srgb 1 0.313726 0.313726)。

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

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

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

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

rgb(from hsl(0 100% 50% / 0.8) r g b / 0.5)
/* Computed output color: 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。最终输出颜色在 sRGB 色彩空间中相当于rgb(127.5 25 175 / 0.9)：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>值，所以在计算中使用它们时，必须向它们添加数字，即使在通道通常接受<percentage>、<angle>或其他值类型的情况下也是如此。例如，将<percentage>添加到<number>不起作用。

正式语法

<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()颜色函数设置。这三种颜色相同。第三种颜色是半透明的，因此我们在<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;
  /* equal to 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 is 30% of 255 */
}

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

/* Use @supports to add in support for 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: 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);
}

结果

规范

规范
CSS 颜色模块级别 5
# relative-RGB
CSS 颜色模块级别 4
# rgb-functions

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅