DEV Community

Cover image for I built a colour-season analysis app as one HTML file (with a live camera "drape" mirror)
Jacko (Nightlit)
Jacko (Nightlit)

Posted on

I built a colour-season analysis app as one HTML file (with a live camera "drape" mirror)

#showdev #webdev #javascript #pwa

Colour analysis is huge on TikTok right now: people hold coloured fabric ("drapes") under their face to see whether they're a Soft Summer, a Deep Winter, and so on. The paid apps in this space do very well, but most of them want an account, an app install, or a selfie uploaded to a server before you see anything.

So I built Paleta (https://paletacolor.com): a free colour-season quiz plus a live camera drape mirror, in English and Spanish, that runs entirely in the browser.

What it does

  • A short quiz maps you to one of the 12 seasons (rule-based scoring, not AI).
  • You get your season, your 6 best colours and a shareable palette card.
  • The drape mirror opens your front camera and frames your face with a band of colour, so you can flip between palettes and see which shades brighten your skin and which make you look tired.
  • No sign-up. The camera stream never leaves the device.

How it's built

  • One self-contained index.html. HTML, CSS, JS, fonts (subsetted woff2) and season data all inline. No framework, no build step for the core app.
  • Camera mirror: getUserMedia({ video: { facingMode: 'user' } }) feeds a hidden <video>, and each frame is centre-cropped, mirrored and drawn to a <canvas> with the colour drape painted around the face. No ML, no uploads, so it stays smooth on cheap phones.
  • Share card: drawn on a <canvas> and exported with toBlob(), then handed to the Web Share API (navigator.share({ files })) with a download fallback.
  • i18n: a tiny dictionary object with EN/ES strings, language picked from navigator.language and switchable.
  • PWA: a manifest plus a small service worker that caches the single page, so it opens offline and installs to the home screen.
  • Hosting: Cloudflare Pages, free tier, deployed through the Pages direct-upload API.
  • Payments: an optional $4.99 one-time "Plus" unlock uses a Stripe Payment Link that redirects back with a flag. No backend at all (yes, that's spoofable; for a $5 unlock I'm fine with it for now).

Things I learned

  1. Mobile Safari needs playsinline and muted on the <video> or the camera preview goes fullscreen.
  2. Lighting matters more than any algorithm. The app tells you to face a window in daylight, which improves results more than any code could.
  3. Bilingual from day one is cheap when the whole app is one file, and the Spanish-speaking colour-analysis community is underserved.

Try it here: https://paletacolor.com. I'd love feedback, especially on the camera mirror on different phones.

Top comments (0)