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 工具的使用方法
- 指定前景色(半透明色) 透過顏色選擇器選取,或直接貼上設計工具中確認過的 HEX 程式碼。
- 調整不透明度(Alpha 值) 使用 0~100% 的滑塊設定透明度,與實際 CSS 中使用的值保持一致。
- 指定背景色 使用白、黑預設按鈕,或輸入接近實際頁面背景的自訂顏色。
- 查看合成結果(不透明 RGB) HEX 和 RGB 字串會即時計算完成,同時可對比白色背景與黑色背景下的顯示效果。
- 將計算出的 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 混合中最基本的合成方式,指將前景色「疊加在」背景色之上的處理過程,正是本工具所採用的計算公式。
常見問題
閒話 ― Alpha 混合技術的起源
Alpha 混合(alpha compositing)的概念一般可追溯至 1984 年 Thomas Porter 和 Tom Duff 在計算機圖形學領域發表的論文《Compositing Digital Images》。在此之前,將前景與背景合成通常只處理顏色資訊本身。這篇論文系統化地提出了將表示不透明度的第四個通道——Alpha 通道——與顏色資訊配對處理的方法,此後成為計算機圖形學和影像編輯軟體中的標準思路。
如今,幾乎所有處理透明度的技術都建立在這一 Alpha 混合思想之上:PNG、SVG 等影像格式,CSS 的 `rgba()`/`opacity`,以及大多數繪圖軟體的圖層功能。被稱為「over 運算子」的最基本合成方法(將前景疊加在背景之上)正是本工具所採用的計算公式。
然而與舊版郵件客戶端及老舊瀏覽器之間的相容性問題至今仍未完全解決。尤其是 HTML 郵件受渲染引擎的限制較大,現代 CSS 的透明表現方式往往無法直接使用,因此預先轉換為不透明的替代色這一實用技巧至今仍被廣泛採用。