Colour system generator: one hex, four output formats

Designers re-derive the same colour scale from a brand hex on every new project. The arithmetic is mechanical — Tailwind has it, Material has it, every design system has it — but the surface area to copy between them is annoying. So we built a single-file tool that runs the maths once and dumps every format you'd reasonably hand to a developer.

What it gives you

• 11-step scale (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) — anchored to perceptually-even lightness targets

• Semantic tokens — success, warning, danger, info — derived from configurable hue rotations around your brand

• Dark-mode pairing — automatic surface/foreground mapping that flips at prefers-color-scheme

• Four output formats: CSS custom properties, Tailwind config, SCSS variables, Figma Tokens Studio JSON

How it works

The scale lives in HSL space. Lightness is anchored to a hand-picked ladder (97, 93, 86, 76, 64, 50, 42, 34, 26, 17, 10) that reads evenly across all hues — pulled from a few thousand hours of looking at brand systems and adjusting until orange, purple, blue, green and red all felt the same at step 500.

Saturation drops slightly at the extremes. The lightest tints stay readable as paper, the darkest shades stop short of fluorescent. Without that decay, a saturated orange at step 950 looks like a traffic cone in shadow rather than a brand colour at its lowest reading.

Semantic tokens are derived by rotating the brand hue. Default spread is 120° — far enough that success and danger feel distinct, near enough that they still feel like one family. Warning sits 45° off the brand. Info sits opposite to success. All four respect the brand's saturation envelope.

Why we built it

We kept opening a fresh Figma file, dragging in Tailwind's slate scale, retinting it, exporting, pasting into a developer's repo, watching it look wrong in the design system, going back to Figma. The loop was costing two hours per project. This tool runs the loop in three seconds — and dumps four formats at once so nobody asks "do you have it in Figma tokens?"

Use it

It's a single HTML file. Open it locally or use the live version. Paste in your brand hex, name your CSS prefix, click any swatch to copy its hex, copy the formatted output, paste into your stack. Open on GitHub →

Caveats

Perceptual lightness in HSL is approximate. For brands that depend on near-mathematical colour-blindness contrast (financial dashboards, accessibility-first interfaces), use APCA or CIELAB tooling on top of this output. The scale here is a starting point that's almost always better than what you'd build manually in twenty minutes — but it's not a substitute for an accessibility audit at WCAG AAA.