Colors v0.1.0

Quick Start

1. Generate your palette

Run the generator with npx — no install needed. The CLI will walk you through choosing your brand colors, output formats, and directory:

bash

npx @sveltopia/colors generate

Or pass everything as flags for a one-liner (up to 7 hex colors):

bash

npx @sveltopia/colors generate --colors "#FF6A00,#43A047" --format tailwind,shadcn

This generates a full palette in ./colors/ with CSS and JSON by default. Add --format to generate framework-specific files. See the CLI Reference for all flags.

Want to add it to your project? Install as a dev dependency with npm install -D @sveltopia/colors to pin a version and make it available to your team. The npx commands above still work — they'll use the local install instead of downloading each time.

2. Use your colors

Import the generated CSS into your project's main stylesheet:

css

/* Your main stylesheet (e.g., app.css, globals.css) */
@import './colors/colors.css';

Using Tailwind or shadcn? The Frameworks guide covers how to import your generated palette so it cleanly replaces the default framework colors.

Then use the colors as CSS custom properties or Tailwind classes:

html

<!-- CSS custom properties (from colors.css) -->
<div style="background-color: var(--orange-3); color: var(--orange-11);">
  Brand surface with accessible text
</div>

<!-- Tailwind classes (from --format tailwind) -->
<div class="bg-orange-200 text-orange-900">
  Brand surface with accessible text
</div>