所有浏览器都支持 HTML RGB 和 RGBA 颜色。RGB 颜色值表示颜色中 RED、GREEN 和 BLUE 的强度。RGBA 是 RGB 的扩展，它还指定了颜色不透明度的 Alpha 通道。
我们可以使用红色、绿色和蓝色的组合来制作任何颜色。如果设置所有三种颜色的最大强度，则生成的颜色将为白色。同样，如果我们为所有RGB值提供零强度，我们将得到黑色。
RGB 颜色值
在 HTML 中，可以使用以下函数定义颜色。
rgb(red, green, blue)
rgb（） 函数采用三个参数，即红色值、绿色值和蓝色值。每个值都使用一个整数指定，该整数的范围可以从 0 到 255，其中 0 表示无颜色，255 表示全色强度。混合这些值将创建其他不同的颜色。
RGBA 颜色值
在 HTML 中，可以使用 rgba 函数定义 RGBA 颜色。
rgb(red, green, blue, alpha)
rgba（） 函数接受四个参数。参数 alpha 接受介于 0 和 1 之间的十进制值，以确定 RGB 颜色的不透明度。值 0 表示颜色不可见，值 1 表示颜色完全可见。
例如，rgba（255， 0， 0， 1.0） 是完全不透明的红色，rgba（255， 0， 0， 0.5） 是完全透明的红色，rgba（255， 0， 0， 0.0） 是完全透明的红色。
RGB和RGBA颜色的比较
下面是一个列表，显示一些使用RGB值的颜色，并使用RGBA功能降低它们的不透明度。
| RGB颜色 | RGB功能 | RGBA颜色 | RGBA功能 |
|---|---|---|---|
| rgb（0， 0， 0） | RGBA（0， 0， 0， 0.7） | ||
| RGB（255， 0， 0） | RGBA（255， 0， 0， 0.7） | ||
| RGB（0,255,0） | RGBA（0， 255， 0， 0.7） | ||
| rgb（0， 0， 255） | RGBA（0， 0， 255， 0.7） | ||
| RGB（255， 255， 0） | RGBA（255， 255， 0， 0.7） | ||
| rgb（0， 255， 255） | RGBA（0， 255， 255， 0.7） | ||
| RGB（255， 0， 255） | RGBA（255， 0， 255， 0.7） | ||
| RGB（192， 192， 192） | RGBA（192， 192， 192， 0.7） | ||
| RGB（255， 255， 255） | RGBA（255， 255， 255， 0.7） |
HTML RGB 和 RGBA 颜色示例
以下是一些示例，说明在 HTML 中使用 rgb 和 rgba 函数。
HTML RGB 颜色
下面是一个使用 rgb（） 值按颜色代码设置 HTML 标签背景的示例。
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by RGB Code</title>
</head>
<body style="background-color: rgb(255,255,0);">
<p>
Use different color code for body and
table and see the result.
</p>
<table style="background-color: rgb(0,0,0);">
<tr>
<td>
<p style="color: rgb(255,255,255);">
This text will appear white on
black background.
</p>
</td>
</tr>
</table>
</body>
</html>
HTML RGBA 颜色
在此示例中，我们使用 rgba 颜色代码设置了背景颜色和文本颜色。
<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 1px solid;
height: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>RGBA Color variations</h2>
<div style =
"background-color: rgba(255, 0 ,0 ,1);">
opacity 1.0
</div>
<div style =
"background-color: rgba(255, 0 ,0 ,0.9);">
opacity 0.9
</div>
<div style =
"background-color: rgba(255, 0 ,0 ,0.8);">
opacity 0.8
</div>
<div style =
"background-color: rgba(255, 0 ,0 ,0.7);">
opacity 0.7
</div>
<div style =
"background-color: rgba(255, 0 ,0 ,0.6);">
opacity 0.6
</div>
<div style =
"background-color: rgba(255, 0 ,0 ,0.5);">
opacity 0.5
</div>
<div style =
"background-color: rgba(255, 0 ,0 ,0.4);">
opacity 0.4
</div>
<div style =
"background-color: rgba(255, 0 ,0 ,0.3);">
opacity 0.3
</div>
<div style =
"background-color: rgba(255, 0 ,0 ,0.2);">
opacity 0.2
</div>
<div style =
"background-color: rgba(255, 0 ,0 ,0.1);">
opacity 0.1
</div>
<div style =
"background-color: rgba(255, 0 ,0 ,0.0);">
opacity 0.0
</div>
</body>
</html>
