HueMatch

Hue Match is a web-based tool that helps users find their perfect foundation shade by analyzing their skin tone from a photo. Hue Match uses LAB color space to recommend the closest shade

Comment

Inspiration

Foundation matching remains a frustrating guessing game for many especially in regions with diverse skin tones and limited access to cosmetic counters. Most digital tools today lean heavily on filters, generic tone categories, or AI-driven estimates that often fail to represent deeper and varied skin tones accurately. With HueMatch, we set out to build something different: a precise, visual, and fully data-driven tool that relies not on AI, but on scientific color analysis. By using LAB color space and perceptual distance calculations, HueMatch offers accurate, inclusive foundation recommendations all powered by pure color science, not machine learning.

What it does

HueMatch allows users to:

  1. Upload a photo of their face.
  2. Click on any spot on their skin to extract its RGB value.
  3. Convert that RGB to LAB (a perceptual color space).
  4. Match the LAB color to a curated dataset of MAC foundation shades using Euclidean distance.
  5. Display the closest matching MAC foundation shade instantly.

How we built it

  • Frontend: React + JavaScript with image upload, canvas-based pixel picker, and smooth UI transitions.
  • Backend: Express.js RGB-to-LAB conversion and color distance matching.
  • Dataset: Manually curated a dataset of MAC foundation shades with LAB values.

Challenges we ran into

  • Getting accurate LAB values for cosmetic shades without official APIs or datasets.
  • Ensuring cross-device image color consistency for more accurate pixel sampling.
  • Integrating the frontend pixel picker with the backend in a user-friendly way.

Accomplishments that we're proud of

  • Built a clean, intuitive user experience with scientific accuracy at its core.
  • Successfully matched real user skin tones to actual MAC foundation shades with high confidence.
  • Made something accessible and helpful, especially for users who shop cosmetics online.
  • Created an entirely non-AI solution that delivers results comparable to beauty-tech apps.

What we learned

  • LAB color space is significantly more useful than RGB for subtle visual matching.
  • The importance of UI clarity when guiding users through technical processes like color picking.
  • How precision and inclusivity can co-exist in beauty tech.
  • Even without AI, data and perceptual modeling can go a long way in solving real problems.

What's next for HueMatch

  • Add support for other major foundation brands (Fenty, Maybelline, L'Oréal).|
  • Open-source the LAB foundation dataset to help the community build better tools.

Built With

Share this project:

Updates