透明度叠加计算器介绍
在 CSS 中给元素设置半透明背景色时，最终屏幕呈现的颜色等于前景色按 alpha 混合背景色后的等效实色。理解这个公式就能在拿到设计稿时反推实现方式，也能在不支持透明度的旧环境里给出实色兜底。
叠加公式为：结果通道 = 前景通道 × alpha + 背景通道 × (1 - alpha)。红绿蓝三个通道分别计算后重新组合，得到的就是等效不透明色。alpha 越接近 1，结果越接近前景色。
本工具支持两种用法：一是输入前景色与背景色实时预览叠加效果并导出等效实色；二是反过来，从叠加结果与已知背景反推所需的前景色，适合设计还原场景。
使用步骤
- 11：输入前景色（半透明色）的 HEX 或 RGBA 值
- 22：拖动透明度滑块或直接输入 alpha 百分比
- 33：选择或输入背景色，页面实时显示叠加后的等效实色
- 44：复制 hex8（含透明度通道）或等效实色 HEX/RGBA 输出
适用场景
- 把半透明遮罩色换算成等效实色给旧浏览器兜底
- 设计还原时反推设计稿中毛玻璃层的真实颜色
- 生成带 alpha 通道的 hex8 色值用于品牌规范
- 检查半透明浮层在不同背景上的最终观感
实用小贴士
- alpha=0.5 的白色叠在黑底上就是 #808080 灰，可以用这个快速心算校验
- hex8 的最后两位是 alpha 的十六进制，0.6 约等于 99，记住几个常用值能提高效率
- 叠加顺序是前景压背景，不要把两层颜色填反
常见问题
hex8 的 alpha 两位怎么算？
alpha 百分比乘 255 再转十六进制，如 50% × 255 约等于 128，即 80。工具输出的 hex8 已经换算好，直接复制即可。
为什么叠加结果和截图颜色对不上？
如果页面用了 mix-blend-mode、backdrop-filter 或广色域色彩管理，实际渲染会偏离简单 alpha 合成公式。本工具计算的是标准 sRGB alpha 合成结果。
可以输入 rgba 吗？
可以，支持 rgba() 与 #RRGGBBAA 两种带透明度的输入格式，也支持纯 HEX 加独立透明度滑块。