🎨 Real-Time Color Detector

Point your webcam at anything and get its color name, RGB and HEX, live.

Built with Python and OpenCV · Final project for Harvard CS50x

✨ Features

📷 Live webcam feed	Reads every frame in real time, no photo upload needed
🎯 Center sampling	Averages a 60×60 px area instead of a single pixel, so noise doesn't flip the result
🌈 Name + RGB + HEX	Matches the nearest of 141 named colors and shows all three values on screen
🧠 Smart contrast	Text switches between black and white depending on how bright the color is
🖼️ Clean overlay	Translucent color panel, swatch preview and PNG logo with real alpha blending

🚀 Quick start

git clone https://github.com/vanngilha/color-detector.git
cd color-detector
pip install -r requirements.txt
python color_detector.py

A window opens with your webcam. Put something in the white square and the color shows up on top. Press Esc to quit.

Tip

No webcam on your PC? Apps like DroidCam turn your phone into one. That's how the screenshot above was taken.

Note

Online IDEs (like the CS50 codespace) can't reach your webcam. Run it locally in VS Code or a terminal.

⚙️ How it works

flowchart LR
    A[Webcam frame] --> B[60×60 center crop]
    B --> C[Average B, G, R]
    C --> D[Nearest color in colors.csv<br/>Manhattan distance]
    D --> E[Overlay name, RGB, HEX]
    E --> A

    classDef step fill:#100f0d,stroke:#d9a05b,color:#ffffff
    class A,B,C,D,E step

Loading

1. Each frame is captured with cv2.VideoCapture.
2. The square in the middle of the frame is averaged into one color.
3. That color is compared with every row in colors.csv using the sum of the absolute differences in R, G and B. The smallest difference wins.
4. The name, RGB and HEX are drawn on the frame with OpenCV, and the loop repeats.

📁 Project structure

color-detector/
├── color_detector.py   # capture, color matching and drawing
├── colors.csv          # 141 named colors with HEX and RGB
├── requirements.txt    # opencv-python, pandas
├── assets/
│   └── harvard_logo.png
└── images/
    └── final-project-havard.png

Want more colors? Add a row to colors.csv (color_name,hex,R,G,B). No code changes needed.

🔮 Roadmap

• Click anywhere on the video to pick that point's color
• Save detected colors as a palette (PNG / JSON)
• Grid mode to detect several regions at once
• Web version in JavaScript with WebRTC

Ideas and PRs are welcome. Open an issue and let's talk.

If this project helped you or you just liked it, leave a ⭐. It really helps!

Made by Christopher Oliveira · LinkedIn