Guess the Hex Color Code Game — Free JS Snippet

Reading hex colour codes fluently — glancing at #3B82F6 and having a rough sense it's a mid-blue — is a skill most front-end developers pick up slowly through repetition. This snippet turns that repetition into a genuine quiz: a random colour swatch is shown, and the player must pick its exact hex code from four options, three of which are deliberately close, plausible near-misses rather than obviously wrong colours.

How hex codes encode RGB values

A CSS hex colour like #3B82F6 is three two-digit hexadecimal numbers packed together, one each for red, green, and blue: 3B, 82, and F6. Each pair ranges from 00 (0 in decimal, no intensity on that channel) to FF (255 in decimal, full intensity), because two hex digits give exactly 16 x 16 = 256 possible values (0-15 per digit, 0-255 combined). randomHex() generates a colour by picking three independent random integers in the 0-255 range with Math.floor(Math.random() * 256) and converting each to a two-digit uppercase hex string with toHexPart(), which calls .toString(16) (base-16 conversion) and .padStart(2, '0') to guarantee a leading zero for values below 16 (so decimal 5 becomes 05, not just 5, keeping every channel exactly two characters).

Generating decoys that actually test color literacy

A multiple-choice quiz is trivial if the wrong answers are wildly different colours — anyone can spot that #3B82F6 (blue) doesn't match a red swatch without reading a single digit. The real test is distinguishing #3B82F6 from #3B82D8 or #2E82F6. makeDecoy() builds each wrong answer by taking the correct colour's actual RGB channels (extracted with hexToRgb(), which slices the hex string into three two-character substrings and parseInt(..., 16)s each one back to a 0-255 integer), picking one of the three channels at random, and nudging it by a random signed offset between 18 and 47 ((Math.random() < 0.5 ? -1 : 1) * (18 + Math.floor(Math.random() * 30))), clamped back into the valid 0-255 range. That offset range is deliberately tuned: large enough that the resulting swatch really is a distinguishably different colour if you looked at it side-by-side, but small enough that its hex string looks superficially similar to the real one, forcing genuine digit-by-digit comparison rather than colour memory alone. A dedup loop guards against ever generating a decoy that collides with the real answer or another decoy.

Fisher-Yates shuffling for fair answer positions

Once the correct hex and three decoys exist, shuffle() runs a standard Fisher-Yates shuffle (iterating from the last index down to 1, swapping each element with a random earlier one) so the correct answer's position among the four buttons is different every round — without this, a player could learn to always click the same button position rather than actually reading the colour.

Scoring, streaks, and immediate feedback

Every answer immediately disables all four option buttons to prevent double-clicking, then flashes the clicked button green (.correct-flash) or red (.wrong-flash); on a wrong answer, the actual correct button is also highlighted green so the player learns the real value regardless of outcome. score and rounds track a running "X / N correct" ratio, while a separate streak counter increments on consecutive correct answers and resets hard to zero on any miss — rewarding sustained accuracy rather than just overall percentage, and giving players a reason to keep playing to beat their own best run.