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

Kim Jin — Thu, 19 Mar 2026 01:04:54 +0000

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.

🕹️ Try it Out

I’d love to get the Dev.to community’s feedback:

What’s your highest score?
Is the "Noun Mode" too subjective? (I use a curated database for these shades!)

Play here: 👉 https://colorguesser.app

Let me know what you think in the comments! If you're a fellow "Indie Hacker," I'd love to chat about how you approach color in your UI/UX.

showdev #javascript #frontend #webdesign

My Honest Experience with AI FlowChart

Kim Jin — Thu, 19 Mar 2026 01:02:59 +0000

AI FlowChart(https://aiflowchart.net) is an AI flowchart generator that turns text prompts and images into clean, editable flowcharts in seconds. Built for product teams, developers, analysts, and operators, it helps you document workflows, map decision trees, and visualize complex processes without manual diagram work. You can generate from plain language, convert whiteboard photos, refine layouts in the built-in editor, and export to SVG, PNG, or Excalidraw format. Whether you are designing onboarding flows, business processes, system logic, or SOPs, AI FlowChart helps teams move from idea to clear visual execution faster.

DEV Community: Kim Jin