Colorcitos: from a garment photo to a palette

Colorcitos turns A Dictionary of Color Combinations by Sanzo Wada (Seigensha) into a tool you can use while getting dressed. Pick a color or upload a photo of a garment, and see which combinations from the book go with it, with ten drawn outfits for each one.

The book is a beautiful reference, but a difficult one to apply to a wardrobe. The question I wanted to answer was simple: "I have this shirt. What does Sanzo Wada say goes with it?" The name came late. It started as the "Sanzo Wada colors app" and became Colorcitos, a small and friendly name for a small and friendly tool.

Colorcitos with one color selected, its close tones in a row and the first combinations from the book as palettes below. On mobile, the outfit viewer shows a drawn look in the combination's colors — Pick a color and the book's combinations appear right below. Each one opens ten drawn outfits.

How it works

Color first. The home opens with a random color from the book already selected, so the first second shows value instead of an empty upload form. A photo is one tap away, as a compact row.
The photo never leaves the device. It is processed entirely in the browser with a canvas. The image is downscaled and its dominant colors are extracted with k-means in CIELAB space (k=5, more weight on the center, white background ignored). Lab instead of RGB because euclidean distance in Lab is much closer to what the eye perceives.
You can tap the photo to pin an exact shade with a loupe, or use the color picker: a two dimensional plane plus a hue band, with no sliders and no technical values on screen. Colors have names, never hex codes.
Each candidate is matched to the closest color in the book by CIE76 distance. If the second closest is within 6 units, its combinations are included too, and a nearby tones row lets you nudge the match.
Results can be filtered by combination size (2, 3, 4 or 5 and more colors), shown twelve at a time, and saved as favorites in localStorage.

Choosing a tone, browsing its combinations and flicking through the drawn outfits.

Outfits

Every combination opens a viewer with ten outfits drawn in canvas with the palette's colors: tops, trousers, skirts, shoes and accessories that depend on how many colors the palette has.
The characters are gender neutral, with mixed skin tones and hair, a little imperfect on purpose. Pieces get a thin 60% grey outline so light palette colors still read on the cream background.
If a color does not fit a garment, it is left out rather than faked as a block.

The data

Volume 1: 348 combinations over 159 colors, from Matt DesLauriers' MIT-licensed dataset (based on Dain M. Blodorn Kim's work), trimmed to name, hex, Lab and combination list. Verified: 348 unique ids, 120 two-color, 120 three-color and 108 four-color combinations, which matches the book.
Volume 2: 233 combinations from wassilyevich/sanzo-color (MIT, Daan Van Cauteren). The hex values are computed from the book's CMYK with a calibration fitted on Volume 1.
581 combinations in total.
The combinations and color names belong to Sanzo Wada's original work. This is a personal project, with no affiliation.

Engineering decisions

Static site with no build step, no dependencies and no backend. It runs from any static server and deploys for free.
Anonymous analytics only: page visits and a few categorical events, never colors, photos or file names. No cookies.
Quiet background, soft borders instead of shadows, Playfair Display on the title only and Instrument Sans for everything else, touch targets of at least 44 px, prefers-reduced-motion support, no widows in headings and a real 404 page.
Security headers with a strict content security policy, long caching only for versioned files, and structured data plus a sitemap so search engines can find it.
Live at colorcitos.vercel.app. The previous address, sanzo-wada-colores.vercel.app, redirects to it with a permanent 308.

Limitations