Project Details
TrueColor Computer Vision Beauty-Tech Prototype
TrueColor is a hosted computer vision beauty-tech prototype that analyzes an uploaded image and returns skin tone data, undertone classification, Pantone-style color family, and cross-brand foundation shade recommendations.
Overview
What the project does
TrueColor was built as a beauty-tech prototype focused on personalized foundation matching. The app allows a user to upload an image, sends the image to a Python/FastAPI backend, and returns structured skin tone information that can be used to recommend foundation shades across different makeup brands.
The full concept connects computer vision analysis with a foundation shade database. The database was designed to store scraped foundation shade information from multiple brands, so the system can compare a user's analyzed skin tone against existing product shade data and return the closest matches. The hosted version is currently a demo prototype, so the output is meant to show the workflow and system design rather than act as a production-level shade match.
Important Demo Note
Current accuracy and demo limitations
The hosted demo is designed to demonstrate the functionality, API flow, backend architecture, and product concept. Results may not be fully accurate right now because the deployed version is running as a prototype and does not fully depend on the original production database setup. The full system was designed to connect to a Supabase database containing scraped foundation shade information, but the current hosted demo prioritizes showing the upload, analysis, response, and recommendation flow.
The local development version supports the deeper computer vision workflow using MediaPipe face landmarks and image-based skin region extraction. During hosting, MediaPipe had environment limitations on the deployed backend, so the deployment was adjusted to keep the API stable and demoable. This means the hosted version should be understood as a working prototype demo, while the underlying architecture shows how the full version would calculate and retrieve more accurate product matches when connected to the complete database and production setup.
Technical Flow
How it works
Image Upload
The frontend lets users upload a photo or use the camera flow to preview an image before sending it for analysis.
API Request
The selected image is sent as multipart form data from the Next.js frontend to the FastAPI backend through the /analyze endpoint.
Face Landmark Detection
In the full local pipeline, MediaPipe face landmarks identify facial regions such as the cheeks, forehead, nose bridge, and chin so the system can sample skin pixels from relevant areas instead of analyzing the entire image.
Skin Pixel Extraction
The backend extracts pixels from selected facial regions and filters them into a usable format for tone, depth, and undertone analysis.
CIELAB Color Analysis
The extracted skin pixels are converted into LAB color values. L represents lightness, A represents the red/green axis, and B represents the yellow/blue axis.
Shade Recommendations
The analyzed LAB values are compared against foundation shade data to return suggested matches from brands such as Fenty Beauty, NARS, and Too Faced.
Matching Logic
How shade matching is calculated
The matching approach is based on comparing the user's analyzed skin color against stored foundation shade values. In the full intended workflow, each foundation shade has a color representation, and the system compares the user's LAB value to the shade's LAB value using a color-distance calculation.
The main idea is similar to ΔE color distance: the smaller the distance between the user's LAB value and a foundation shade's LAB value, the closer the match. This lets the backend rank possible shades instead of returning random recommendations. Undertone classification is also used to help separate warm, cool, and neutral matches.
distance = sqrt((L1 - L2)^2 + (A1 - A2)^2 + (B1 - B2)^2)This formula compares the user's lightness and undertone-related color channels against each product shade. In a production version, the database connection and scraped shade dataset would make the returned recommendations more accurate and brand-specific.
Database Design
How the foundation database fits in
The full system was designed to connect to a Supabase database containing foundation shade data. The idea was to scrape or collect product shade information from different brands, normalize the data, store it in a database, and query it during the matching process.
In a complete production version, the backend would use the analyzed LAB value and undertone to search the database, rank the closest shades, and return product recommendations with stronger accuracy. The hosted prototype currently focuses on demonstrating this architecture and interaction flow, while the database connection can be reactivated or expanded for a more accurate production demo.
Hosted Demo
What is live
The project has a hosted frontend demo and a hosted backend API. The backend is deployed on Render, while the frontend is available through a custom protected demo link. The API accepts an image upload and returns a structured response with skin tone values, undertone, color family, and foundation recommendations.
The current demo is intentionally presented as a prototype. It demonstrates the full product flow: upload an image, send it to an API, receive analysis data, display LAB values, show undertone classification, and present foundation recommendations. The results may not be perfectly accurate because the hosted version is not fully connected to the complete Supabase foundation database and uses a deployment-safe version of the analysis flow.
API Response
Example output
After an image is submitted, the backend returns a structured response similar to this:
{
"skinLAB": [65.2, 12.4, 18.6],
"undertone": "warm",
"pantone_family": "4Y05",
"fenty": ["310", "330"],
"nars": ["Barcelona", "Stromboli"],
"tooFaced": ["Warm Sand", "Golden Beige"]
}The frontend then displays the LAB values, undertone, Pantone-style family, color preview, and grouped foundation matches. This structure makes the backend response easy to use across multiple frontend screens or future mobile app integrations.
My Contributions
What I worked on
Backend API Development
Focused mainly on the Python/FastAPI backend, including the image analysis endpoint, request handling, structured JSON responses, and connecting the backend logic to the frontend demo flow.
Database Handling
Worked on the foundation shade database structure and logic for storing and retrieving shade data. The system was designed to connect analyzed skin tone values with a database of scraped foundation shades from different beauty brands.
Calculation Flow
Helped build the calculation flow that compares a user's analyzed LAB skin tone values against stored foundation shade values using color-distance logic to identify closer potential matches.
Computer Vision Pipeline
Worked with the backend image-analysis pipeline using OpenCV, NumPy, and MediaPipe concepts to support face landmark detection, skin region extraction, and color analysis from uploaded images.
API Connections
Connected the frontend upload flow to the backend API, handled multipart image requests, tested API responses, and made sure the frontend could receive and display analysis results such as LAB values, undertone, color family, and shade matches.
Debugging & Deployment
Debugged backend deployment issues, API request errors, response-shape mismatches, database connection limitations, and hosted demo stability so the project could still be presented as a working prototype.
Tech Stack
Tools used
Learning Outcome
Built and deployed a computer vision prototype with a working hosted API.
This project helped me practice backend development, image upload handling, API integration, database-backed recommendation logic, backend deployment, computer vision concepts, color matching calculations, and debugging real deployment issues. It also strengthened my understanding of how technical analysis can be turned into a user-friendly product experience.