SeedColor

Open-source color system generator for design tokens.

SeedColor helps you go from a single base color to a complete, export-ready palette with accessibility checks, live component previews, and shareable URL state.

Features

• Base color input (text + picker + random)
• Auto-generated 11-step scale: 50,100,200,300,400,500,600,700,800,900,950
• Shade lock to anchor base color on any step
• Shade cards with HEX, RGB, HSL, OKLCH
• One-click copy per shade
• Naming presets + custom token naming pattern
• Export formats:
  • CSS
  • Tailwind v3
  • Tailwind v4
  • SCSS
  • JSON
• Export value modes:
  • HEX
  • RGB
  • HSL
  • OKLCH
• Export token packs:
  • Minimal (lean semantic set)
  • Complete (component/state-ready contract)
• Accessibility:
  • WCAG / APCA toggle
  • per-shade contrast badges
  • full contrast grid
  • best pair suggestions
• Live component previews (Cards, Dashboard, Auth, Marketing)
• Share URL state
• Local persistence
• Dark / Light mode
• Responsive layout with mobile controls drawer

Tech Stack

• React + TypeScript + Vite
• Tailwind CSS
• Zustand
• Culori
• react-colorful
• lucide-react

Getting Started

1) Install

npm install

2) Run dev server

npm run dev

3) Build

npm run build

4) Preview production build

npm run preview

Project Structure

src/
  components/
    ColorInput/
    ContrastGrid/
    ExportPanel/
    LivePreview/
    PalettePreview/
    UI/
  lib/
    colorEngine.ts
    exporters.ts
    storage.ts
    urlState.ts
  store/
    paletteStore.ts
  types/
    index.ts
  App.tsx

How It Helps

• Designers: explore harmonious palettes quickly
• Developers: get implementation-ready tokens immediately
• Teams: validate readability early (WCAG + APCA)
• Collaboration: share exact state via URL

Token Contract Spec

SeedColor exports tokens in layers:

1. Primitive layer

• --color-{name}-50 ... --color-{name}-950

2. Semantic layer

• --color-primary, --color-primary-hover, --color-primary-active
• --color-secondary, --color-secondary-hover
• --color-bg, --color-surface, --color-border
• --color-text, --color-text-muted
• --color-success, --color-warning, --color-error
• plus dark-mode overrides

3. Component/state layer (Complete pack)

• button tokens (button-primary-*, button-secondary-*, button-disabled-*)
• input tokens (input-*, focus/ring tokens)
• card, alert, badge tokens
• modal/nav/tooltip tokens
• property aliases (background-color-*, text-color-*, border-color-*, ring/outline-*)

Use Minimal for compact output and Complete for application-wide drop-in usage.

Keyboard Shortcut

• Ctrl/Cmd + E opens Export modal

Current Status

Phase 1 + major Phase 2 scope is implemented.

Roadmap

• Multi-palette workspace (primary, secondary, neutral, accent)
• Advanced APCA guidance by text context
• W3C/Tokens Studio-oriented export options
• Saved palette library management

License

MIT