Color Tool

A professional color palette and design token editor built with SvelteKit and shadcn-svelte.

Edit colors in HEX, RGB, HSL, HSV, and OKLCH. Generate perceptually uniform scales, control lightness, chroma, and hue curves independently, and export to CSS custom properties or JSON design tokens - all in the browser, no backend required.

Features

• Multi-project workspace - organize palettes in separate projects
• OKLCH-based editing - perceptually uniform color space for smooth gradients
• Curve editor - independent bezier controls for lightness, chroma, and hue axes
• Per-channel interpolation - lock individual L/C/H channels during interpolation
• Design system presets - import from Tailwind, Material 3, Radix UI, or Open Color
• Multiple export formats - CSS custom properties, JSON tokens (hex, oklch, hsl, rgba)
• Backup and restore - full project backup with merge or replace
• WCAG contrast check - AA/AAA level display for every swatch against black and white
• Gamut warnings - out-of-sRGB indicators with one-click gamut mapping
• Undo/Redo - full history with up to 50 steps
• Dark mode - system preference detection with manual override
• Keyboard shortcuts - Cmd+Z/Cmd+Shift+Z for undo/redo, Escape to deselect

Tech Stack

• SvelteKit with Svelte 5 runes
• shadcn-svelte for UI components
• Tailwind CSS v4
• @texel/color for OKLCH conversions and gamut mapping
• Vitest for unit tests

Getting Started

# install dependencies
pnpm install

# start development server
pnpm dev

Commands

pnpm dev          # start dev server
pnpm build        # production build
pnpm preview      # preview production build
pnpm check        # svelte-check (TypeScript + Svelte)
pnpm test         # run tests in watch mode
pnpm test:run     # run tests once
pnpm lint         # check formatting and linting
pnpm format       # auto-format with Prettier

Project Structure

src/
  lib/
    color/          # pure color math (parse, convert, interpolate, gamut, contrast, curve)
    palette/        # data model types
    io/             # importers and exporters
    stores/         # Svelte 5 reactive state (palette, theme)
    data/           # design system presets (Tailwind, Material 3, Radix, Open Color)
    components/
      app/          # domain-specific UI components
      ui/           # shadcn-svelte base components
  routes/           # SvelteKit pages
tests/
  unit/color/       # unit tests for all color math modules

Architecture

All color math lives in src/lib/color/ as pure TypeScript functions with no Svelte dependency. The central store (palette.svelte.ts) manages state via a commit() pattern that snapshots history before every mutation. UI components read from the store and delegate all mutations back through it.

OKLCH is the internal canonical format. Input in any format is converted to OKLCH on import. Output is converted from OKLCH to the requested format on export.

License

MIT - see LICENSE