ToneMatch

ToneMatch is an interactive beauty experience, allowing women to explore makeup and accessories in a safe, inclusive, and personalized way.

Comment

Inspiration

As part of our Girls Who Code College Loop, we wanted to create a product that women would genuinely want to use. We were inspired by the freedom people want when shopping online—the ability to explore, experiment, and try things on before committing. Whether it’s makeup or accessories, we wanted to empower users to confidently discover products that suit them without pressure, guesswork, or exclusion.

What it does

ToneMatch is a web-based virtual try-on experience designed to make online shopping more personalized and accessible. From the homepage, users can choose to try on makeup or accessories. Using facial landmark detection and color-matching logic, ToneMatch allows users to: try on different makeup shades in real time on their own face, receive makeup recommendations based on their complexion, and preview accessories they’ve been interested in online.

How we built it

We built ToneMatch using Next.js and React, with TypeScript for type safety and scalability. Facial landmark detection is powered by MediaPipe Face Mesh, which identifies 468 points on the face. We used the HTML Canvas 2D API to render makeup overlays—such as lipstick, blush, and eyeshadow—directly on top of the user’s image, enabling smooth and responsive try-on interactions. Styling was handled with Tailwind CSS to achieve a clean, modern interface.

Challenges we ran into

One of our biggest challenges was connecting suggested products to meaningful outcomes—specifically, linking recommended makeup shades to real product pages in a way that felt seamless. Balancing technical feasibility with a smooth user experience required us to rethink how product data was structured and displayed within the time constraints of a hackathon.

Accomplishments that we're proud of

We’re incredibly proud that we were able to get the entire pipeline working within the hackathon timeframe. Successfully implementing facial landmark detection and rendering realistic makeup overlays was a major milestone for our team. Seeing the try-on feature work smoothly on real user images was both rewarding and motivating.

What we learned

We learned that building meaningful products takes time, iteration, and collaboration. Working as a team allowed us to divide responsibilities, support one another, and solve complex problems more effectively than we could have individually. This experience reinforced the importance of communication, patience, and shared vision in technical projects.

What's next for ToneMatch

Looking ahead, we want to continue creating products that inspire and support women. For ToneMatch, this means improving skin tone and color-matching accuracy, expanding the range of makeup and accessory options, and exploring more advanced personalization features. Our long-term goal is to make ToneMatch an even more inclusive, reliable, and empowering shopping experience.

Built With

Share this project:

Updates