Chart Color System MCP server

Chart Color & Encoding System

By Micah Boswell (socraticstatic). Copyright © 2026 Micah Boswell. All rights reserved.

A token-driven, math-backed palette system for ECharts dashboards. Generates categorical, sequential, and diverging palettes, and pairs every color slot with a matching dash, decal, and marker shape so meaning survives even when color fails. Categorical palettes are audited pairwise against WCAG contrast, color-vision deficiency (CVD) simulation, and grayscale. Sequential and diverging ramps are audited for background contrast and built for monotonic OKLab lightness (their grayscale-survival property); pairwise ΔE separation is intentionally not applied to ramps, whose stops are designed to be perceptually adjacent. Honesty note: past ~6 hues, no palette keeps colors reliably distinct under dichromacy — the configured CVD/ΔE floors in constraints.ts are deliberately minimal at high N, and the redundant dash/decal/shape encodings are what carry series identity.

Current version: 0.7.0 (PALETTE_VERSION in src/charts/version.ts; history in CHANGELOG.md).

Jobs To Be Done

Primary

• JTBD-1 — Pick a palette I can defend (contrast + CVD + grayscale audited).
• JTBD-2 — Charts stay readable for colorblind users (color + dash + decal + shape).
• JTBD-3 — Same entity stays the same color everywhere.
• JTBD-4 — Doesn't break when series count changes (graceful Top-N + Other).
• JTBD-5 — Light and dark mode equally good.
• JTBD-6 — Right chart-type encoding chosen automatically.
• JTBD-7 — Prove it works before shipping (live QA harness).

Secondary

• JTBD-8 — Per-user color pin (localStorage, scoped by entity ID).
• JTBD-9 — Brand-locked anchor slots seed the optimizer.
• JTBD-10 — Surface infeasibility with documented relaxation order.
• JTBD-11 — Instant theme switch (precomputed cache).
• JTBD-12 — Stay maintainable (no raw color literals; versioned palette; docs always current).

Out of scope (named, not built): multi-tenant solving, SSR/PDF export, telemetry, task-based usability study.

Architecture

index.css tokens (HSL)
         │
         ▼
  constraints.ts  ──────┐
  brand/semantic locks ─┤
  background + chrome  ─┼──►  optimizer (OKLab + CVD + gamut)
  N + posture          ─┤              │
  reserved slots       ─┘              ▼
                                ordered slot list
                                (color, dash, decal, shape)
                                       │
                                       ▼
                          echartsTheme.ts adapter
                                       │
                                       ▼
                          ECharts components (demo)
                                       │
                                       ▼
                          QA harness (CVD / grayscale / contrast)

Deliverables

Tiers

Tier 1 — Tokens & constraints

Semantic chart tokens in index.css (HSL, light + dark): surfaces, neutrals, status, anchors, states. Tailwind chart color group exposes them. constraints.ts defines ΔE thresholds, posture presets (kpi, comparative, exploratory), Top-N + Other overflow, and constraint-relaxation priority.

Shortened. The full README is on GitHub.