I apologize for the utter simplicity of this, but it is beyond me.
I am using a Leaflet and Leaflet.markercluster to add markers to a map. The latter helps resolve clutter by grouping icons near to each other, which would otherwise overlap.
As you can see from this screenshot, the more markers in a group, the darker - sort of, it runs from dark orange, through yellow to green (there are actually 5 levels). Visit the demo and zoom the map to see how it works.
So far, so good. I have implemented this in my app and when expanded to individual markers, they are either green or blue, with each having a specific meaning.
I also have different set of markers, which are read, and now there becoming enough of them to want to cluster them too.
The red marker is with RGB value of #982E40 (I use the smaller marker). See here for all leaflet markers.
There are a total of five zoom levels, governed by CSS, depending on how "big" the group is (how many markers it represents).
Finally, a question: which RGB values, dark to light, should I use to represent the second set of circular cluster groups (notice that the circles actually have a darker centre, with a lighter surround) in order to distinguish them from the others.
I want to have two visually different groups of clusters. I am capable of making each group a single colour, no matter how markers it contains. I am not capable of making the five levels of each both distinct and visually appealing.
Hmmm, maybe I want to use that outer circle and make it either green or red, irrespective of the centre colour? Also, the default uses up to five colours; maybe that ought to be just 5 shades of green, to compare with 5 shades of red? Note,: I am not married to green & red (the existing groups represent companies and the new one will represent unemployed people).
Also, 2 colours might enough, as the clusters show how many markers they contain. I can see how colours relating to size might help, but might they also confuse?