Map Marker Palette — 16 colors, dual-mode, CVD-aware

Map marker palette — 16 colors, light & dark basemaps

Each of the 16 hue families has a light-mode value (tuned for a light-gray basemap) and a dark-mode value (tuned for dark gray). Every color clears 3:1 contrast against its basemap for sunlight legibility, and pairwise separation was optimized under simulated protanopia and deuteranopia (Machado 2009, severity 1.0).

Basemap
Vision
Sunlight

Toggle the vision and sunlight simulations above. Pins 4 / 9, 2 / 13 and 3 / 10 are placed side-by-side on purpose — they are the closest pairs under red–green color-vision deficiency.

Swatches

Click a hex to copy. Slot order matters: if a screen shows fewer categories, assign colors in this order — earlier slots are the most separable.

How safe is it, measured

Worst-case pairwise difference (ΔE in OKLab×100 — higher is better; ≥8 is comfortably distinct, 6–8 distinct with a secondary cue) across all pairs on screen at once:

Categories shownLight — CVD / normalDark — CVD / normal
First 314.4 / 28.48.6 / 29.2
First 85.0 / 10.16.6 / 14.4
First 125.0 / 8.96.2 / 10.8
All 165.0 / 8.95.5 / 10.6

No 16-color set can be fully color-safe: red–green deficiency collapses the hue wheel onto roughly lightness plus a blue–yellow axis, which caps how many colors stay apart (an unconstrained optimizer tops out near ΔE 6 for 16 colors — and produces mostly unnameable purples). This set holds the worst pair at ΔE ≈ 5.0–5.5 while keeping every color nameable, so at high category counts color must be paired with a second cue.

Usage rules that make it work outdoors

1 · Always case your markers. A 2–2.5 px white casing in light mode (near-black in dark mode) around every pin, and a basemap-colored casing under route lines. Edge contrast is what survives glare — it matters more than the fill color itself.

2 · Mid-tones only, by design. Every value clears 3:1 against its basemap. That is why light mode has no pastels or bright yellow (they wash out on light gray in sunlight) and dark mode has no deep navy or maroon. Yellow becomes amber in light mode; that is the physics of contrast, not a styling choice.

3 · Add a second cue beyond ~8 categories. With more than eight categories visible at once, differentiate with icon glyphs, marker shapes, or labels as well as color — this also rescues the tritan case, which no red–green-optimized set covers. Your "points and shapes" model is ideal: give each category a shape and a color, not just a color.

4 · Keep hue families fixed across modes. Slot 1 is "the blue layer" in both modes, so users switching between day and night keep their mental map. Never re-assign surviving colors when a filter changes the category count.

5 · Minimum sizes. Color identity needs area: keep dots ≥18 px (with casing), lines ≥3 px, and zone fills at 18–25% opacity with a solid 2 px stroke of the same color.

Design tokens — CSS


  

Design tokens — JSON


Copied