Spectrum

Pick, explore, and transform color.

A client-side color toolkit — sample colors from images, build gradients and palettes, check WCAG contrast, simulate color blindness, and learn color theory. Everything runs in your browser.

→ Try it at spectrum.punds.ch

---

Note

Spectrum is 100% client-side — no backend, database, or API. Images you drop in are processed entirely in the browser via the Canvas API and are never uploaded; your picked-color history stays in localStorage.

Table of contents

• Tools
• Tech stack
• Getting started
• Scripts
• Design system
• Project structure
• Deployment & CI/CD
• Author

Tools

Tool	What it does
🎯 Picker (/)	Drop or paste an image and sample exact colors pixel-by-pixel, with a saved color history
🧪 Generator (/color-generator)	Generate colors and harmonies to build from
🌈 Gradients (/gradient-maker)	Compose multi-stop gradients and copy the CSS
◐ Contrast (/contrast-checker)	Check foreground/background pairs against WCAG thresholds
👁 Vision (/color-blindness)	Simulate color-vision deficiencies (CVD) to test accessibility
📚 Browse (/browse)	Explore named colors, palettes, and trending/brand colors by category
🎨 Theory (/color-theory)	Color principles, harmonies, and emotional associations

Color conversion and math are handled by the framework-agnostic logic in src/lib/ (built on colord), kept cleanly separate from the React UI.

Tech stack

• Next.js 16 (App Router, Turbopack) + React 19
• TypeScript 5 (strict) — framework-agnostic color logic in src/lib/
• Tailwind CSS 4 with a centralized @theme design system
• colord for color conversion · lucide-react icons
• Vercel hosting
• No backend — everything is client-side

Package manager: Bun.

Getting started

Prerequisites: Bun 1.1.39+ (this repo pins 1.3.14 via .bun-version). Bun is the runtime and package manager.

# Clone
git clone https://github.com/dominikkoenitzer/Spectrum.git
cd Spectrum

# Install dependencies
bun install

# Start the dev server → http://localhost:3000
bun run dev

No configuration or API keys — Spectrum runs entirely in the browser.

Scripts

Command	Description
bun run dev	Dev server (Turbopack) on http://localhost:3000
bun run build	Production build — the canonical way to verify changes (runs tsc + prerenders every route)
bun run start	Serve the production build
bun run type-check	tsc --noEmit
bun run lint	ESLint (eslint-config-next)

There's no test framework. Verify changes with bun run build (it type-checks and statically prerenders every route). Note: bun run lint currently surfaces a few pre-existing lint findings that don't fail the build.

Design system

The visual identity is defined centrally in src/app/globals.css via Tailwind v4's @theme. The concept is a neutral gallery frame — the chrome is paper + ink, and the only saturated color on screen is the color you're working with. Semantic tokens (bg-paper, bg-surface, text-ink, border-line, …) drive everything; fonts are Hanken Grotesk (display/sans) and JetBrains Mono (color codes). Light theme only.

Project structure

src/
├── app/            # One folder per tool route (page.tsx = 'use client', SEO in sibling layout.tsx)
│                   # /, /browse, /color-generator, /gradient-maker,
│                   # /contrast-checker, /color-blindness, /color-theory, /privacy, /terms
├── components/     # ui/ primitives, color-picker/, layout/ (Header, Footer)
└── lib/            # Framework-agnostic color logic: colorUtils, contrastUtils,
                    # colorBlindness, gradientUtils, canvasUtils, colorData

Deployment & CI/CD

Spectrum is a static site deployed on Vercel (live at spectrum.punds.ch).

GitHub Actions:

• ci.yml — on every push and pull request to master: install, type-check, and build.
• deploy.yml — optional production deploy via the Vercel CLI, gated on the VERCEL_TOKEN, VERCEL_ORG_ID, and VERCEL_PROJECT_ID secrets; a no-op otherwise (Vercel's Git integration handles deploys by default).

Dependabot keeps Bun and GitHub Actions dependencies current weekly.

Author

Made by Dominik Könitzer · spectrum.punds.ch