A local-first, open-source color studio. OPEN Palette — part of the Kovina ecosystem.
A palette machine for designers and developers. Generate harmonies, edit channels, extract from images, preview surfaces, validate accessibility, and export tokens — all in your browser.
Brand accent: #ff66c4 · Dark & light mode · Zero tracking
Version: v1.0.0 · palette.kovina.org
Quick Links · Features · Screenshots · Quick Start · Architecture · Performance · Tech Stack · Roadmap · License
- Live demo
- Architecture
- Branding
- Design System
- Product Spec
- Performance Notes
- Testing
- Roadmap
- Changelog
- Contributing
OpenPalette is a practical color platform for designers, developers, and builders who want fast palette exploration without accounts, tracking, or cloud dependency.
The app is intentionally local-first. Palettes, collections, history, imports, exports, gradients, and image extraction run in the browser and persist with localStorage.
It is also intentionally original. OpenPalette does not copy Coolors branding, assets, product language, or visual identity.
OpenPalette uses the OPEN + Palette lockup — part of the Open Product Family within the Kovina ecosystem.
- OPEN is typography only — no icon, no symbol, no badge.
- The application icon belongs exclusively to OpenPalette (the product).
- Branding follows the Kovina Brand Guidelines and Open Product Family Brand Guidelines.
- See docs/BRANDING.md for product-specific branding documentation.
| Feature | Status |
|---|---|
| Shared global workspace — all tools use one palette | Shipped |
| 2-10 color palette generator | Shipped |
| Harmony modes: analogous, monochromatic, complementary, triadic, split, tetradic, random | Shipped |
| Undo/redo (50 deep) | Shipped |
| HEX, RGB, HSL, alpha editing | Shipped |
| 75 curated explore palettes | Shipped |
| Image color extraction (6 modes) | Shipped |
| WCAG contrast checker (AA/AAA) | Shipped |
| Accessibility studio with 5-mode color blindness sim | Shipped |
| Palette health score (0-100) with recommendations | Shipped |
| Visual analytics: hue/saturation/lightness distributions | Shipped |
| Palette compare mode | Shipped |
| Workspace snapshots (save/restore/rename/delete) | Shipped |
| Gradient studio (linear/radial/conic) | Shipped |
| Design token scale generator | Shipped |
| Design system preview (buttons, cards, forms, alerts, etc.) | Shipped |
| Semantic token export (12 UI roles) | Shipped |
| Export formats: CSS, SCSS, Tailwind v4, JSON, W3C Design Tokens, Style Dictionary, Figma Variables, Flutter, React Native, Android XML, iOS Swift | Shipped |
| 7 naming presets: Tailwind, Material, Bootstrap, Fluent, Apple, OpenPalette, Custom | Shipped |
| Import design token JSON | Shipped |
| 150-color reference library with rich names | Shipped |
| 7 visualizer templates (website, mobile, dashboard, brand, etc.) | Shipped |
| Command palette with quick actions | Shipped |
Keyboard shortcuts panel (? key) |
Shipped |
| Settings page with import/export preferences | Shipped |
| Light/dark mode | Shipped |
| localStorage persistence | Shipped |
| Shareable URL state (no backend) | Shipped |
| Responsive: mobile through ultrawide | Shipped |
| PWA metadata | Shipped |
| GitHub Actions CI | Shipped |
Real screenshots are committed in assets/screenshots/ for the platform studio.
assets/screenshots/
├── studio.png # Main palette studio
├── visualizer.png # Visualizer and accessibility panels
└── mobile.png # Responsive mobile layout
assets/demos/
└── openpalette-refinement.gif
| Capability | OpenPalette | Cloud-first palette tools |
|---|---|---|
| Works without an account | Yes | Sometimes |
| Local palette persistence | Yes | Rarely |
| No telemetry by design | Yes | Varies |
| Shareable URLs without a backend | Yes | Usually backend-backed |
| Design-token exports | Yes | Often paid or limited |
| Image extraction in-browser | Yes | Varies |
| Open-source architecture | Yes | Usually no |
- Calm palette studio with core controls first and advanced RGB/HSL editing collapsed by default.
- Local design-token preview for semantic color roles, spacing, typography, and radii.
- Focused engines for palette, accessibility, gradient, import, export, library, and image extraction behavior.
- Coverage-backed reliability for the color platform internals.
| Layer | Choice |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript (strict mode) |
| Styling | Tailwind CSS v4 |
| State | React client-state + localStorage |
| Deployment | Vercel + Cloudflare → palette.kovina.org |
| Runtime | Node.js >= 22 |
# Navigate to the repo
cd ~/repos/sparshsam/openpalette
# Install dependencies
npm install
# Development server
npm run dev
# Production build
npm run build
# Validation
npm run lint
npm run typecheck
npm run test:coverageopenpalette/
├── .github/workflows/
│ └── ci.yml # Lint, typecheck, build
├── assets/
│ ├── screenshots/ # Product screenshots (TBD)
│ └── diagrams/ # Architecture diagrams (TBD)
├── docs/
│ ├── architecture.md # Application architecture
│ ├── design-system.md # Design tokens and UI patterns
│ ├── product-spec.md # Product requirements
│ └── README.md # Documentation index
├── src/
│ ├── app/ # Next.js App Router pages
│ ├── components/ # React components
│ └── lib/ # Utilities and color math
├── public/ # Static assets
├── AGENTS.md # AI agent instructions
├── CHANGELOG.md # Keep a Changelog format
├── CLAUDE.md # Claude Code instructions
├── CODE_OF_CONDUCT.md # Professional conduct standards
├── CONTRIBUTING.md # Contributor guide
├── LICENSE # MIT
├── README.md # This file
├── ROADMAP.md # Product roadmap
├── SECURITY.md # Security policy
└── SUPPORT.md # Support channels
OpenPalette is a single-page application with client-side state management:
- Generation: Color harmonies are computed in-browser using HSL color math and lock-aware replacement.
- Locking: Individual colors can be locked to preserve them during regeneration.
- Persistence: Current palette, library, tags, favorites, and history are stored in localStorage — no backend.
- Exports: CSS, SCSS, Tailwind, JSON, SVG, PNG, PDF, and design-token formats are generated client-side.
- Extraction: Image colors are sampled with browser canvas APIs and never leave the device.
See docs/architecture.md for the full architecture document.
The product refinement pass split the platform into focused engines, added deferred library filtering, collapsed advanced controls by default, and introduced Vitest coverage.
Current validation:
npm run lintnpm run typechecknpm run test:coveragenpm run build
Coverage from the local refinement run:
- 13 tests across 4 files
- 89.32% statements
- 89.65% lines
- 93.02% functions
- 66.22% branches
See docs/performance.md and docs/testing.md.
- Local-first. Palettes are stored in browser localStorage. Clearing browser data will lose unsaved palettes.
- No accounts. No cloud sync, no sharing, no collaborative features.
- localStorage limit. Large libraries may eventually need the planned IndexedDB migration layer.
- ASE binary import. Text exports containing HEX values import today; native binary ASE parsing remains a future parser.
- PDF export. The current palette sheet is intentionally lightweight and dependency-free.
OpenPalette is an Open Product Family application within the Kovina ecosystem. It fills the role of lightweight, browser-native color infrastructure.
Kovina ecosystem standards are canonical. OpenPalette inherits them rather than redefining them:
- Branch from
main:feat/description,fix/description,docs/description - Run validation before every PR:
npm run lint && npm run typecheck && npm run build - Open a pull request for every merge into
main - No direct pushes to
main
See ROADMAP.md for the full product roadmap.
MIT — see LICENSE.
Last updated: June 2026
Part of the Kovina Collection
OpenReader · OpenJournal · OpenLedger · OpenTone · OpenPalette · OpenConvert
OpenSnap · WorldClock Widget · OpenProof · OpenSend · OpenSprout
WordWise · OpenScrabble · Chess · Hisstastic
Minimal, focused tools for everyday tasks.