Chroma
An internal colour-system tool that collapsed a 5–6-tool workflow into one surface — and cut colour work from 3.1 to 1.0 hours per project (−68%), used on every SVP project since launch — the first three
- Problem — At SVP my colour work was scattered across 5–6 disconnected tools and cost 3.1 hours per project
- Insight — The pain wasn’t missing tools but the seams between them — one opinionated surface mapped to my real workflow
- Solution — I solo-built Chroma end-to-end (research, design, React/TS frontend, FastAPI backend, DevOps): image + live-site extraction, WCAG matrix, OKLCh scales, 8 export formats, 25 days
- Outcome — Colour work down to 1.0 hr/project (−68%), 6 tools → 1, used on 100% of projects, €0 hosting — tiny n=3 read, full review at 3 months
One surface for the whole colour pipeline
Colour decisions start almost every SVP project — client decks, brand audits, internal AI-product UI, marketing. The work behind them lived across 5–6 browser tabs: an eyedropper, an image extractor, a contrast checker, an exporter that never matched the format my colleagues needed. Chroma collapses that into a single surface.
chroma.ontwrpn.com — after a full pass on visual design, UX/UI, responsive layout, WCAG 2.2 AA and security
The seams between tools
A typical engagement: gather references, extract palettes, test WCAG contrast, build 50–950 tonal scales, hand off in the format the consumer actually uses. Each step lived in a different tool — Coolors, Adobe Color, contrast checkers, Figma plugins — and the outputs never lined up. Accessibility got checked too late. Baseline: 3.1 hours of colour busywork per project, audited across 12 shipped projects.
The pain isn’t the absence of tooling — it’s the seams between tools
Validate first, then build in 25 days
Discovery before code: a self-audit of 12 shipped projects (3.1 h average), 20-minute interviews with the CEO / AI engineer / junior, and structured walk-throughs of 8 competing tools. A second-order cost surfaced — teammates were re-deriving my palettes because the handoff format didn’t fit their tools. I then built solo through gated phases — internal alpha → internal beta → production — so the launch landed already proven on real work.
Results: palette by true pixel proportion, donut, harmony, tonal shades and token export
Extract → balance → check → export
One web tool covering the whole lifecycle: image and live-site extraction (true pixel proportions, not generated samples), a live WCAG matrix with colour-blindness simulation, OKLCh tonal scales, and eight export formats including W3C design tokens. Built on Vite + React + TypeScript + Tailwind over FastAPI / Python.
Live — paste an image or a site URL and try it
Desktop
Mobile
Shipped, adopted, measured
First two weeks (a small early sample, n = 3, against a 12-project baseline): colour-work time 3.1 h → 1.0 h (−68%), tools per job 6 → 1, used on 100% of projects, €0 hosting. The first post-launch client deck closed with zero colour revisions; the W3C tokens dropped straight into the developer’s Tailwind config. Honest read — a tiny early sample; the full impact review lands at three months. The one known friction: website extraction (vs. image upload) takes 10–12 s with no visible progress indicator — a loading state is on the backlog.
