Color Blending mismatch in Iced vs Figma

Request Feedback
1

In my Iced application, I’ve set a component’s background to a semi-transparent red color: (255, 0, 0, 0.76). The application’s theme background is fully transparent (0, 0, 0, 0.0), and I’ve also disabled the default ‘web-colors’ feature in Cargo.toml.

When I run the app and position the window over a black desktop background, using a color picker on the component gives me a result of (228, 13, 9).

In contrast, when I recreate the same setup in Figma - using a fill color of (255, 0, 0, 0.76) over a black background—the color picker shows (194, 0, 0), which is the expected result from standard alpha blending:

foreground = (255, 0, 0), alpha = 0.76
background = (0, 0, 0)
result = foreground * alpha + background * (1 - alpha)
= (194, 0, 0)

The problem: In the Iced app, the resulting color does not match the expected blend and shows unexpected green and blue tones. Why doesn’t the Iced window render as (194, 0, 0)? And why does it show (228, 13, 9) instead, with visible color distortion?

2

First of all, the math you gave is wrong. It works for mixing two colors that both have an alpha of 1.0, i.e. 100%. For everything else, you need to do premultiplication and then undo it at a later step: CSS Color Module Level 5

Second, have you checked it with the web-colors feature turned on? It exists because most of the web uses incorrect color-blending (blending in non-linear space) and that leads to wrong results.

3

Thanks for your response.
Using “web-colors” with (255, 0, 0, 0.76) gives a result of (195, 10, 7) when placed over a black desktop background.

4

I’m not sure where the 10 and 7 come from, given the method used in iced they should both be 0, at least if the background is truly black and there’s nothing between the two colors.