基于已知颜色计算带透明度的十六进制红色圆环颜色及透明度

已知条件 #

• 紫色背景圆环颜色：#afb0cc
• 白色人形图案颜色：#ffffff

叠加采样数据 #

• 红色圆环叠加紫色背景的采样色：#d75866
• 红色圆环叠加白色人形的采样色：#ff7f7f

计算过程 #

我们使用Alpha颜色混合公式推导：对于每个RGB颜色通道，混合后的最终颜色值满足：
最终色通道值 = 前景色通道值 × α + 背景色通道值 × (1 - α)
其中α为前景色的不透明度（取值范围0~1，0为完全透明，1为完全不透明），红色圆环为前景色。

步骤1：推导红色圆环的R通道值 #

分析白色背景的R通道：
白色R通道值为255，采样色R通道值为255（对应#ff7f7f的ff），代入公式：
255 = Rr × α + 255 × (1 - α)
化简后可得：Rr = 255，即红色圆环的R通道为最大值255（十六进制ff）。

步骤2：计算不透明度α #

分析紫色背景的R通道：
紫色R通道值为175（对应#afb0cc的af），采样色R通道值为215（对应#d75866的d7），代入公式：
215 = 255 × α + 175 × (1 - α)
展开计算：
215 = 255α + 175 - 175α
215 - 175 = 80α
α = 40 ÷ 80 = 0.5
即红色圆环的不透明度为50%，对应十六进制Alpha值为80。

步骤3：推导红色圆环的G、B通道值 #

代入α=0.5到白色背景的G通道公式时，因取色四舍五入误差出现负数结果（实际混合后G通道值应为127.5，取整为128对应#ff8080），我们结合紫色背景的通道验证：
紫色G通道值为176（b0），采样色G通道值为88（58）：
88 = Gr × 0.5 + 176 × 0.5
计算得Gr = 0

紫色B通道值为204（cc），采样色B通道值为102（66）：
102 = Br × 0.5 + 204 × 0.5
计算得Br = 0

最终结论 #

红色圆环的RGB颜色值为#ff0000，不透明度为50%（十六进制RGBA完整表示为#ff000080）。

内容的提问来源于stack exchange，提问作者programming_ritual