0
<body style="background-color:rgb(0,0,0)">
  <div style="background-color: rgba(0, 255, 0, 0.5)">
    rgba(0, 255, 0, 0.5)
  </div>
  <div style="background-color: rgb(0, 127, 0)">
    rgb(0, 127, 0)
  </div>  
</body>

Here is a jsbin: https://jsbin.com/sifirebuxa/edit?html,css,output

Screenshot of what I see (Chrome Version 109 Mac OS X): enter image description here

I expected the two divs to have equal colors. But I can see visually and verify with color-picker tools that they do not match in my browser.

I've read in many places that alpha blending works via the formula: mix(c1, c2, a) = c1*(1-a) + c2*a But based on this experiment, this does not seem to be true in modern browsers.

My color-picker (gimp) tells me that the rendered rgb color of the top div is rgb(19, 128, 13). I find this quite surprising: why would mixing green with black cause red and blue to increase, and why would they increase by differing amounts?

Can anyone explain the calculation that would result in rgb(19, 128, 13)?

In Firefox, the colors appear much much closer, perhaps identical.

Duncan
  • 209
  • 1
  • 6
  • The amount of light which comes through depends on the order in which the elements are stacked (if you put a solid black one over a semi transparent green one you see nothing but black) so I don't see how your formula works if you are interpreting a as 0.5 (if not, what is it?). Now, running your code: on my system in Chrome I notice a slight difference which I would expect (and GIMP tells me the Gs differ slightly). But I'd expect that because 127 is not half of 255. If I use 254 instead then the Gs are identical. No idea how you got R and B. How are you showing GIMP the colors to select? – A Haworth Jan 20 '23 at 16:45
  • Sorry, forgot to say, I get the same results on Firefox and Chrome/Edge (Windows 10). with the first color having G = 254 then the resulting colors of both according to GIMP have G = 127. – A Haworth Jan 20 '23 at 17:21
  • Hi thanks for trying it. By `mix(c1,c2,a)` I am assuming `c1` is the foreground, `a` is its alpha value, and `c2` is a solid background color. The way I'm using Gimp is to take a screenshot (PNG) and open it with Gimp, then use its color picker. It's a good idea to change 255 to 254, but it doesn't change the result for me. Gimp tells me the top bar is `rgb(16, 128, 13)`. Btw I'm guessing you are not on a Mac? It might be a Mac-only issue based on Ti Hausmann's comment [here](https://stackoverflow.com/questions/9014729/manually-alpha-blending-an-rgba-pixel-with-an-rgb-pixel?rq=1). – Duncan Jan 20 '23 at 19:17
  • I am on Windows 10 on a laptop. – A Haworth Jan 20 '23 at 19:21

0 Answers0