CLI Reference

The @sveltopia/colors CLI generates palettes from the command line or interactively. Run it with npx — no install needed.

generate

Generates a complete color palette from your brand colors. Run without flags for interactive mode, or pass flags for scripted usage:

bash

# Interactive — prompts for colors, format, and output directory
npx @sveltopia/colors generate

# Flag-based — for scripts and CI
npx @sveltopia/colors generate --colors "#FF4F00,#1A1A1A" --format tailwind,shadcn

Flags

Flag	Alias	Description	Default
`--colors`	`-c`	Comma-separated hex colors (up to 7)	interactive
`--format`	`-f`	Output formats: `css`, `json`, `tailwind`, `tailwind-v3`, `radix`, `panda`, `shadcn`, `all`	`css,json`
`--output`	`-o`	Output directory	`./colors`
`--config`		Path to config file	`colors.config.json`
`--prefix`	`-p`	CSS variable prefix (e.g., `my-` for `--my-red-9`)	none
`--verbose`	`-v`	Show tuning profile, anchors, and custom rows	`false`
`--dry-run`		Preview output without writing files	`false`

Generated files

Depending on the formats you choose, the CLI writes these files to your output directory:

Format	File	Description
`css`	`colors.css`	CSS custom properties for all scales
`json`	`colors.json`	Structured JSON with hex, OKLCH, and P3 formats
`tailwind`	`tailwind.css`	Tailwind v4 CSS with `@theme` block (50–950 scale)
`tailwind-v3`	`tailwind.preset.js`	Tailwind v3 JS preset (50–950 scale)
`shadcn`	`shadcn-colors.css`	shadcn/ui compatible CSS variables
`radix`	`radix-colors.js`	Radix Colors compatible JS export
`panda`	`panda.preset.ts`	Panda CSS preset

Config file

Instead of passing flags every time, create a colors.config.json in your project root:

colors.config.json

{
  "brandColors": ["#FF4F00", "#1A1A1A"],
  "outputDir": "./colors",
  "formats": ["css", "json", "tailwind"],
  "prefix": ""
}

Then run npx @sveltopia/colors generate with no flags — the CLI reads the config automatically.

dev

Starts an interactive dev server where you can preview and tweak your palette in real time.

bash

npx @sveltopia/colors dev

# Or with brand colors pre-loaded
npx @sveltopia/colors dev --colors "#FF4F00"

Flags

Flag	Alias	Description	Default
`--colors`	`-c`	Comma-separated hex colors	interactive
`--config`		Path to config file	`colors.config.json`
`--port`	`-p`	Dev server port	`3000`
`--no-open`		Don't auto-open browser	`false`

Interactive vs flag-based

The CLI supports two workflows:

Flag-based (CI/scripts)

Pass all options as flags for reproducible, scriptable generation:

bash

npx @sveltopia/colors generate -c "#FF4F00,#2563EB" -f tailwind,shadcn -o ./src/colors

Interactive (first-time setup)

Run without flags and the CLI prompts you through each decision:

bash

npx @sveltopia/colors generate

? Enter your brand colors (hex, comma-separated):
> #FF4F00, #1A1A1A

? Select output formats:
> css, json, tailwind

? Output directory:
> ./colors

Tip: Use --dry-run with flag-based mode to preview what files will be generated before writing anything to disk.