CHROMA

Inspiration

Choosing makeup shades and clothing colours online can feel like guesswork. Generic beauty recommendations often overlook the relationship between a person's actual facial colouring and the colours they choose to wear.

We wanted to build something that connects colour analysis with practical beauty and shopping decisions. Instead of stopping at a colour chart, CHROMA turns measured facial colours into personalized recommendations and a visual makeup try-on experience.

Our goal was to make colour intelligence more interactive, understandable, and useful to people exploring their personal style.

What It Does

CHROMA creates a personalized journey from facial colour analysis to virtual makeup experimentation.

• Measure: Uses the YouCam Skin Tone Analysis API to obtain facial colour measurements from an uploaded photo.
• Interpret: Processes the measurements to generate a seasonal colour profile and confidence estimate.
• Personalize: Uses the resulting palette to guide makeup colour recommendations and generate coordinated looks.
• Try on: Integrates the YouCam Makeup Virtual Try-On API to render a selected makeup look on the user's photo.
• Explore clothing colours: Calculates colour compatibility between the user's palette and garment colours, alongside descriptive product-shade rankings.

The result is a connected experience where users can explore their colours, discover makeup combinations, and preview a look before deciding whether it suits them.

How We Built It

CHROMA is a web application built with Next.js, React, and TypeScript, with YouCam APIs powering its core analysis and virtual try-on capabilities.

We deliberately separate the responsibilities of the external APIs from CHROMA's own interpretation layer.

The YouCam Skin Tone Analysis API provides facial colour measurements, while CHROMA uses application-level colour logic to derive seasonal profiles, coordinate makeup palettes, and evaluate garment colour compatibility. The YouCam Makeup Virtual Try-On API provides the rendered makeup preview.

This separation matters: API-derived measurements are not presented as though they were independently calculated by our application, and CHROMA's styling interpretations are not misrepresented as direct YouCam API results.

We also built around the practical requirements of a photo-based application, including image-upload validation, request-size limits, API error handling, and guidance for configuration problems.

Challenges We Faced

One of the main challenges was connecting several distinct stages into a coherent experience. Colour analysis, seasonal interpretation, makeup recommendations, and virtual try-on are different operations. The challenge was making them work together as one understandable workflow rather than a collection of disconnected features.

Another challenge was handling the boundary between external API results and application-generated recommendations. We needed to distinguish measured facial colours from interpretations produced by our own colour logic.

Reliability was equally important. Photo uploads and external API requests can fail for different reasons, so we implemented validation and clearer error handling to help distinguish invalid input, network failures, and API errors.

Finally, we wanted the experience to deliver more than a static recommendation. Integrating virtual try-on made it possible to move from colour analysis to a visual preview using the user's own uploaded photo.

What We Learned

Building CHROMA reinforced the importance of designing around real API capabilities rather than treating AI integration as a marketing feature.

We learned how to combine external computer-vision and virtual try-on services with application-level logic, how to communicate the difference between measured data and generated interpretations, and how to make a multi-step workflow more useful to the end user.

We also learned that personalization becomes more compelling when users can see the result—not just read a recommendation.

What's Next

We see opportunities to expand CHROMA with a broader range of makeup combinations, more garment and product-shade exploration, and a more comprehensive personalized beauty-shopping journey.

Our long-term vision is to make CHROMA a practical bridge between personal colour discovery and more confident online beauty and fashion choices.

CHROMA transforms facial colour measurements into a journey of personalized discovery—from understanding your colours to seeing how a makeup look works on you.

Built With

• analysis
• api
• artificial
• beauty
• color
• computer
• e-commerce
• intelligence
• next.js
• react
• skin
• technology
• theory
• tone
• try-on
• typescript
• virtual
• vision
• web
• youcam