Color Guesser

a few goes · their word

Daily color-guessing puzzles that are fun and engaging

built with Claude Code · Claude Opus 4.5 · by beingmani · Aug 19, 2026

screenshot of Color Guesser
open live demo ↗demos open in a new tab · never embedded here
the prompt · exactly as sent
Build a website called **ColorGuesser** 

The goal is a simple, addictive colour guessing game:

**See a colour → guess it → get a score → try again.**

### Main screen

Create a clean, minimal game interface with:

* A large target colour block
* A colour picker underneath
* HEX value of the player's selected colour
* A prominent **GUESS** button
* Current round / score

The target colour should be the main visual focus.

### Game flow

When the player clicks **GUESS**:

* Compare their selected colour with the target colour
* Calculate how close they are using a proper colour-distance calculation
* Give them a score from **0–100**
* Reveal the target HEX and their HEX
* Show a short message based on their score
* Show a **NEXT COLOUR** button

Example:

**96 / 100**

"That's really close."

Target: `#A7C4D8`
Your guess: `#A8C5D7`

Clicking **NEXT COLOUR** immediately starts another round.

### Colour picker

Use a simple custom colour picker with:

* Hue
* Saturation/brightness
* HEX input
* Live colour preview

The selected colour should update instantly.

### Game modes

Include three simple modes:

**Classic** — 5 rounds and a final score.

**Endless** — keep playing and track the best score.

**Daily** — one colour challenge per day.

For now, store scores and preferences using `localStorage`. No accounts or backend.

### Design

Make it feel very close to ColorGuesser.xyz:

* Minimal
* Clean
* Colour-focused
* Lots of whitespace
* Large colour areas
* Simple typography
* Subtle rounded corners
* Smooth transitions
* No unnecessary cards or dashboard UI

The colour should always be the hero.

Make it responsive and particularly good on mobile.

### Animations

Add small, satisfying animations:

* Smooth colour transitions
* Score counting animation
* Button press animation
* Result reveal
* Subtle success animation for very high scores

Respect `prefers-reduced-motion`.

### Tech

Use:

* React
* TypeScript
* Vite
* Tailwind CSS
* No backend
* No authentication

Keep the code clean and simple.

Most importantly, **don't overbuild it**. The experience should feel like a tiny polished web game that you can understand and start playing within 5 seconds.

$ open in your agent (prompt prefilled, you press enter) or copy it raw · free forever

where it broke

Initial version was working where it perfected the logic of the game, I had to tweak the scoring system/Algorithm to make it close as i want it to be. Apart form the logic, I re-worked on the design to match what i had in my mind.

the facts

goesa few goes · self-declared

built withClaude Code · Claude Opus 4.5

listedAug 19, 2026

chatClaude Code doesn't show chats to outsiders

this is what the maker told us. we check that the link loads. that's all.

something off about this build? tell us →

$five vibe-coding tips + what died. thursdays.