Colour system generator.

Drop in a brand hex. Get an 11-step scale, semantic tokens, dark-mode pairing, CSS custom properties, Tailwind config and Figma tokens — all derived from one colour. Open on GitHub →

Brand colour

Hex value

Name (CSS var prefix)

Hue spread (semantic)

Primary scale 11 STEPS

Semantic tokens DERIVED

The quick brown fox jumps over the lazy dog.

Live preview using --brand-500 for accents and --brand-50 / -950 for surfaces.

Colour system generator.

Primary scale 11 STEPS

Semantic tokens DERIVED

The quick brown fox jumps over the lazy dog.

CSS custom properties

Tailwind config

SCSS variables

Figma Tokens Studio JSON

Colour system generator.

Primary scale 11 STEPS

Semantic tokens DERIVED

The quick brown fox jumps over the lazy dog.

CSS custom properties Copy

Tailwind config Copy

SCSS variables Copy

Figma Tokens Studio JSON Copy

CSS custom properties

Tailwind config

SCSS variables

Figma Tokens Studio JSON