0

I need some help with combining colours. I have a mostly white layer with the grey shades on it. Since it is fully opaque the layer underneath (which until now has been the correct colour) is obscured. I can make the new layer semi-opaque but of course that affects the colour of the layer underneath. Is there a way of setting the transparency of the new layer so that after it is added the final colour comes out to the right colour?

X + ?% opaque white = #4ea8e9;

(where + means X is underneath the white layer)

Solve for X

My best math tells me this colour is not possible. If ? is 50% and the target colour is rgb(78, 168, 233)

78 = r * 0.5 + 255 * 0.5 
168 = g * 0.5 + 255 * 0.5
233 = b * 0.5 + 255 * 0.5

becomes

r = 78/0.5 - 255 = -99   <-- problem
g = 168/0.5 - 255 = 81
b = 233/0.5 - 255 = 211

so to make r possible I changed the opacity to 0.3, but that makes g and b impossible

r = 78/0.3 - 255 = 5  
g = 168/0.3 - 255 = 81 <-- problem
b = 233/0.3 - 255 = 211 <-- problem

My last home is that there is some CSS filter that can operate on the mostly white layer to make the whiteness transparent while keeping the grey shading parts

Craig
  • 8,093
  • 8
  • 42
  • 74
  • 1
    if you really want to play with math you may consider changing the blending mode to have another variables. Related: https://stackoverflow.com/a/50582937/8620333 – Temani Afif Jan 20 '21 at 20:16
  • by the way your math isn't accurate, check this: https://stackoverflow.com/a/50574620/8620333 for the correct formula – Temani Afif Jan 20 '21 at 20:17
  • thanks @TemaniAfif I think the error is my maths comes from doing it first with 0.5 and 1-0.5, then switching in 0.3 but not 1-0.3. Anywho, mix-blend-mode is the right answer, I'm just having issues getting it to apply within Leaflet – Craig Jan 20 '21 at 22:54

0 Answers0