0

I've been trying to understand how Chrome calculate transparency color in whole day. And also I've seen same linear interpolation alpha * forground_color + (1 - alpha) * background_color formula thousand times on the internet. It works if background was white. But if background is not white Chrome gives me different resulting values... For example:

.bg {
  background-color: #666; /* or rgb(102, 102, 102) */
  width: 120px;
  height: 120px;
  padding: 10px;
}
.fg {
  background-color: rgba(255, 0, 0, .87);
  width: 100%;
  height: 100%;
}
<div class="bg">
  <div class="fg"></div>
</div>

Expecting value was rgb(235, 13, 13) but Chrome gives me rgb(236, 31, 27). Even though background is gray and foreground green and blue components are 0 resulting value is rgb(236, 31, 27). How come resulting value's green and blue components are different from each other? And itsn't even close resulting value 102 * (1 - .87) = 102 * .13 = 13.26. I tried many other color combinations. Chrome doesn't linearly blending colors if background is not white. Can you tell me how Chrome calculate transparency color?

jeefo
  • 164
  • 1
  • 12

1 Answers1

0

I just checked the values of color inside your square and it seems that everything works correctly. I guess that you have some extra colors in your project or you have some kind of chrome plugin that changes colors e.g. Dark Reader.

enter image description here

bg-color = rgb(102, 102, 102)
fg-color = rgba(255, 0, 0, .87)

calculations: 
Red: 0.87 * 255 + (0.13) * 102 = 235.11
Green: 0.87 * 0 + (0.13) * 102 = 13.26
Blue: 0.87 * 0 + (0.13) * 102 = 13.26

result:
rgb(235, 13, 13)
Berd
  • 31
  • 3
  • No, it doesn't on my computer. By the way what is your OS? I have MacOS Big Sur and Chrome Version 88.0.4324.182 (Official Build) (x86_64). Also it works as expected on Firefox. But Chrome doesn't interpolate linearly. – jeefo Feb 22 '21 at 01:11
  • MacOS Big Sur 11.0.1 (20B50) Chrome Version 88.0.4324.96 (Official Build) (x86_64) Does it happen also in chrome incognito mode? – Berd Feb 22 '21 at 01:35
  • Yes, it still resulting value `rgb(236, 31, 27)` in incognito mode too. – jeefo Feb 22 '21 at 14:25