Color Harmony

Color Harmony is your personal style companion that unlocks your unique color palette based on your skin tone, hair color, and eye color, and delivers personalized fashion recommendations.

Comment

Inspiration

We were inspired by the seasonal color analysis system—a method that categorizes individuals into one of 12 distinct color palettes based on their skin tone, hair color, and eye color. As young adult college students, we understand that finding and settling into a personal style can be challenging. This foolproof system uses simple color theory to enhance one’s natural features, making it easier to build a cohesive wardrobe that truly flatters.

What it does

Color Harmony allows users to upload an image of themselves and then processes the photo to determine which of the 12 seasonal palettes they belong to. These include: Light Spring, Bright Spring, Warm Spring, Light Summer, Soft Summer, Cool Summer, Soft Autumn, Warm Autumn, Deep Autumn, Cool Winter, Clear Winter, and Deep Winter. Once the app identifies the user's palette, it curates and displays a selection of articles and product recommendations, including clothing, accessories, and makeup, that are perfectly matched to that palette. This means users get personalized styling resources designed to help them look their best with minimal guesswork.

How we built it

We built Color Harmony using TypeScript and React for front-end development and state management. We used CSS to create a clean and responsive design. We integrated Google’s Custom Search JSON API to automatically fetch the curated articles and product recommendations. React Router enabled navigation between pages, and custom context providers were implemented to manage authentication and color analysis state.

Challenges we ran into

Our initial experiments with OpenCV for automated image processing produced inconsistent results. After several iterations, we shifted to a manual input method, which improved analysis accuracy. Merging multiple APIs and handling asynchronous data flow in React posed its own set of challenges. Ensuring the app was responsive, accessible, and provided immediate, useful feedback required extensive testing and iteration.

Accomplishments that we're proud of

We are proud that our app generates highly relevant styling resources that enable users to create a cohesive wardrobe based on their unique color palette. We also validated our color analysis by comparing our results against well-known celebrity color palettes, and our system’s recommendations turned out to be accurate.

What we learned

Through this project, we deepened our expertise in TypeScript, React, and API integration. We honed our skills in managing asynchronous operations and learned the importance of collaborative problem-solving.

What's next for Color Harmony

Our next goal is to fully automate the image processing step using advanced object detection and machine learning techniques. By training our model on a comprehensive dataset of faces and their corresponding color palettes, we aim to eliminate the need for manual input. We’re also looking to expand our resource library and introduce community features, allowing users to share feedback and further refine their personal style.

Built With

Share this project:

Updates