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

Colour analysis has become all the rage on TikTok, with people testing their skin tone by holding colored fabric under their face. Existing paid apps demand an account, an installation, and a selfie upload before revealing any results. This led to the creation of Paleta (https://paletacolor.com): a free colour-season quiz and live camera drape mirror, available in English and Spanish, that runs entirely within the browser.

Here's how it works: a brief quiz assigns you to one of the 12 seasons using rule-based scoring rather than artificial intelligence. You receive your season, six best colors, and a shareable palette card. The drape mirror uses your device's front camera to frame your face with a colored band, enabling you to toggle between palettes and observe which shades enhance your skin and which make you appear fatigued.

Importantly, no account creation is necessary, and the camera stream remains on the device. The app is built within a single index.html file, incorporating HTML, CSS, JavaScript, fonts (in subsetted woff2 format), and season data. No frameworks or build steps are required for the core app. The camera mirror uses the getUserMedia API to retrieve video feed, center-cropping, mirroring, and drawing the color drape around the face using a canvas element.

No machine learning or uploads are involved, ensuring smooth performance even on low-end phones. The share card is created using canvas drawing and converted to a downloadable file via the Web Share API, with a fallback for devices that don't support it. The app supports internationalization (i18n) with a compact dictionary object containing English and Spanish translations, which can be switched based on the device's language settings.

It also features a Progressive Web App (PWA) manifest and a lightweight service worker to cache the single page, enabling offline access and home screen installation. Cloudflare Pages serves as the free hosting platform, deployed via the Pages direct-upload API. Optional payments via a Stripe Payment Link provide a $4.99 one-time Plus unlock, with no backend required (acknowledging the potential for spoofing for the current pricing model).

Key insights include using the playsinline and muted attributes on the video element in Mobile Safari to prevent fullscreen camera preview, the importance of proper lighting conditions - preferably facing a window during daylight - for more accurate results, and the efficiency of creating a bilingual app when the entire application resides within a single file, highlighting the lack of color analysis resources for Spanish speakers in this space.

Try it out at https://paletacolor.com and provide feedback, particularly on the camera mirror's performance across various devices.