RGB vs RGBA颜色格式的区别

在HTML中， RGB （红色、绿色和蓝色）指定了介于0和255之间的值来表示颜色的阴影或强度。RGB颜色模型共有256 x 256 x 256 = 16777216 种可能的颜色。

通过调整RGB值，我们可以得到不同阴影的颜色，以下是一些例子：

假设我们想要一个“黑色”颜色，设置所有参数为rgb(0, 0, 0)。
如果我们想要显示“白色”颜色，将所有参数设置为rgb(255, 255, 255)。
如果我们将参数设置为rgb(255, 0, 0)，它将给我们一个“红色”颜色，因为第一个参数（红色）设置为最高值。
如果我们将参数设置为rgb(0, 255, 0)，它将给我们一个“绿色”颜色，因为第二个参数（绿色）设置为最高值。
如果我们将参数设置为rgb(0, 0, 255)，它将给我们一个“蓝色”颜色，因为第三个参数（蓝色）设置为最高值。

示例

在下面的示例中，我们尝试使用HTML RGB颜色格式显示颜色。

<!DOCTYPE html>
<html>
<head>
   <title>HTML RGB color format</title>
</head>
<body>
   <h1 style="background-color:rgb(255, 0, 0);">Red</h1>
   <h1 style="background-color:rgb(60, 179, 113);">Green</h1>
   <h1 style="background-color:rgb(0, 0, 255);">Blue</h1>
   <h1 style="background-color:rgb(255, 255, 0);">Yellow</h1>
   <h1 style="background-color:rgb(255, 191, 0);">Orange</h1>
   <h1 style="background-color:rgb(255, 0, 255);">Pink</h1>
</body>
</html>

如输出所示，我们使用rgb颜色格式显示了六种颜色（红色，绿色，蓝色，黄色，橙色，粉红色）。

RGBA颜色格式

在HTML中，RGBA（红色，绿色，蓝色，alpha）是RGB颜色的扩展，具有Alpha通道。使用此格式，我们可以指定颜色的不透明度。

alpha参数是一个介于0.0（完全透明）到1.0（不透明）之间的数字。

示例

在下面的示例中，我们使用RGBA颜色格式通过调整透明度来获得所有“绿色”的阴影。

<!DOCTYPE html>
<html>
<head>
   <title>HTML RGBA color format </title>
   <style>
      span {
         text-align: center;
      }
   </style>
</head>
<body>
   <span>
      <h1>OPACITY OF GREEN</h1>
   </span>
   <h1 style="background-color: rgba(0, 255, 0, 1);">rgba(0, 255, 0, 1)</h1>
   <h1 style="background-color: rgba(0, 255, 0, 0.8);">rgba(0, 255, 0, 0.8)</h1>
   <h1 style="background-color: rgba(0, 255, 0, 0.6);">rgba(0, 255, 0, 0.6)</h1>
   <h1 style="background-color: rgba(0, 255, 0, 0.4);">rgba(0, 255, 0, 0.4)</h1>
   <h1 style="background-color: rgba(0, 255, 0, 0.2);">rgba(0, 255, 0, 0.2)</h1>
   <h1 style="background-color: rgba(0, 255, 0, 0);">rgba(0, 255, 0, 0)</h1>
</body>
</html>

从输出中我们可以看到，我们显示了绿色的阴影。

RGB 颜色格式 vs RGBA 颜色格式

RGB 颜色格式和 RGBA 颜色格式之间的区别如下所示：

RGB颜色格式	RGBA颜色格式
RGB的组成部分是红色、绿色和蓝色。	RGBA的组成部分是红色、绿色、蓝色和alpha通道（不透明度）。
这个格式不支持不透明度。	这个格式通过alpha通道支持不透明度。
颜色强度的取值范围在0至255之间。	对于RGB来说，取值范围是0-255，对于Alpha来说，取值范围是0.0-1.0。
这个格式的CSS函数是“rgb()”。	这个格式的CSS函数是“rgba()”。