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

A developer built Paleta, a free bilingual (English/Spanish) colour-season analysis web app delivered as a single self-contained index.html file that runs entirely in the browser. The app combines a rule-based 12-season quiz with a live camera "drape mirror" that uses getUserMedia and canvas compositing to frame the user's face in palette colours, with no ML, uploads, or sign-up; it also includes a canvas-generated share card, PWA offline caching, Cloudflare Pages hosting, and an optional $4.99 Stripe Payment Link unlock with no backend.

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.