Choosing a colour palette for an interactive map (without it turning into a dashboard)

The colour palette is the single decision on a map that nobody notices when it’s right and everybody notices when it’s wrong. It doesn’t take long to drift somewhere wrong: a map starts with three clean colours, somebody adds a fourth that almost matches one of the first three, and within a month the legend has nine entries that nobody can keep straight. The fix isn’t artistic talent — it’s a small set of rules applied early.

What follows is the palette discipline we use across hundreds of maps. None of it is novel; all of it pays off in week three.

Five colours. That is your whole budget.

Pick five — six if you absolutely must — and then refuse to add a seventh. The reason isn’t aesthetic, it’s perceptual: human colour vision is excellent at distinguishing five categories at a glance and terrible at distinguishing nine. By the time your viewer has to consult the legend twice in the same session, the colour system has stopped doing its job and is now actively in the way.

When the urge to add a sixth colour shows up, the right move is almost always to merge two existing categories. The second-best move is to take an existing colour and split it into two patterns — solid and striped, say — that share the hue. Patterns are nearly free; new hues are very expensive.

Pick colours that survive every basemap

Your map will be viewed on a satellite basemap, a light vector basemap, and a dark terrain basemap. Pure red gets washed out by warm satellite imagery. Pure blue blends into water and dark mode. Pale yellow vanishes on a light basemap. The colours that survive all three are slightly desaturated, slightly bright, and have visible contrast at 35–40% opacity — which is roughly where a region fill ends up.

A practical test: before you commit to a palette, switch the basemap three times and look at every colour on each one. If a colour disappears on any single basemap, swap it out. Do this once, on day one, and you save yourself a lot of post-launch repainting.

Plan for the 8% of viewers with colour-vision deficiency

Roughly 8% of men and 0.5% of women have some form of colour-vision deficiency. The most common kind makes red and green hard to distinguish, which matters because “red versus green” is the cheapest temptation when designing a two-state map (good vs bad, owned vs hostile). Avoid it.

Three rules of thumb that turn most palettes accessible without looking institutional:

• Never rely on red versus green alone. Pair colour with shape, pattern, or position so the meaning survives a colour-blind view.
• Use blue and orange instead of red and green. They read as opposites for almost everyone, including people with the most common deficiencies.
• Run the map through a simulator once. Most design tools have one built in; many browser extensions add it on top of the live page. Spend ten minutes doing it. You’ll find one ambiguous pair per project, almost always.

One colour, one meaning

The biggest source of palette drift isn’t adding new colours — it’s reusing an existing colour for two different meanings. Yellow first means “contested”, then somebody uses yellow for “event location” on a different layer, and now yellow means two unrelated things depending on which corner of the map you’re looking at.

The fix is to write down, somewhere durable, what each colour means. Three lines. “Red = owned. Yellow = contested. Blue = neutral.” New regions inherit a colour from this list; new colours don’t exist.

Pick fill opacity once and stick with it

One of the silent killers of map legibility is mixed opacity: some regions at 30%, some at 60%, some at 80% “just for emphasis”. The viewer’s eye starts treating opacity as a variable, even when you didn’t mean it to. Pick one number for the whole map (we like 35–40%) and only deviate when the deviation is itself meaningful — say, a striped “contested” overlay intentionally sitting on top of a solid base region.

Borders carry information; line weight is a colour

A region border is a second layer of colour you didn’t realise you were picking. A thin border (1px) is invisible at phone zoom levels. A thick border (4px+) overpowers the fill at city zoom levels. The right answer depends on what your viewers actually do — if 80% of your traffic is mobile, you need thicker borders than the desktop view would suggest.

The cheapest fix is to use a border colour slightly darker than the fill, set the weight to 2–3px, and then test on a real phone. The border-fill pair becomes a single visual unit; the eye reads it as one region instead of fighting to find the edge.

Dark backgrounds eat saturation; compensate

On a dark basemap, every colour reads slightly muddier than it does on a light one. The fix isn’t to pick brighter base colours everywhere — it’s to bump fill opacity by 10 points and use slightly more saturated borders only when the basemap is dark. Most map platforms (including Turf-map.io) let you ship one palette and have it adapt; if yours doesn’t, ship the brighter dark-mode variants explicitly.

The legend is part of the design, not a footnote

A legend that the viewer has to scroll to find won’t get used. Put it on the map, top-left or bottom-right, sized so the swatches and labels are readable on a phone without zoom. If your legend has more than five entries, you’re probably back at the “merge two categories” conversation from earlier.

A simple test: cover the legend with your hand and look at the map cold. Can you guess what each colour means from context? If yes, the palette is doing the work and the legend is a cross-check. If no, either the meanings aren’t intuitive or there are too many of them. Either way, the answer is fewer colours, not more.

The palette test: would a stranger remember it?

The end-state of a good palette is that a returning visitor remembers which colour means what without re-reading the legend. They land on the map, glance at the regions, and immediately know what’s going on. That recall is what you’re actually designing for — not aesthetic novelty.

Five colours, each with one meaning, each surviving every basemap, each accessible to colour-blind viewers, paired with a single fill opacity and a consistent border. Six rules, ten minutes, and the map is still legible a year from now.