RGBA 轉 RGB 工具(背景色合成)

輸入半透明的前景色(RGBA)和背景色,通過 Alpha 混合計算出兩者合成後的不透明 RGB 顏色,適用於生成不支援 rgba() 的環境所需的替代色。

Alpha 混合的計算公式

將 RGBA 轉換為不透明 RGB 的過程稱為「Alpha 混合」(over 運算子),對 R、G、B 三個通道分別獨立套用以下公式,最後四捨五入取整。

計算公式 result = foreground × alpha + background × (1 − alpha)

RGBA 轉 RGB 是什麼

半透明的 RGBA 顏色在現代 CSS 和設計工具中可以正常使用,但在郵件客戶端、舊版渲染引擎等無法解析透明度的環境中會顯示異常。本工具會根據指定的前景色(RGBA)和背景色,計算出兩者合成後實際可見的不透明 RGB 顏色,並以可直接用作替代值的形式輸出,供不支援透明度的環境使用。

計算的基礎是稱為「Alpha 混合」(over 運算子)的合成方式:將前景色的 R、G、B 各通道分別乘以 Alpha 值,再將背景色對應通道乘以(1-Alpha 值),兩者相加即得結果。由於該公式對三個通道分別獨立套用,同一種半透明色在不同背景色下會得到完全不同的結果。準備替代色時,務必準確指定該顏色實際將要疊加的背景色。

RGBA 轉 RGB 工具的使用方法

  1. 指定前景色(半透明色) 透過顏色選擇器選取,或直接貼上設計工具中確認過的 HEX 程式碼。
  2. 調整不透明度(Alpha 值) 使用 0~100% 的滑塊設定透明度,與實際 CSS 中使用的值保持一致。
  3. 指定背景色 使用白、黑預設按鈕,或輸入接近實際頁面背景的自訂顏色。
  4. 查看合成結果(不透明 RGB) HEX 和 RGB 字串會即時計算完成,同時可對比白色背景與黑色背景下的顯示效果。
  5. 將計算出的 RGB 值作為替代色使用 直接複製到 background-color 等不支援 rgba() 的屬性中。

用好本工具的小技巧

  • 部分郵件 HTML 模板和舊版瀏覽器(如某些版本的 IE)可能不支援 rgba() 或 opacity,將本工具計算出的不透明 RGB 值作為 background-color 的備用值一併寫入會更安全。
  • 前景色和背景色都支援通過顏色選擇器或直接輸入 HEX 程式碼指定,可以直接貼上設計工具中確認過的準確顏色。
  • 不透明度(Alpha 值)可通過 0~100% 的滑塊調整。0% 表示完全透明(即背景色本身),100% 表示完全不透明(即前景色本身)。
  • 之所以為背景色提供白、黑兩個預設按鈕,是因為這兩種顏色是實際工作中最常被比較的代表性場景(淺色模式/深色模式的背景)。如果輸入更接近實際頁面背景色的自定義顏色,可以得到更準確的替代色。

RGBA 轉 RGB 的應用場景

為 HTML 郵件準備背景色替代值

針對某些版本的 Outlook 等無法解析 rgba() 的郵件客戶端,可預先將合成好的不透明 RGB 值指定為 background-color。

為舊版瀏覽器或 PDF 匯出指定顏色

為不支援透明度的渲染引擎,或不遵循 CSS Alpha 值的 PDF 匯出工具,預先計算好需要傳入的顏色。

確認設計稿的配色效果

無需開啟 Photoshop 等軟體,即可用數值快速確認半透明圖層疊加後實際呈現的顏色。

同時核對淺色模式與深色模式下的顯示效果

利用白、黑背景預設,一次性對比同一種半透明色在兩種主題下的變化。

製作品牌色的半透明變體

將品牌色乘以指定 Alpha 值後在特定背景上的最終顏色匯出,加入品牌設計規範中。

術語表

RGBA
在紅(R)、綠(G)、藍(B)三原色基礎上,加入表示不透明度的 Alpha 通道共同表示顏色的格式。CSS 中寫作 rgba(255, 0, 0, 0.5) 這樣的形式。
Alpha 值
表示顏色不透明度的數值,以 0(完全透明)到 1(完全不透明)之間的小數或百分比表示。數值越小,背景透出的程度越高。
Alpha 混合
按 Alpha 值確定的比例,將半透明前景色與背景色混合,從而生成單一不透明顏色的計算過程。也稱「over 運算子」,是本工具計算公式的基礎。
十六進位顏色代碼(HEX)
將 RGB 各通道的數值以 #RRGGBB 形式表示為十六進位數。是 CSS 和設計工具中最常用的顏色指定方式之一。
替代色
當真正想要使用的表現方式(此處指半透明色)在某些環境中無法被正確解析時,預先準備的代替指定值。
over 運算子
Alpha 混合中最基本的合成方式,指將前景色「疊加在」背景色之上的處理過程,正是本工具所採用的計算公式。

常見問題

部分郵件客戶端(尤其是某些版本的 Outlook)和舊版瀏覽器完全不支援 CSS 的 rgba() 函式或 Alpha 透明度。在這些環境中,透明部分可能無法正確顯示,導致設計出現問題。預先計算出與背景色合成後的不透明 RGB 值,並將其指定為不支援 rgba() 環境下的替代色,可以避免視覺效果出現偏差。

半透明顏色同時包含「顏色本身的資訊」和「透過它顯示出的背景資訊」,因此最終顯示效果必然取決於背景色。例如在黑色背景上會顯得偏暗沉,在白色背景上則顯得偏亮淡。這並非缺陷,而是 Alpha 混合本身的特性,因此在計算替代色時必須指定實際會使用的背景色。

CSS 的 Alpha 值以 0(完全透明)到 1(完全不透明)之間的小數指定,或等效地以 0%~100% 的百分比表示。本工具使用 0~100% 範圍的滑塊,方便直觀調整。

只要顯示在你指定的那個背景色之上,理論上看起來會完全一樣。但這僅限於「該特定背景色之上」,如果放到其他背景色上,顯示效果就會發生變化。用作替代色時,重要的是準確指定該顏色實際將要使用的頁面背景色。
工具君

閒話 ― Alpha 混合技術的起源

Alpha 混合(alpha compositing)的概念一般可追溯至 1984 年 Thomas Porter 和 Tom Duff 在計算機圖形學領域發表的論文《Compositing Digital Images》。在此之前,將前景與背景合成通常只處理顏色資訊本身。這篇論文系統化地提出了將表示不透明度的第四個通道——Alpha 通道——與顏色資訊配對處理的方法,此後成為計算機圖形學和影像編輯軟體中的標準思路。

如今,幾乎所有處理透明度的技術都建立在這一 Alpha 混合思想之上:PNG、SVG 等影像格式,CSS 的 rgba()/opacity,以及大多數繪圖軟體的圖層功能。被稱為「over 運算子」的最基本合成方法(將前景疊加在背景之上)正是本工具所採用的計算公式。

然而與舊版郵件客戶端及老舊瀏覽器之間的相容性問題至今仍未完全解決。尤其是 HTML 郵件受渲染引擎的限制較大,現代 CSS 的透明表現方式往往無法直接使用,因此預先轉換為不透明的替代色這一實用技巧至今仍被廣泛採用。