{"slug": "i-built-a-colour-season-analysis-app-as-one-html-file-with-a-live-camera-drape", "title": "I built a colour-season analysis app as one HTML file (with a live camera \"drape\" mirror)", "summary": "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.", "body_md": "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.\n\nSo 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.\n\n## \n  \n  \n  What it does\n\n- A short quiz maps you to one of the 12 seasons (rule-based scoring, not AI).\n- You get your season, your 6 best colours and a shareable palette card.\n- 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.\n- No sign-up. The camera stream never leaves the device.\n\n## \n  \n  \n  How it's built\n\n- \n**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.\n- \n**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.\n- \n**Share card:** drawn on a`<canvas>` and exported with`toBlob()` , then handed to the Web Share API (`navigator.share({ files })` ) with a download fallback.\n- \n**i18n:** a tiny dictionary object with EN/ES strings, language picked from`navigator.language` and switchable.\n- \n**PWA:** a manifest plus a small service worker that caches the single page, so it opens offline and installs to the home screen.\n- \n**Hosting:** Cloudflare Pages, free tier, deployed through the Pages direct-upload API.\n- \n**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).\n\n## \n  \n  \n  Things I learned\n\n1. Mobile Safari needs `playsinline` and`muted` on the`<video>` or the camera preview goes fullscreen.\n2. Lighting matters more than any algorithm. The app tells you to face a window in daylight, which improves results more than any code could.\n3. Bilingual from day one is cheap when the whole app is one file, and the Spanish-speaking colour-analysis community is underserved.\n\nTry it here: [https://paletacolor.com](https://paletacolor.com). I'd love feedback, especially on the camera mirror on different phones.", "url": "https://wpnews.pro/news/i-built-a-colour-season-analysis-app-as-one-html-file-with-a-live-camera-drape", "canonical_source": "https://dev.to/playnightlit/i-built-a-colour-season-analysis-app-as-one-html-file-with-a-live-camera-drape-mirror-n2g", "published_at": "2026-10-22 06:00:43+00:00", "updated_at": "2026-10-22 06:10:49.924274+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools"], "entities": ["Paleta", "Cloudflare Pages", "Stripe", "Web Share API"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/i-built-a-colour-season-analysis-app-as-one-html-file-with-a-live-camera-drape", "markdown": "https://wpnews.pro/news/i-built-a-colour-season-analysis-app-as-one-html-file-with-a-live-camera-drape.md", "text": "https://wpnews.pro/news/i-built-a-colour-season-analysis-app-as-one-html-file-with-a-live-camera-drape.txt", "jsonld": "https://wpnews.pro/news/i-built-a-colour-season-analysis-app-as-one-html-file-with-a-live-camera-drape.jsonld"}}