COLORÉ

Page displaying the available range of colour palettes
Page that allows user to upload the image of their room and preview the result
Page displaying most likedcolours

Inspiration

We’ve all struggled with choosing the right color for our homes. Paint swatches are limited, mockups are unrealistic, and the fear of messing it up is real. We wanted to fix that. Inspired by the idea of a virtual paint test, we built COLORÉ — an AI-powered web app that helps users preview wall colors on their own room photos, instantly and intelligently. No more guesswork. Just upload, pick, and preview.

What it does

COLORÉ allows users to: Upload a photo of their room interior Detect the type of room using Google Vision AI Get personalized color suggestions Apply a selected shade to the walls using realistic image tinting It’s a seamless experience to help users visualize their spaces in a whole new way — before ever picking up a paintbrush. It also allows user login and history to let users save and revisit previous designs

How we built it

Frontend: Built using React + TypeScript + Vite for a responsive and fast UI Backend: Developed with Flask (Python) to handle image uploads, processing, and API endpoints AI Integration: Used Google Vision API to label scene elements like "bedroom", "couch", or "ceiling" Color Matching: Embedded labels into vectors and used cosine similarity to suggest color shades Image Tinting: Leveraged Pillow (PIL) and NumPy to isolate and recolor the wall region of the uploaded photo Deployment: Dockerized the full stack and deployed on Google Cloud Run, with assets stored in Google Cloud Storage

Challenges we ran into

Wall Area Masking: Automatically identifying and masking the wall area was a challenge. When users uploaded images, segmentation didn’t always work accurately. So we decided to retrieve matching colors and apply them to a prefixed room image to demonstrate the feature effectively. Using Vector Search on MongoDB: The free-tier (M0) of MongoDB does not support vector search. So we implemented vector similarity matching using custom Python logic as a workaround. Docker & Deployment: Building, testing, and deploying both Flask and React in Docker containers, while securely managing API keys, required a lot of debugging and setup time.

Accomplishments that we're proud of

We’re proud to have created a user-friendly interface that helps people visualize their spaces — especially in a domain that lacks accessible tools like this. Most existing tools are owned by paint industry giants, but we built this from scratch, including both the full-stack architecture and realistic rendering. It was also our first full-stack AI project — and we delivered it in time!

What we learned

How to build a full-stack AI-powered web app with real-world use cases Gained hands-on experience with Google Cloud services, vector embeddings, and Docker deployment Learned about image masking and color tinting using Python (PIL & NumPy) Understood the value of UX design, simplicity, and clear visuals for non-technical users Learned how to work efficiently as a team under time pressure

What's next for COLORÉ

Integrate automatic wall segmentation using AI models like U-Net or Segment Anything (SAM) Launch a mobile-first version or PWA for quick and offline access