A color code quiz is a browser challenge that asks you to read a displayed color swatch and type its matching RGB or HEX value, then grades you on how close each red, green, and blue channel came to the target. In the RGB Guessing Game, that task plays out across exactly five rounds, with a successful swatch worth 200 points and a perfect finish worth exactly 1,000. Each round draws the active color into a Canvas element so the page text, ARIA label, and inline style do not reveal the answer directly; you simply look at the swatch, decide whether to enter three decimal channels from 0 to 255 or a CSS HEX code such as #AABBCC, and submit your estimate. The game then returns three per-channel absolute errors, the largest of those errors, and the sum of all three. A guess passes only when every channel error is 12 or less and the three errors together total 24 or less; both thresholds are inclusive and both must hold. After two distinct wrong colors, the round locks until you Restart, and a fifth successful round completes the run.
What "Color Code Quiz" Means in Browser Play
Color code quizzes come in several shapes. Some present a hex string and ask you to name the color. Others show a swatch and ask you to reproduce its code. The browser variant that the RGB Guessing Game implements sits in the second family and treats color identification as a numeric estimation problem rather than a vocabulary recall task. You are not asked which color is "forest green" or "cerulean"; you are asked to type three numbers that, when reinterpreted as red, green, and blue light, render the swatch sitting in front of you.
This framing turns the quiz into a measurement exercise. Each round is a fresh calibration: the target is hidden in the Canvas pixel buffer, your estimate is parsed into a normalized integer tuple, and the only public feedback is the absolute error for each channel. That makes the game accessible to anyone who can read a swatch and operate a number field, with no color-name vocabulary required and no slider manipulation to learn. If you have used the decimal rgb() notation or the CSS #RGB shorthand elsewhere on the web, the input rules will already feel familiar; if not, the rest of this article walks through them.
How the RGB Guessing Game Round Works
Each round follows the same fixed sequence. There is no time pressure and no progressive difficulty; the active swatch is the only thing that changes between rounds, and five successful rounds produce the same 1,000-point score every time.
- Study the current Canvas swatch and decide whether to enter decimal RGB channels or a CSS HEX string.
- Type three whole numbers between 0 and 255, or a HEX string in the form #RGB or #RRGGBB, including the leading hash and any combination of upper- or lower-case digits.
- Press the Submit action, or press Enter from the form, to check your estimate against the hidden target.
- Read the returned feedback: each channel's absolute error, the largest single error, and the sum of all three errors.
- Repeat steps 2 to 4 with a tighter estimate if any error exceeds 12 or the total error exceeds 24, until a passing guess awards 200 points and unlocks the next round.
- After five passing rounds, the game reaches a terminal completed state with a final score of exactly 1,000.
Reading the Per-Channel Error Feedback
The feedback after each submission is intentionally numeric. The game reports three absolute errors, defined as |target red - guessed red|, |target green - guessed green|, and |target blue - guessed blue|. It also surfaces the largest of those three values and their sum. Suppose the hidden target is the tuple (200, 150, 100) and you type (212, 158, 100). The red error is 12, the green error is 8, the blue error is 0, the largest error is 12, and the total error is 20. Both thresholds hold: every channel error is at most 12 and the sum of the three errors is at most 24, so this guess passes and awards 200 points.
The same target with a guess of (212, 158, 90) produces a red error of 12, a green error of 8, and a blue error of 10. The largest error is still 12 and the total error is 30, which crosses the 24 ceiling even though no single channel is wrong by more than 12. That guess fails because the dual-threshold rule requires both conditions to be satisfied together; a single large mistake cannot be hidden behind two exact channels. The same logic protects against the opposite failure mode, where three small-but-non-zero mistakes pile up past 24.
RGB vs HEX Input: Same Score, Same Threshold
The RGB Guessing Game accepts two equivalent notations and treats them as one input after parsing. Decimal mode wants three base-10 integers in the closed interval [0, 255]. HEX mode wants a string that begins with # and is followed by either three or six hexadecimal digits. The three-digit form duplicates each digit, so #ABC expands to #AABBCC; the six-digit form is used as written. Hexadecimal digits are case-insensitive, matching the W3C CSS Color Module Level 4 hexadecimal notation rules that the parser follows, and MDN's hex-color reference confirms the same three- and six-digit shorthand behavior.
| Format | Accepted syntax | Example | Channel range |
|---|---|---|---|
| Decimal RGB | Three whole numbers separated by channels | 200, 150, 100 | 0 to 255 inclusive |
| Short HEX | # followed by three hex digits | #C86 → #CC8866 | Each digit 0-F, duplicates |
| Full HEX | # followed by six hex digits | #C89664 | Each pair 00-FF |
Both formats are converted to the same red, green, and blue integer tuple before scoring and before the attempt-deduplication logic runs. That has two practical consequences. First, you can switch between RGB and HEX at any point without losing progress, which is useful when a swatch is easier to express in one notation than the other. Second, if you fail a round once with 200, 150, 100 and then re-enter the same color as #C89664, the second attempt does not consume your second chance, because the normalized tuple is identical. Only a genuinely different color counts as a second distinct miss.
Scoring, Repair Attempts, and Deadlock
A passing swatch awards exactly 200 points, and the game has exactly five fixed rounds. Five successful rounds therefore produce a deterministic final score of 1,000, with no bonus, penalty, or partial credit for partial closeness. A round that does not pass remains open for one repair attempt. That repair attempt is the second distinct wrong color. If you type a color, see the feedback, and then type the same color again - even switching from decimal RGB to the equivalent HEX form - the second submission still represents the same normalized tuple and does not count as a distinct miss. A second genuinely different wrong color locks the round in a deadlock state until you press Restart, and the score for that round stays at zero.
Invalid syntax, missing channels, fractions, negative values, and any entry above 255 are rejected as parse failures rather than scored as misses, so they do not consume your repair attempt and do not change the score. Once a round is completed or deadlocked, further edits, mode switches, and submissions return without altering business state, which keeps the terminal conditions atomic and predictable.
Keyboard, Mobile, and Boss Overlay Controls
The interface exposes a native form layout: Tab moves focus between the format buttons, the input fields, and the Submit action, and Enter pressed from inside the form submits the current estimate. Each input keeps a mobile-friendly touch height, and the layout collapses to a single column on narrow screens. All gameplay state - the active round, the running score, the best score, and the deadlock status - stays in the browser. There is no upload, no account, no model call, and no remote color service; if you want to compare your color recognition style against an adjustment-based challenge, the Color Mixing Game's RGB and CMY walkthrough covers that adjacent format. When a shared Boss overlay is visible, input edits, mode changes, submission, and Restart all return without changing local or scored state, so the overlay acts as a true guard rather than a cosmetic break.
For a deeper look, see Play Rock Paper Scissors Online: Win 1,000 Points.