Palette Studio for Miniatures

A static, client-side web tool for miniature painters. Pick or explore a colour — a paint you own, a hex, a photo pick, or a drag of the interactive wheel — and get color-theory harmonies where every ideal color is paired with the nearest real paint you can actually buy (matched by ΔE 2000), plus cross-brand equivalents, saved Schemes, a paint Shelf for your collection (with a list to take to the store: a link or QR code sends it to your phone, and a "bought" link brings it back), and color-blindness / contrast accessibility checks.

Live at palette.ryanmette.com. No backend, no build step, no runtime dependencies; installable as an offline-capable PWA.

Status

v1.12.0 — keep this, change the rest. On the Recipe, Lock colour keeps a role's colour and Choose pot… sets the paint for a role, so a scheme you started on the model stays put while you explore the rest. The pick is now the "starting paint", and you can share a scheme as an image (the link card is no longer cut on a Mac).

v1.11.0 — the UX pass, live. It makes the app easier to read and to use: one name for one thing ("starting paint", Recipe, Target / Pot, Other brands, the shopping list), a first-run guide, empty and error states that say what to do, 44px touch targets on every control, a shorter Studio on a phone, tone ladders that show their pots, a ⋯ menu whose groups say what they act on, a language that follows the device, and a sharp link-preview card.

v1.10.0 — the Workbench+ release. It gives the app a look of its own: a warm "Workbench" light theme with a real paint as its accent (Citadel Sotek Green), a flat brass dark theme, Barlow Condensed and IBM Plex Sans (self-hosted), small radii, thin rules in place of cards, one SVG icon set, and a new mark (a dropper whose colour lands as a round pot lid). Since v1.9.0 it also has the paint field (one field for a name, a brand word or a hex), one mark menu, Roll a scheme, the full ⋯ menu (Use my paints, Back up, Restore, Delete), the matching note, and two new brands, AK Interactive and AMMO by Mig (3,225 paints, 10 brands). See CHANGELOG.md for the full history and docs/PLAN.md §5 for what's next.

Doc freshness is CI-checked: scripts/check-docs.mjs fails the build if this file's version or dataset claims drift from package.json / src/data/paints.json.

Repo map

Path	What
CLAUDE.md	Project constitution — scope, design system, conventions, guardrails. Read first.
docs/PLAN.md	Roadmap, architecture, milestones.
mockups/index.html	Design-reference mockup (open in a browser). Not the app.
src/data/paints.json · SOURCES.md	The imported paint dataset — 3,225 paints across 10 brands — + provenance.
scripts/	build-dataset.mjs (assemble dataset) · validate-data.mjs (data QA) · check-docs.mjs (doc-freshness QA) — dev-only, all run in CI.
src/	The app — index.html, styles/, js/ (color · harmony · seed · a11y · data · scheme · share · shareimage · wheel · markmenu · picker · ui · app · store · collection-io · i18n · infopage · version), data/, PWA files, and the Help and privacy pages.

Run, test, deploy

• App: cd src && python3 -m http.server, then open the printed localhost URL (the app fetches data/paints.json over http, so a file:// open won't work).
• Mockups: open any file in mockups/ directly in a browser.
• Tests: npm test (Node's built-in runner — no install). Data + docs validators: npm run validate:data · npm run validate:docs.
• Deploy: push to main; Pages publishes src/ via .github/workflows/deploy.yml to palette.ryanmette.com. Squarespace linking in docs/EMBED.md.

How it works (the color math)

sRGB → CIELAB (D65); perceptual matching via CIEDE2000; harmonies by hue rotation in HSL; color-blindness via Machado (2009) matrices; contrast via WCAG 2.1 relative luminance. Constants are fixed in CLAUDE.md §7 so results never drift.

Data source

The paint list (names, brands and hex values) is imported from the community dataset Arcturus5404/miniature-paints (MIT License, © 2022 Rick Fleuren) — it is not my own curation. This project adds the colour matching on top; full provenance is in src/data/SOURCES.md.

License

Proprietary — all rights reserved; see LICENSE. The license covers the code; the imported dataset's provenance and upstream terms are recorded in src/data/SOURCES.md.