Generate accessible color palettes from your brand

Provide your brand colors, get 31 complete tint scales tuned to your identity. Radix-compatible output for Tailwind, shadcn/ui, Panda CSS, or CSS variables.

Try the Playground Quick Start

Generate your palette:

npx @sveltopia/colors generate

Your Project Colors Should Look Like You

Input:

#43A047

#FF6A00

#1A1A1A

Output: 31 tuned scales (3 anchored to your brand + 28 baseline hues)

grass (Primary)

orange (Accent)

gray (Neutral)

#43A047 grass-800

#FF6A00 orange-800

#1A1A1A gray-950

Plus 28 more hues, all tuned to your brand

Built for Modern Design Systems

31 Hue Scales

Full Radix Colors compatibility. Your brand colors anchor key scales, baseline colors fill the gaps.

Auto Dark Mode

Light and dark variants generated automatically with perceptually uniform transitions.

APCA Contrast

Modern contrast algorithm ensures text readability across all generated scales.

P3 Wide Gamut

OKLCH color space with Display P3 support for vivid colors on modern screens.

Multiple Formats

Output as CSS variables, Tailwind preset, or JSON. Works with any framework.

Dev Server

Interactive UI for exploring and adjusting your palette before committing.

Simple CLI, Production-Ready CSS

Generate your palette

terminal

npx @sveltopia/colors generate \
  --colors "#FF6A00,#43A047,#1A1A1A" \
  --format css \
  --output src/lib/colors

# ✓ Analyzed 3 brand colors
# ✓ Generated 31 scales (light + dark)
# ✓ Wrote src/lib/colors/colors.css

Drop the CSS into your project

colors.css

:root {
  --orange-1: #fff8f3;
  --orange-2: #ffefdc;
  --orange-3: #ffe5c9;
  /* ... 12-step scale */
  --orange-9: #FF6A00;  /* Your brand color */
  --orange-10: #ed5f00;
  --orange-11: #c44d00;
  --orange-12: #4e1c00;
}

.dark {
  --orange-1: #1f1206;
  --orange-9: #ff6a00;
  /* Auto-generated dark mode */
}

How It Works

Input your brand colors

1-7 hex colors that define your brand identity.

Algorithm finds best matches

Each brand color anchors a Radix scale at the perceptually closest hue. If no close match exists, a custom scale is generated.

Full scales generated

12-step tint scales for each hue, tuned to your brand color profiles, light/dark modes, plus semantic tokens.

Export and use

Drop the output into your project. Compatible with Tailwind, Panda CSS, shadcn/ui, and more.

One command yields a complete palette

npx @sveltopia/colors generate

Or use the dev server to experiment

npx @sveltopia/colors dev

Try the Playground Read the Docs