Guess the Color
Read a hex code and pick the swatch it matches. Three difficulties, each closing to a gap your eye can still actually resolve.
Which swatch is this color? Press 1, 2 or 3 if you prefer the keyboard.
Being off by ten is not the same as being off by ten
The obvious way to score a guess is the distance between the two RGB triples. That treats all three channels as equal and every region of the colour space as equal, and neither is true.
Take the same step of 20 and apply it to mid grey, one channel at a time. All three are the identical numeric distance from the target, and they are not equally wrong to look at:
| Channel moved by 20 | RGB distance | How different it looks |
|---|---|---|
| red | 20 | 8.3 |
| green | 20 | 15.0 |
| blue | 20 | 11.5 |
Missing by 20 in green is 1.8 times as visible as missing by 20 in red, because green carries roughly 71% of perceived brightness and red only 21%.
Sweeping the whole colour cube makes it much starker. The same numeric step of 20 produces a perceptual difference as small as 0.56 at rgb(0, 225, 225) moving red, and as large as 19.83 at rgb(0, 15, 60) moving green — a 35-fold range for an identical change. So two players who score the same on RGB distance can be very differently close, and part of what the score measures is which channel they happened to miss.
And there is a floor below which no guess is better
A perceptual difference of about 2.3 is roughly where two colours become distinguishable side by side. Working out how far a guess can sit from the target before it crosses that line, sampled across the whole cube: about 7 on every channel, and up to 9 in the least sensitive regions.
That works out to roughly 3,375 colours surrounding any target that genuinely cannot be told apart from it — about 0.020% of the 16.8 million available. Tiny as a share, and it is exactly the gap between a perfect score and a near-perfect one.
Which means a guess that is "off by four" is not off at all in any sense a person can perceive. Below that threshold a scoring system is ranking noise rather than skill, and chasing the last few points is chasing something nobody could see even with both colours in front of them.
It also decides how the game above has to be built, which is the next panel. You are not learning to read RGB values; you are learning where your eye is reliable and where it is not, and the answer varies enormously across the colour space.
Why the wrong swatches are placed in deltaE, not in RGB
The easy way to build a round is to take the answer and jitter its RGB channels by some amount — 90 to begin with, closing to 30 as the streak grows. It reads like a difficulty ramp and it is not one, for the reason the table above gives: the same numeric step is worth 35 times more perceptual difference in one part of the cube than another. A fixed jitter does not set the difficulty; it sets a lottery ticket for the difficulty.
The consequence is worse than uneven. Jittering by 30 puts a distractor within 2.3 of the answer — the threshold from the previous panel, below which two colours simply cannot be told apart — in 11.3% of rounds, one in 9. Those rounds are not hard. They are coin tosses wearing the costume of a hard round, and by the previous panel's own argument they rank noise rather than skill.
So the gap is chosen first, in deltaE, and a colour is then found that sits at it: a random direction out from the answer, and a bisection along that ray for the point at the requested distance. Every difficulty stops above 2.3, and no two swatches in a round are ever closer to each other than the floor, so every round can be won by looking at it. The number above the swatches is that gap, so you can watch it close.
| Difficulty | Starts at | Closes to | Correct answers to get there | Times the threshold |
|---|---|---|---|---|
| Gentle | 45 | 12 | 14 | 5.2× |
| Standard | 30 | 6 | 12 | 2.6× |
| Brutal | 16 | 3.5 | 10 | 1.5× |
Each difficulty keeps its own board, because closing to a gap of 12 and closing to a gap of 3.5 are different tasks rather than better players. Brutal stops at 1.5 times the threshold, which is still above it — but not by enough that your monitor, the ambient light and the angle you are sitting at stop mattering.
How to use
- Pick a difficulty: Gentle, Standard or Brutal.
- Read the hex code shown.
- Pick the swatch you think matches, by click or by pressing 1, 2 or 3.
- Watch the gap number shrink as your streak grows.
- Play regularly — the skill builds quickly.
Frequently asked questions
What does a hex colour actually encode?
Three pairs of hexadecimal digits giving the red, green and blue channels, each from 00 to FF — that is 0 to 255. So FF0000 is full red, and 808080 is a mid grey with all three channels equal.
How do I read a hex code at a glance?
Compare the three pairs. The largest pair dominates the hue, equal pairs give a grey, and the overall magnitude gives the lightness. FF8800 has a lot of red, some green and no blue, which is orange — and that reasoning works quickly with practice.
Why do the shorthand three-digit codes exist?
Each digit is doubled, so F0C is identical to FF00CC. It only works where all three pairs happen to repeat, which limits it to 4,096 of the 16.7 million possible colours — convenient when it applies and not a general shorthand.
Is this a useful skill or a party trick?
Genuinely useful if you work with CSS. Recognising roughly what a hex value looks like without opening a picker speeds up reading other people's stylesheets considerably, and spotting that two values are near-identical is how duplicate colours get found.
Why is it harder with dark colours?
Because human colour discrimination is poorer in dark tones, and the numeric differences that matter are compressed. Distinguishing 111111 from 1A1A1A by eye is genuinely difficult, and that is a property of vision rather than a failure of practice.
Does the display affect the game?
Somewhat. An uncalibrated or heavily saturated screen shifts what you see, which affects the harder rounds. It is a game rather than a measurement, so it matters less here than it would in colour work.
How is the difficulty actually set?
By perceptual distance, not by RGB steps. Each wrong swatch is placed at a chosen deltaE from the answer — a random direction out from the answer colour, then a bisection along that ray to find the point sitting at exactly the requested distance. The gap starts wide and closes by a fixed amount with every correct answer, and the current gap is shown above the swatches so you can watch it narrow.
Why not just randomise the RGB values a bit?
Because RGB distance and visible difference are not the same thing, and the gap between them is large. The same 20-step nudge is worth about 35 times more perceptual difference in one part of the colour cube than in another. Jittering the channels by 30 — which is what a naive difficulty floor looks like — puts a swatch closer to the answer than the threshold at which two colours can be told apart at all in roughly 11% of rounds, one in 9. Those rounds are not difficult, they are coin tosses, so the game does not generate them.
What do Gentle, Standard and Brutal change?
Where the gap stops closing. Gentle settles at 12, Standard at 6 and Brutal at 3.5. The threshold at which two colours stop being distinguishable side by side is about 2.3, so every setting stays above it and every round can be won by looking at it — but Brutal leaves little margin, and your monitor and the light in the room start to matter. Each difficulty keeps its own leaderboard, because they are different tasks rather than better players.
What is deltaE?
A measure of how different two colours look, rather than how different their numbers are. It comes from converting both colours into CIELAB, a space built so that equal distances correspond roughly to equal perceived differences, and then measuring the straight-line distance. About 2.3 is the point where a difference becomes noticeable with both colours side by side; 6 is comfortable; 12 is obvious at a glance.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.