TrueColor

Project Story True Colour is a web application designed to help users find their exact foundation shade using camera input and facial landmarks. The idea was inspired by inclusivity: many people of color struggle to find foundation shades that truly match their skin, which can be frustrating, time-consuming, and discouraging. Shade matching often relies on guessing, store lighting, or limited shade ranges, and we wanted to build something that removes that uncertainty and works for everyone, not just a narrow group of skin tones.

We built True Colour using MediaPipe for facial landmark detection, OpenCV for color extraction and processing, and Supabase as our database. The frontend was developed with React, Next.js, and Tailwind CSS, focusing on a clean and modern user experience. The camera captures multiple areas of the face, such as the jaw, cheeks, chin, and forehead, which are then merged to compute a single, representative skin tone. This final shade is converted into scientifically accurate color formats that allow us to match users with foundation shades across different brands.

One of our biggest frontend challenges was balancing visual polish with technical correctness. Small CSS or animation issues could completely break the UI, circles would stretch into bars, elements would overlap, or animations would disappear altogether. Debugging layered animations, Tailwind overrides, and state-driven rendering took much longer than expected. At the same time, we wanted the product to feel like a real app, not just a hackathon demo, which meant carefully designing the layout, copy, and flow to feel intentional and user-focused.

On the backend, the hardest challenge was maintaining consistency while merging data from multiple facial landmarks and keeping the frontend and backend in sync. Accurately determining skin tone required more than extracting RGB values, we had to convert colors into linear RGB, then into CIELAB, which is better aligned with human color perception. This step was critical for reliable shade matching, undertone detection, and Pantone classification, but it was also one of the most technically complex parts of the project.

What We Learned: This project pushed us to think about color far beyond standard RGB values and forced us to understand how humans actually perceive skin tone. We learned how the CIELAB color space works and why it’s much better suited for representing real skin tones and undertones, since it separates color into lightness (L), the green–red axis (a), and the blue–yellow axis (b). That separation made undertones easier to reason about in a meaningful way instead of guessing based on visuals alone. Beyond color science, we gained hands-on experience with complex UI animation, state-driven rendering in React, and designing around real user flow rather than a static demo screen. Overall, the project taught us how deeply connected technical accuracy and user experience are, if either one is off, the whole product falls apart.

What’s Next for True Colour: From a product perspective, our next goal is to expand the database to include more cosmetic brands and shades, turning True Colour into a full makeup-artist-friendly platform. Long-term, we want users to be able to shop directly through the app using their matched shades. On the technical side, we want to implement more advanced weighting formulas for facial landmarks, for example, prioritizing the jawline more heavily than the forehead, to improve accuracy. We also want to make the app more accessible, especially for users with hyperpigmentation, burn scars, or skin discoloration, by allowing adaptive landmark selection that works best for their skin.