HTML - RGB 和 RGBA 颜色

HTML RGB 和 RGBA 颜色受所有浏览器支持。RGB 颜色值表示颜色中红色、绿色和蓝色的强度。RGBA 是 RGB 的扩展，它还指定颜色不透明度的 alpha 通道。

我们可以使用红色、绿色和蓝色的组合创建任何颜色。如果将所有三种颜色的强度设置为最大，则结果颜色将为白色。同样，如果我们将所有 RGB 值的强度设置为零，我们将得到黑色。

RGB 颜色值

在 HTML 中，可以使用以下函数定义颜色。

rgb(red, green, blue)

rgb() 函数接受三个参数，即红色值、绿色值和蓝色值。每个值都使用一个整数指定，该整数的范围可以是 0 到 255，其中 0 表示没有颜色，255 表示全色强度。混合这些值将创建其他不同的颜色。

RGBA 颜色值

在 HTML 中，可以使用 rgba 函数定义 RGBA 颜色。

rgba(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) 是完全透明的红色。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

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 标签背景的示例。

Open Compiler

<!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 颜色代码设置了背景颜色和文本颜色。

Open Compiler

<!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>

打印页面