PaletteSnap: Digitizing a 1930s Japanese Color Masterpiece with 162 Traditional Pigments.

PaletteSnap: Wada Sanzō's 1930s Color Archive, Digitized
Color theory died in the 1930s in Japan and nobody told the web it was supposed to stay dead.

PaletteSnap is a digital archive of Wada Sanzō's seminal Dictionary of Color Combinations — a masterpiece of early 20th-century color study. 162 traditional Japanese pigments, historical color harmonies mapped across 2-color, 3-color, and 4-color plates, and the exact proportional weights from the original print. Brought to the browser with archival precision and monumental typography.

Explore it live → | View on GitHub → (MIT licensed, open source)

What You're Exploring
Immerse yourself in 162 individual pigments — each one a piece of Japanese color history. Every pigment shows its hex value, auto-converts to RGB and CMYK, and displays proportional weight bars so you understand the exact balance intended in the original 1930s designs.

Then there are the Plates — historical color harmonies mapped directly from Wada's originals. Two-color combinations for restraint. Three-color for complexity. Four-color for boldness. Real color theory from nearly a century ago, still relevant because math doesn't age.

Search by pigment name, hex code, or color family. Real-time filtering. Smart UI that never gets buried — mix-blend-mode ensures navigation stays visible no matter what color intensity you're viewing.

The Design Problem Solved
Most color tools are bright white interfaces with a small color swatch. PaletteSnap flips it. The entire background becomes the pigment itself. Navigation uses mix-blend-difference to maintain legibility across any color intensity automatically. You're immersed in color, not staring at it through a window.

Typography is editorial — Playfair Display in serif italics, using CSS clamp for fluid scaling. It feels like holding a premium art book, not clicking buttons on a generic web app. The aesthetic matters when you're preserving history.

Responsive Everywhere
Fluid grid layout optimizes for mobile and desktop without compromise. Full-screen color immersion on any device. Custom ghost scrollbar blends seamlessly with whatever pigment you're viewing. The UI dissolves into the experience.

The Architecture
React 19 with TypeScript handles the component layer. React Router manages navigation between pigments and plates. Tailwind CSS v4 provides utility styling, with inline styles for the monumental color backgrounds - Tailwind's JIT can't handle real-time color injection, so the engine bypasses it entirely by injecting variables directly into the DOM.

Framer Motion smooths transitions. The harmony engine analyzes color plates to display precise weight distribution from the originals — not guessed proportions, but historically accurate balances.

All color data lives in a structured JSON database mapping Wada Sanzō's exact hex values and nomenclature from the Dictionary of Color Combinations. Archival fidelity built in.

Run It Locally

bashgit clone https://github.com/byllzz/palettesnap.git
cd palettesnap
npm install
npm run dev

Open http://localhost:5173. No environment variables needed.

For production:

bashnpm run build
npm run preview
Type checking and linting:
bashnpm run type-check
npm run lint

Stack
React 19 for components. React Router v7 for navigation. TypeScript for type safety (currently being migrated across components). Tailwind CSS v4 for utilities. Framer Motion for animations. Vite for fast builds. Vercel for deployment.

Contribute
The TypeScript migration is in progress - components are being converted from JSX to TSX with proper type interfaces. Check src/types/index.ts for existing interfaces. Add new components as .tsx files with proper prop typing.

Other good contributions: expand the pigment database, add new historical plates, improve accessibility with keyboard navigation and screen reader support, optimize the mix-blend-mode contrast logic, or enhance the search algorithm.

bashgit checkout -b feature/your-amazing-feature
git commit -m "feat: your description"
git push origin feature/your-amazing-feature

Why This Exists
Wada Sanzō's Dictionary of Color Combinations is one of the most important color theory texts ever published. It deserved to be lost to history in a library basement. Instead, PaletteSnap preserves it digitally with archival precision and modern web design.

If PaletteSnap inspired your next color palette, a ⭐ on GitHub means a lot.

What's your favorite pigment you discovered? Drop it in the comments 👇