A palette picker for figures, built on the xkcd color survey. Pick named colors off a wheel, then check the set under simulated color blindness and in grayscale before it goes into a figure.

Why xkcd Colors

The survey put names to 949 colors, from "cloudy blue" onward. Matplotlib ships them, so xkcd:dusty rose works in any plot. A name is easier to remember and share than a hex code.

Picking a set of names that works together in a figure is the hard part. That's what the page is for.

The Wheel

Colors sit on a wheel in OKLCH, the lightness, chroma and hue form of the OKLab color space, with hue as the angle and lightness as the radius. Lighter colors sit nearer the center. Colors on the same ring look about equally light. Near-grays have no clear hue, so they get their own strip.

Search by name, or paste any hex code to find the nearest named colors. Filters narrow the wheel by lightness and by minimum chroma.

The Palette

Add colors by hand, or let auto-fill pick the most distinct ones. Auto-fill is a greedy max-min search: each pick is the color whose closest pair, against the palette so far and the figure background, is furthest apart. Pairs are scored in normal vision, with a penalty for every simulated view in which the pair gets close.

Max-min search drifts toward the extremes, so auto-fill skips grays and colors that read as black or white.

The Checks

The palette is previewed as line, bar and scatter charts on your figure background, in five views:

  • normal vision,
  • protanopia,
  • deuteranopia,
  • tritanopia, and
  • grayscale.

The color-blindness views use the Machado, Oliveira and Fernandes (2009) matrices at full severity. Pairs closer than 0.07 in OKLab are flagged as too close to tell apart, and pairs below 0.11 as close.

For ordered data, lightness should rise or fall steadily from the first color to the last, so that the order survives in grayscale. The page flags palettes where lightness goes up and down. "Sort by lightness" fixes them.

Export

The palette exports as a list of matplotlib names, a matplotlib cycler, a seaborn palette, ggplot2 scales, a plotly colorway, plain hex or CSS custom properties. The URL holds the selection, palette and background. A link reproduces the page.

A small build script in standard-library Python inlines the data, CSS and JavaScript into one HTML file. The page makes no external requests.