One job per colorOne job per color

Four data types, four palettes

Pick a dataset, then a palette. Tap cells to read them.

const JOB = {
  identity:  "categorical", // fixed slots, max 3 in a grid
  magnitude: "sequential",  // one hue, light → dark
  polarity:  "diverging",   // two poles, gray zero
  state:     "status",      // reserved hues + icon
};

Diverging: gray at zero

Change midpoint, poles and steps; watch the near-zero cells.

:root              { --mid: #f0efec; --pos: #2a78d6; --neg: #e34948; }
:root[data-theme="dark"] { --mid: #383835; --pos: #3987e5; --neg: #e66767; }

function diverging(v, max = 40, n = 3) {
  const s = Math.sign(v) * Math.min(n, Math.round((Math.abs(v) / max) * n));
  if (s === 0) return "var(--mid)";
  const pole = s > 0 ? "var(--pos)" : "var(--neg)";
  return `color-mix(in oklab, ${pole} ${(Math.abs(s) / n) * 100}%, var(--mid))`;
}

Rainbow vs one hue

Which marked cell is larger? Answer in both panes.

:root {
  --seq-100: #cde2fb; --seq-150: #b7d3f6; --seq-200: #9ec5f4; --seq-250: #86b6ef;
  --seq-300: #6da7ec; --seq-350: #5598e7; --seq-400: #3987e5; --seq-450: #2a78d6;
  --seq-500: #256abf; --seq-550: #1c5cab; --seq-600: #184f95; --seq-650: #104281;
  --seq-700: #0d366b;
}

Why it matters, pros and cons