Give Tonex one color and it returns a complete, accessible color system built around it. You can run it two ways — a one-line command or the web app — and export to whatever your project speaks: shadcn theme, DESIGN.md block, Tailwind, CSS, Material Theme JSON, or Dart.
From the CLI
generate derives a theme from a seed and prints it. No install, no config, no account — just npx:
npx @tonex-dev/cli generate --seed "#6A9CFF"The same seed and flags produce the same output every time — no agent, no network call. Change the palette's character without touching the seed by adding knobs:
npx @tonex-dev/cli generate --seed "#6A9CFF" --variant expressive --desaturate 0.5Pick your output with --to. See Commands for the full flag list and Targets & formats for every target.
Shadcn
The default target. Writes a paste-ready :root/.dark block — both light and dark modes — straight to your stylesheet:
npx @tonex-dev/cli generate --seed "#6A9CFF" > globals.cssPaste it into a shadcn (Tailwind) project and the theme is live.
DESIGN.md
A single-mode DESIGN.md colors: block — the semantic contract an agent maps into any tool that isn't shadcn:
npx @tonex-dev/cli generate --seed "#6A9CFF" --to yaml --mode darkMaterial Theme JSON
A Material Theme export, with colors encoded as hex:
npx @tonex-dev/cli generate --seed "#6A9CFF" --to json --format hexFrom the web app
Open the editor:
Type a hex value, paste OKLCH or adjust HCT slider, or drop an image to pull its main color.
Adjust the variant, contrast, and surfaces while previewing on real components.
Export with E, pick your format, and copy the tokens out
What you see in the preview is exactly what you paste — readability is checked as you build, not bolted on at the end. The web app and the CLI share one engine, so a seed produces the same system in either.