rgb()
Baseline 广泛可用 *
备注：rgba() 函数式表示法是 rgb() 的别名，两者完全相同。建议使用 rgb()。
rgb() 函数式表示法根据红、绿、蓝三个分量，在 sRGB 色彩空间中表示一种颜色。一个可选的 alpha 分量表示颜色的透明度。
试一试
background: rgb(31 120 50);
background: rgb(30% 20% 50%);
background: rgb(255 122 127 / 80%);
background: rgb(255 122 127 / 0.2);
<section id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#example-element {
min-width: 100%;
min-height: 100%;
padding: 10%;
}
语法
/* Absolute values */
rgb(255 255 255)
rgb(255 255 255 / 50%)
/* Relative values */
rgb(from green r g b / 0.5)
rgb(from #123456 calc(r + 40) calc(g + 40) b)
rgb(from hwb(120deg 10% 20%) r g calc(b + 200))
/* Legacy 'rgba()' alias */
rgba(0 255 255)
/* Legacy format */
rgb(0, 255, 255)
rgb(0, 255, 255, 50%)
备注：出于兼容性原因，如果 alpha 通道的值正好为 1，Web API 序列化的颜色值会表示为 rgb() 颜色，否则表示为 rgba() 颜色。在这两种情况下，都使用旧式语法，即以逗号作为分隔符（例如 rgb(255, 0, 0)）。
值
下面描述了绝对颜色和相对颜色的允许值。
绝对值语法
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 通道值。如果包含该值，则其前面需要有一个斜杠（/）。
备注：为了完全支持表示可见颜色的整个光谱，相对 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）作为输出通道值。
rgb(from hsl(0 100% 50%) r g b)
该函数的输出颜色是 sRGB 中 rgb(255 0 0) 的 color() 等效表示：color(srgb 1 0 0)。
下一个函数对输出颜色的通道值使用绝对值，输出了一个完全不同于源颜色的新颜色：
rgb(from hsl(0 100% 50%) 132 132 224)
在上述情况下，输出颜色是 sRGB 中 rgb(132 132 224) 的 color() 等效表示：color(srgb 0.517647 0.517647 0.878431)。
以下函数创建了一个基于源颜色的相对颜色：
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 通道值。
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)。然后对 R、G、B 和 A 值应用 calc() 计算。计算后，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)。
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( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<alpha-value> =
<number> |
<percentage>
示例
基本语法
在此示例中，我们有三个 <div> 元素，它们在条纹背景上显示不同的背景颜色。
HTML
<div>
<div id="integer"></div>
<div id="percent"></div>
<div id="alpha"></div>
</div>
CSS
背景颜色使用 rgb() 颜色函数设置。这三种颜色是相同的。第三种是半透明的，因此我们在 <body> 上添加了一个 repeating-linear-gradient()，以更好地展示 alpha 通道的透明度。
body {
background: repeating-linear-gradient(-45deg, #eeeeee 0 2px, white 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
: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
<div class="space-separated"></div>
<div class="comma-separated"></div>
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);
}
结果
规范
| 规范 |
|---|
| CSS 颜色模块第五版 # 相对 RGB |
| CSS 颜色模块第四版 # rgb-functions |
浏览器兼容性
加载中…