Project Overview
The Top 10 Color Extractor is a lightweight Flask web application that analyzes any uploaded image and returns its ten most dominant colors. Built as part of the 100 Days of Code journey, this project demonstrates practical image processing with NumPy and Pillow, wrapped in a minimal Flask interface. The goal was to focus on clean, maintainable code that follows best practices — clear separation of logic, stateless processing, and a simple, responsive front end.
Core Technologies
- Python 3
- Flask (web framework)
- Pillow (image handling)
- NumPy (pixel quantization and frequency counting)
- HTML & CSS for a clean UI
Technical Execution & Problem Solving
The image is processed entirely in memory — no temporary files — ensuring a stateless, efficient flow. Using NumPy’s vectorized operations, the algorithm quantizes RGB values to merge near-identical shades, greatly improving both performance and accuracy. Downscaling images to a manageable size keeps the processing lightweight without affecting color proportions.
A ColorCount dataclass structures the output neatly, while Jinja2 templates handle display logic.
The design prioritizes user experience with clear color swatches, HEX codes, and relative frequency bars.
Key Features
- Uploads any image format (JPEG, PNG, etc.)
- Returns top 10 colors with HEX and RGB values
- Displays frequency bars representing each color’s ratio
- Stateless and fast — no server-side storage
Demonstrated Skill Set
- Flask app architecture and routing
- In-memory file handling and image preprocessing
- Practical NumPy vectorization and quantization
- Clean, production-style project structure
- Attention to UX/UI balance for developer tools
Reflection
This project reinforced the importance of building small, purposeful tools that demonstrate best practices in both backend logic and frontend presentation. The experience also highlighted how careful quantization can turn noisy data (millions of similar pixels) into clear, meaningful insights. Next steps could include exporting palettes as CSS variables or integrating k-means clustering for more perceptual grouping.