Can You "Read" Hex Codes? I Built a Game to Test Your Color Intuition 🎨

#webdev #javascript #frontend #showdev

The Problem: Hex Codes are "Magic Numbers" to Many

As developers, we look at #663399 (Rebecca Purple) or #F0DB4F (JS Yellow) every day. But how many of us can actually visualize the color just by looking at the code? Or even harder: can you guess the exact shade of a "Granny Smith Apple" or "Classic Denim"?

I wanted to bridge the gap between technical color values and our visual intuition, so I built ColorGuesser.app.

🎮 The Game Modes

I designed two distinct ways to challenge your brain:

The Noun Challenge: This is the "fun" part. The game gives you a noun (e.g., "Sunflower" or "Deep Sea"), and you have to find the matching color on the wheel. It’s surprisingly harder than it looks!
Master the Hex: For the hardcore devs. You get a HEX or RGB value and have to pinpoint it on the spectrum. It's the ultimate training for your "Design Eye."

🛠️ The Tech Stack (Under the Hood)

Since I’m a fan of modern, lightweight frontend architectures, I avoided heavy frameworks.

Web Components & LWC/Lit principles: I wanted near-zero overhead. The UI is snappy and works perfectly on mobile.
Perceptual Color Math: To calculate your score, I don't just use simple RGB distance. I use the CIELAB color space and Delta E formulas. Why? Because the human eye perceives differences in green much more acutely than in blue. The scoring system reflects how a human actually sees your error.

🚀 Why I Built This

This project started as a way to sharpen my own frontend skills and has grown into a daily ritual for a small community of designers and devs. It currently sees about 40k monthly visitors, and the feedback has been amazing.