Jetpack Compose：如何通过叠加两种已有颜色构建自定义颜色？

设计师常通过将自定义主题中的已有颜色叠加（并应用透明度）来创建自定义颜色。如何无需设置多层背景，直接计算出叠加后的颜色？例如想要实现类似如下代码的效果：

val background = MaterialTheme.colors.MyDanger.copy(alpha = 0.12f) + MaterialTheme.colors.CustomTint16

由于Color未定义加法运算（且颜色叠加不满足交换律），请问能否通过代码直接实现颜色叠加并仅应用结果？

当然可以实现，核心是用Alpha颜色混合公式手动计算最终色。颜色叠加本质是带透明度的前景色与背景色的像素混合，我们直接按混合逻辑计算RGB通道的最终值即可，不用依赖多层背景。

实现思路 #

针对前景色（带透明度）叠加到背景色的场景，通用混合公式如下：

• 最终RGB单通道值 = (前景通道值 × 前景透明度 + 背景通道值 × 背景透明度 × (1 - 前景透明度)) / 最终透明度
• 最终透明度 = 前景透明度 + 背景透明度 × (1 - 前景透明度)

Jetpack Compose的Color类本身没有提供这个方法，我们可以给它扩展一个overlay函数来封装这个逻辑。

代码实现 #

import androidx.compose.ui.graphics.Color

/**
 * 将当前颜色作为【带透明度的前景色】，叠加到传入的背景色上，返回混合后的最终颜色
 * @param backgroundColor 被叠加的背景色
 */
fun Color.overlay(backgroundColor: Color): Color {
    val foregroundAlpha = this.alpha
    val backgroundAlpha = backgroundColor.alpha

    // 计算最终透明度
    val finalAlpha = foregroundAlpha + backgroundAlpha * (1 - foregroundAlpha)
    if (finalAlpha == 0f) {
        return Color.Transparent
    }

    // 计算RGB各通道的最终值（归一化到0~1区间）
    val finalRed = (this.red * foregroundAlpha + backgroundColor.red * backgroundAlpha * (1 - foregroundAlpha)) / finalAlpha
    val finalGreen = (this.green * foregroundAlpha + backgroundColor.green * backgroundAlpha * (1 - foregroundAlpha)) / finalAlpha
    val finalBlue = (this.blue * foregroundAlpha + backgroundColor.blue * backgroundAlpha * (1 - foregroundAlpha)) / finalAlpha

    return Color(finalRed, finalGreen, finalBlue, finalAlpha)
}

使用示例 #

对应你想要的效果，直接调用这个扩展函数即可，完全替代想象中的"+"运算：

val background = MaterialTheme.colors.MyDanger.copy(alpha = 0.12f).overlay(MaterialTheme.colors.CustomTint16)

关键注意点 #

• 颜色叠加不满足交换律：前景色（带透明的那个）和背景色的顺序不能搞反，调用时要明确谁叠在谁上面
• 支持背景色带透明：如果你的背景色本身也有透明度，这个公式也能正确计算出最终的半透明混合色
• 数值归一化：所有通道值都是0~1的浮点数，和Compose的Color类属性完全匹配，无需额外转换

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