Colour scheme for two distinct sets of 5 items on a map

Question

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?

Answer 1

I think there are two possibilities: the theoretical and the perceptual

Theoretical

Following the color theory, the selection made for the base group is created following one of the halves of the color wheel (A in the image below). Consequently, the following group should be made based on the second half (B in the graph):

Making two different color groups using only hue variables causes poor contrast and a big visual confusion.

Perceptual

Considering visual perception, contrast is the most relevant point to consider. From the three variables of color, hue, brightness and saturation, the base scheme follows the first of these, hue, so I would investigate in depth the possibilities of the other two: brightness and saturation. In my personal opinion, the option that offers the highest contrast is the one that totally nullify the hue, the grayscale. Within the grays there are many possibilities, (Google images: "cool and warm gray shades")