Why does fill opacity change the shade of fill?

Question

I have a map here: http://abehandler.github.io/ (created with D3 and Leaflet)

The map has SVG elements with a fill property set to red or blue. But it shows three colors: red, blue and purple. I've noticed that if I set fill-opacity to 1 -- then the polygons on the map have the proper shade. But if I start changing the fill-opacity to less than 1, then the shades of the polygons start changing.

I want to have semi-transparent polygons -- but I do not want the shade to change. Why is changing the opacity changing the shade? How can I prevent this?

Answer 1

What you're seeing is that the background color is being mixed in with the semi-transparent color of the polygons. This results in the new mixed color that you see. This is very much by design and there's no way to disable it.

Think of a black circle on white background -- when you set its opacity to 0.5, the white background can be seen through the circle and the resulting color is 50% gray.

You can't really prevent this from happening if you want to use transparency unless you set the background to exactly the same color as the semi-transparent foreground.