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

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

Alpha 混合的計算公式

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

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

使用提示

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

常見問題

部分郵件客戶端(尤其是某些版本的 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 的透明表現方式往往無法直接使用,因此預先轉換為不透明的替代色這一實用技巧至今仍被廣泛採用。