Hex Color Guesser
See a colour, guess its HEX code. Train your eye for design tokens.
Overview
The Hex Color Guesser is a training game that shows you a random swatch and asks you to guess its hex code, then scores how close your guess was on each RGB channel. Over time it sharpens your ability to translate between perceived colour and the numeric tokens that show up in a design-system file.
It is aimed at designers and front-end engineers who routinely review pull requests of CSS tokens, edit hex codes by hand, or want to develop a sharper mental model of how channels combine into a final swatch. Five minutes a day is enough to noticeably improve channel-level intuition.
How it works
The target is a random hex generated with a bias toward visually distinct values — pure greys and near-blacks are weighted down so most rounds are chromatic. Your guess is compared channel-by-channel and the score is the sum of per-channel differences plus a perceptual bonus computed via OKLab Delta-E.
The result screen shows the target, your guess, and the Delta-E between them, so you learn how a "12 off" guess on the green channel feels in practice. Streaks and per-channel averages persist locally so you can track which channels you over- or under-shoot.
Examples
target #ff6600
guess #ee5500 → R -17 G -17 B 0 ΔE ~6 (close)
guess #ff8800 → R 0 G +34 B 0 ΔE ~9 (over on green)
guess #cc3300 → R -51 G -51 B 0 ΔE ~22 (too dark)
FAQ
Why train on hex specifically?
Hex is the canonical form in most codebases and pull requests. Building intuition for hex values makes code review faster and helps catch the typo where someone wrote #f60 and meant #0f6.
How are scores calculated?
The naive score is the sum of absolute differences across the three RGB channels (0–765 total). The perceptual score uses OKLab Delta-E, which rewards guesses that look right even when their channel values are not perfect matches.
Is there a difficulty setting?
The default mode shows the full range of chromatic colours. Limit the target to pastels, neons or earth tones to focus on a specific lightness/chroma band.
Does it help me memorise CSS named colours?
It is hex-only. For named colours, use the colour-name dictionary tool, which lists every CSS keyword with its swatch.
Will this make me better at picking colours from a screenshot?
Yes, indirectly. Recognising hex from a swatch trains the same channel-by-channel perception that helps when reverse-engineering colours from a reference image.