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

> Source: <https://dev.to/playnightlit/i-built-a-colour-season-analysis-app-as-one-html-file-with-a-live-camera-drape-mirror-n2g>
> Published: 2026-10-22 06:00:43+00:00

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):](<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](https://paletacolor.com). I'd love feedback, especially on the camera mirror on different phones.