ToneGrid-Skin AI + Apparel VTO

One model can’t represent every shopper. ToneGrid measures undertone, finds the best colour match across a catalogue, proves it with VTO, and reveals which customers the brand underserves.

Comment 20

Inspiration

Colour advice in fashion retail is almost entirely vibes. "You're an autumn," "this is your season" — confident labels with no measurement behind them. Meanwhile the merchandiser buying next season's colour range has the opposite problem: data about what sold, none about who couldn't wear it. Both problems are the same missing measurement, pointed in opposite directions. The YouCam Skin Tone Analysis API supplies it.

What it does

For the shopper — one guided capture. ToneGrid measures skin, lip, hair and eye colour, places undertone on a warm–cool axis as a number, scores every piece in a 24-SKU catalogue with a one-line explanation, and lets live Skin Analysis (redness, radiance) shift the score itself. Face shape maps to neckline guidance, Fitzpatrick type to fabric/sun guidance, and the top match renders via virtual try-on.

For the merchant — the same engine, inverted. It scores the whole catalogue against 18 population segments and draws the result as a grid of swatch chips. On the bundled catalogue it surfaces a 2.8× assortment gap: the best-served shopper segment has 11 pieces that clear the match bar, the worst has 4.

The landing page states the whole thesis instantly: the same dress, scored on six complexions, spans 98 down to 29 — a 69-point difference nobody in retail is pricing in.

Try it live: tonegrid.vercel.app — no signup needed.

How we built it

Next.js 14 + TypeScript + Tailwind, deployed on Vercel. Five YouCam APIs integrated server-side so the key never reaches the browser: Skin Tone Analysis, AI Clothes VTO, Skin Analysis, Face Attributes & Ratio Analyzer, and Fitzpatrick Skin Type Analyzer. The differentiator isn't the wrapper — lib/color.ts is a real colour-science engine: sRGB → CIELAB, full CIEDE2000, a four-term compatibility model. Everything deterministic.

Challenges we ran into

Two of the five APIs had unreliable or inaccessible documentation. Face Analyzer's docs described a nested request body; the live API's own validation error revealed the real flat shape instead. Fitzpatrick's docs page never loaded at all — the real endpoint slug only surfaced from the API Playground's generated sample code.

Virtual try-on failed on our own catalogue images — SVG artwork the AI Clothes model couldn't decode. Rasterising to PNG fixed it, which then exposed a second bug: our result-URL extraction assumed one fixed JSON shape. It's now a defensive recursive search instead.

We also nearly shipped a scoring model too generous to discriminate — median score 72/100 regardless of the pairing. Tightening two terms brought it to a genuine 55, and the merchant grid started telling the truth instead of a flattering lie.

Accomplishments that we're proud of

All five YouCam APIs genuinely live-tested, not just wired up. A merchant view that's a different product category from most of the submission field — a retail-operations tool, not another selfie-in-outfit-out app. Skin Analysis that changes the colour score, not just displays it. Deployed and publicly live with a fully-functional Demo Mode.

What we learned

"Does this suit me?" has a satisfying answer whether or not the model is any good. "Which customers does my range fail" only works if the scoring genuinely discriminates — which is exactly what exposed the too-generous model. We also learned not to trust documentation once it stops matching reality; the API's own errors were more reliable than the docs sitting next to it.

What's next for ToneGrid

Real catalogue ingestion from Shopify/WooCommerce. Scoring weights validated against real purchase and return data. Per-region undertone distributions instead of equally-weighted segments. Full real-photo support end to end.

Built With

  • ciede2000
  • cielab
  • colour-science
  • generative-ai
  • nextjs
  • node.js
  • perfect-corp
  • react
  • rest-api
  • skin-tone-analysis
  • tailwindcss
  • typescript
  • vercel
  • virtual-try-on
  • youcam-api
+ 15 more
Share this project:

Updates