if you’re going to scale along a color gradient instead of opacity, i think such a map looks better if you’re using relatively small squares. in the case of the new test squares, since the squares are relatively large (the tradeoff for clickability and speed of processing), i think a color gradient approach will look bad. below are examples that may help to show what i mean. these examples are using 4px x 4px squares, which are smaller than 8px x 8px squares, but are already clouding up the map. (they use a different color gradient than your example, but they are using iNat data, though probably are scaled a little differently than the test tiles).
(compare the above examples to this: https://forum.inaturalist.org/t/observation-density/6305/6, which is a density map from GBIF using iNat data at very fine resolution – very beautiful, in my opinion, but very resource intensive to create and not clickable.)
i think the best thing to address the concerns about color getting lost in other colors is use a solid border that is a color that will pop over any other color likely to show up on a basemap – like magenta or possibly yellow. but that will look a little more garish than the white border. or maybe if you just have solid yellow or magenta in the corners, it might not look as bad.
here’s a test screenshot where i’ve colored in the borders or border corners of some of the squares using a bright white [rgba(255,255,255,1)], yellow [rgba(255,255,0,1)], magenta [rgba(255,0,255,1)], or cyan [rgba(0,255,255,1)]:
