Color Matching Game

How to play

A random target color appears on the left, and the box on the right shows the color your sliders are making right now. The red (R), green (G) and blue (B) sliders each run from 0 to 255 and reset to the midpoint, 128, at the start of every round. When your color looks identical to the target, press “Submit this color.” At that moment the game reveals the target’s exact RGB values, the values you chose, and the difference per channel (yours minus the target). A plus sign means you pushed that channel too high; a minus sign means you left it too low. Use that feedback to calibrate your eye for the next round. There are five rounds, so the highest possible total is 500 points. The game waits for you to press “Next round,” so there is no timer and you can study the result at your own pace.

How RGB colors are made

Screens create color by mixing red, green and blue light at different intensities. This is additive mixing: unlike paint, where every extra pigment makes the result darker, adding light makes the result brighter. Each channel is stored in 8 bits, which gives 256 levels (0 to 255), so the number of distinct colors is 256 × 256 × 256 = 16,777,216. All three channels at 0 gives black, all at 255 gives white, and three equal values give a shade of gray. Full red plus full green is yellow (255, 255, 0), green plus blue is cyan (0, 255, 255), and red plus blue is magenta (255, 0, 255). If you learned color mixing with paint, those results can feel backwards at first, which is exactly why the game is a useful exercise. On the web the same values are written in hexadecimal as #RRGGBB, two digits per channel; for example (200, 80, 40) becomes #C85028. To translate between formats, try the Color Converter.

How the score is calculated

For each round the game takes the absolute difference between your value and the target value on all three channels and adds them up. That total runs from 0 (a perfect match) to 765 (the farthest possible pair, such as pure black against pure white). The score is 100 − total difference ÷ 765 × 100, rounded to the nearest whole number and never below 0. In practice every single step you are off on one channel costs about 0.13 points. The table below runs that formula to show how much total error each score allows.

Notice how forgiving the middle of the scale is and how strict the top is. A score of 90 allows a total error of 80, roughly 27 steps per channel, which is about 10% of the 256-step range. Getting 99 needs a total of 11 or less, around 4 steps per channel, and at that level you are separating colors that most people cannot tell apart by eye.

Three worked examples

• Target (200, 80, 40), submitted (180, 100, 60): the differences are 20 + 20 + 20 = 60, so the score is 100 − 60 ÷ 7.65, which rounds to 92. Missing every channel by 20 still lands in the low 90s.
• Target (255, 0, 0), pure red, submitted without touching the sliders at (128, 128, 128): 127 + 128 + 128 = 383, which scores 50. Extreme, saturated targets sit farthest from the midpoint where every round starts, so they score lowest if you do nothing.
• Target (30, 200, 90), submitted (60, 170, 90): 30 + 30 + 0 = 60, a score of 92. Getting one channel exactly right helps only a little, because the other two errors count in full.

For a baseline, if you submitted every round with the sliders untouched, your average score over all 16,777,216 possible targets would be about 74.9. So roughly 75 is the “did nothing” line, and everything above it is real skill.

Tips for matching faster

Trying to line up three sliders at once is hard, so start by naming the dominant channel. A reddish target needs a high R; a light, pastel target has all three channels high and close together; a dark, muddy target has all three low. The closer the three values are to each other, the more neutral (gray) the color looks, so if the target seems washed out, pull the channels toward each other. Move one slider at a time and, after each move, compare your swatch with the target swatch side by side. It is also commonly said that the eye is relatively sensitive to differences in green, so an error in G may look worse than the same error in R or B. The score, however, treats all channels equally, so how bad a mismatch looks and how many points it costs do not always agree.

Your surroundings matter too. Screen brightness, night-shift or blue-light filters and monitor calibration all change how a given value looks, and the color around a swatch can shift how you perceive it (an effect known as simultaneous contrast). That is why scores vary even for the same person on the same device, and why comparing scores across different screens is not meaningful. For background on how colors relate to each other, the Color Palette Generator lets you see hue relationships by changing a single base color.

A practice routine that works

In your first few games, ignore the score and read the signs in the result table. If all three differences are positive you made the color too bright overall; if all three are negative, too dark. Mixed signs usually mean you picked the wrong hue family. For instance, a positive R with a negative B means your color leans redder than the target, while a negative G on its own means you left out green and drifted toward purple. Keeping a mental note of which direction you habitually miss is more useful than any single score. Next, try fixing brightness first by moving the strongest channel, then adjust the ratio between the other two. A reasonable long-term goal is a steady 90 or higher, which allows about 27 steps of error per channel and is realistic by eye on a decent screen. Beyond that, results depend heavily on your display and eye fatigue, so compare only sessions played on the same device at a similar time of day.

Limits worth knowing

• The formula adds simple per-channel differences, which is not the same as how different two colors look to a human. A small error in a dark color can look bigger or smaller than the same error in a light one.
• Targets come from the browser’s Math.random, so every game is different, but the generator is not meant for security purposes. Scores and history are not saved or sent anywhere; reloading the page starts a fresh game.
• This is a casual color-sense game and not a test for color vision deficiency. If you suspect trouble telling colors apart, the Color Blindness Test offers an informal screen, but only an eye-care professional can diagnose it.

Frequently Asked Questions

Related tools

• Color Palette Generator: build harmonious palettes from one base color
• Color Converter: switch between RGB, HEX and HSL values
• Color Sequence Memory Game: train your color memory
• Color Blindness Test: an informal self-check for color vision