My 'pale' PNGs are distorted with white patches

I've made my pngs 200% for retina displays they are 60x60px and I've used the css background-size: 30px 30px; to halve their size when they load on my webpage.

If the png is a dark color, then there is no issue. But if the png is a pale/lighter color, then as you can see from the image below the png becomes distorted with white areas.

What's happening and how can I fix it?

The top two images are 50% size of the original, the bottom image is zoomed over the top to better show the white issue.