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 的透明表现方式往往无法直接使用,因此预先转换为不透明的替代色这一实用技巧至今仍被广泛采用。

→ 查看全部趣味知识