Sanzo Wada color combinations: from a garment photo to a palette

A client-side tool that matches your clothes to a century-old color dictionary

Date

2026

What I did

Product design

Front-end development

Color science

A personal project that turns A Dictionary of Color Combinations by Sanzo Wada (Seigensha) into a tool you can use while getting dressed: upload a photo of a garment, pick its color, and see which combinations from the book go with it.

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?"

Sanzo Wada color combinations tool with a blue-violet color selected and the book's combinations listed below it
Pick a color. The book's closest combinations appear right below.

How it works

  • The photo never leaves the device. It is processed entirely in the browser with a canvas; there is no upload and no server.
  • 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.
  • Up to five candidate colors are shown, and you can tap the photo to pin an exact shade yourself.
  • 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.
  • Results can be filtered by combination size (2, 3, 4 or more colors) and saved as favorites in localStorage.
Choosing a color with the picker, then browsing its combinations and outfits.

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 (14 KB). 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.
  • 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.
  • Quiet background, soft borders, a display serif for headings, touch targets of at least 44 px, prefers-reduced-motion support and no widows in headings.
  • Live at sanzo-wada-colores.vercel.app.

Limitations

  • The color of a photo depends on light and camera, which is why manual picking is always available.
  • The book's hex values are CMYK to RGB conversions, so they are approximations of printed paper.
  • CIE76 is a simple metric. If finer matching is ever needed, the next step would be CIEDE2000.

More projects