Colormap Designer: Guided Sandbox

Draw a path through a perceptual color space, then have it graded on perceptual uniformity, grayscale safety, and colorblind accessibility. The space is CAM02‑UCS — the same one viscm and the makers of viridis used.

This is the open‑ended version: every view and every control is available from the start, with no set task. Use it to explore, to pull the standard colormaps apart, or to build something for a real figure. The graded two‑part activity is in Colormap Designer.html.

Sandbox · no set task

Your task

Click points into the color solid to drop colors, and they get joined into a path. Drag them around until you think the ramp underneath looks like a good colormap. Then hit Evaluate.

You get no help on this pass — no presets, no diagnostic views. Most people score somewhere in the 40s to 60s the first time. That is expected and it is the point: find out by feel what is hard about this before you are shown the instruments.

Everything is unlocked: the color solid in 3D, a hue & chroma slice through it at your selected point's lightness, and a lightness profile you can shape directly. Load a preset to start from — or to take apart and see why it scores the way it does.

Good things to try: load jet and evaluate it, then viridis, and compare the perceptual‑deltas plots. Switch the type to diverging and see how the rubric changes what it asks of you. Turn on arc‑length equalize and watch the deltas curve snap flat onto its reference line.

Export anything you like and use it on real data in the companion notebook, colormap_making.ipynb.

You are scored on five things, and they fight each other — that is the whole lesson:

30Perceptual uniformity
Equal steps in the data must look like equal steps in color, or your colormap invents structure that is not in the numbers. Scored mostly on the derivative of the perceptual‑deltas curve — the second derivative of perceived color along your path. A flat curve scores well; one that keeps changing slope is rough no matter what its average is.
10Perceptual range
The total of that same curve. A map that travels further through perceptual space can resolve more distinct levels; a washed‑out one cannot.
25Lightness behavior
Lightness should climb steadily (sequential) or form a clean symmetric tent (diverging). This is what makes it readable in grayscale and orderable by eye.
15Hue coverage — "hit all the colors"
What fraction of the hue circle your path actually visits. This is the constraint that keeps Part 2 a rainbow instead of letting you retreat to a safe two‑hue ramp.
25Colorblind accessibility
Values far apart in your data must stay far apart in color for the ~1 in 12 men with red–green color vision deficiency.
10Gamut & smoothness
Colors a screen cannot actually display get flattened, and kinked paths show up as banding.
The color solid — CAM02‑UCS (J′ a′ b′) drag the background to orbit
Click empty space to add a point. Drag a point and it follows your cursor, moving in the plane you are currently looking at — so orbit first, then drag to control which direction you are moving in. Hold Shift while dragging (or scroll over a point) to change lightness J′ only.
Your points split the colormap into equal shares. With 5 points, the path from point 1 to 2 covers the first quarter of your data range, 2 to 3 the next quarter, and so on — however far apart they are in color. So two points placed close together spend a big slice of your data on almost no color change, and two placed far apart cram a huge color jump into a small slice. Getting the spacing right is most of what perceptual uniformity is asking of you.
Hue & chroma slice (a′b′) J′ = 50
Click to add a point, drag to move. Gray = no such color exists on a screen at this lightness.
Lightness profile (J′) drag points up / down
 
For a sequential map this line should climb steadily and never turn back — that is what makes it survive a black‑and‑white printout. Keyboard: Tab next point, arrows nudge hue/chroma, PgUp/PgDn lightness, Delete removes.

Live preview