如何计算应用opacity后颜色的十六进制色值？

嘿，这个问题其实很常见——本质上就是颜色的alpha混合计算，因为opacity会让元素的原颜色和下方的白色背景按比例融合，咱们一步步拆解清楚：

通用计算步骤 #

不管原颜色是十六进制还是RGB格式，都可以按这几步来推导最终显示色：

• 第一步：把原颜色转成十进制RGB格式。比如十六进制#4d4d4d，拆成RR=4d（对应十进制77）、GG=4d（77）、BB=4d（77），也就是RGB(77,77,77)。
• 第二步：把opacity值转成小数。比如50%就是0.5，30%就是0.3，别直接用百分比数字哦。
• 第三步：对每个颜色通道（R、G、B）套用混合公式：

  最终通道值 = (原颜色通道值 × opacity) + (背景通道值 × (1 - opacity))
  

  因为是白色背景，背景的每个通道值都是255，公式可以简化为：

  最终通道值 = 原通道值 × opacity + 255 × (1 - opacity)
  

• 第四步：把计算出的三个十进制通道值，转成两位十六进制数（结果四舍五入到整数），拼接成#RRGGBB格式就搞定了。

用你的例子实操一遍 #

原颜色：#4d4d4d（RGB(77,77,77)），opacity=50%（0.5）
逐个通道计算：

• R = (77 × 0.5) + (255 × 0.5) = 38.5 + 127.5 = 166 → 十六进制是A6
• G = 同样计算，结果也是166 → A6
• B = 同样计算，结果也是166 → A6
  最终显示的颜色就是#A6A6A6（或者RGB(166,166,166)）。

再举个例子加深理解 #

比如原颜色是纯红色#FF0000（RGB(255,0,0)），opacity=30%（0.3）：

• R = (255×0.3) + (255×0.7) = 255 → FF
• G = (0×0.3) + (255×0.7) = 178.5 → 四舍五入为179 → B3
• B = 和G通道计算结果一致，也是179 → B3
  最终颜色就是#FFB3B3，也就是咱们熟悉的淡粉色，完全符合直觉对吧？

额外小提示 #

如果你的背景不是白色，只需要把公式里的背景通道值换成对应背景的RGB值就行，核心原理完全相同。

内容的提问来源于stack exchange，提问作者dup.titung