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

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>

列印頁面