color
A color appears. You name it.
Most people can't remember colors anymore.
See how good (or bad) you are at it.
Set the number of attempts anywhere from 1 to 10
or go limitless and play until you decide to stop.
A color appears. You name it.
Most people can't remember colors anymore.
See how good (or bad) you are at it.
Set the number of attempts anywhere from 1 to 10
or go limitless and play until you decide to stop.
Delete this record?
A color fills the screen for a few seconds. Memorize it. When it disappears, use the three sliders to recreate it as accurately as you can.
The sliders control Hue, Saturation, and Brightness. Drag them up or down to mix your color, then hit the submit button when you're ready.
Each game runs from 1 to 10 rounds, or limitless. Your score from each round is added to a total shown at the end.
Difficulty controls how long the color is shown before it disappears.
The color shown is always randomly generated, hue is completely random, while saturation and brightness are kept in a visible mid-range so nothing is too dark or too washed out.
Each round is scored 0–10. Colors are compared using CIEDE2000, a color science formula that measures how different two colors actually look to the human eye, not just how far apart their values are.
Getting the hue right - the color family - matters most. Nail the hue and you recover points even if brightness or saturation are off. On grays, hue doesn't count.
ColorMatch is a color memory game. A color fills the screen for a few seconds, you memorize it, then recreate it from memory using three sliders that control hue, saturation, and brightness. It sounds simple. It's not.
Designed and built by Culbida Mihail, a student, over the course of about a month. The CIEDE2000 algorithm was implemented from scratch in JavaScript, no libraries, no shortcuts. Every detail, from the scoring curve to the transitions, was built solo.
Every round, a color is generated with a fully random hue (0–360°). Saturation and lightness are kept between 20% and 80% intentionally avoiding extremes that would be unfair or invisible. No black, no white, no neon.
Three possible colors - all valid outputs of the generator. Always visible, always fair.
The obvious approach would be to measure how far off each slider is and call it a score. But that produces results that feel wrong, because human eyes don't see color the way numbers work.
Same 10% shift - dark range
Looks very different
Same 10% shift - light range
Barely noticeable
40° hue shift - saturated
Completely different color
40° hue shift - gray
Practically identical
The same numerical difference on a slider can look dramatic or invisible depending on context. Raw slider math would reward and punish the wrong things.
Scoring starts by converting both colors from HSL to CIELAB, a color space where equal numeric distances correspond to equal perceived differences. From there, CIEDE2000 - the most accurate perceptual color difference formula available, compares the two values and returns a single number called ΔE, representing how far apart the colors look to a human eye. That ΔE is then mapped to a score between 0 and 10 using a curve that rewards precision near the top and compresses errors at the bottom. Finally, two hue-based adjustments are applied: a small recovery bonus if your hue was close, and a penalty if it was significantly off on vivid colors. The result is clamped and rounded to two decimals.
Difficulty controls how long the color is visible before the sliders appear.
Sessions run from 1 to 10 rounds, or limitless. Stop whenever you want. Scores are summed at the end and can be saved locally with your initials.
Training mode removes the timer and scoring. The color stays visible while you drag the sliders in real time. Useful for understanding how hue, saturation, and brightness interact before playing properly.
Whether you have a bug to report, a suggestion, or just want to say something - feel free to reach out.
Email: clbidamihai@gmail.com
Replies in less than 24 hours.
The obvious approach is to measure how far off each slider is. But that produces results that feel wrong. A 10% lightness shift looks dramatic in dark colors and invisible in light ones. A 40° hue shift on a gray is undetectable; on a vivid blue it's a completely different color. Raw slider math would reward and punish the wrong things.
Both colors are converted from HSL to CIELAB, a color space specifically designed so that equal numeric distances correspond to equal perceived differences. This is the foundation everything else is built on.
The two CIELAB values are compared using CIEDE2000, the most accurate perceptual color difference formula available. It accounts for known quirks in human vision - we're more sensitive to hue shifts in blues, less sensitive to chroma differences in dark colors, and so on. The result is a single number called ΔE: the perceptual distance between the two colors.
ΔE ≈ 2
Nearly identical
ΔE ≈ 18
Noticeable shift
ΔE ≈ 60
Wrong color
A raw ΔE is a distance, not a score. It's passed through a curve that maps it to 0-10. The midpoint sits at ΔE = 25.25, giving a score of exactly 5. The curve rewards precision near the top and compresses bad guesses toward zero - the difference between a 9 and a 10 is much harder to achieve than the difference between a 1 and a 2.
Getting the right color family is the hardest part of the game, so two hue-based corrections are applied on top of the base score.
If your hue was within ~25° of the target, you recover a portion of the points lost from saturation or brightness errors. On grays, recovery fades to zero - hue is visually meaningless on desaturated colors.
If your hue was off by more than 30° on a vivid color, a small penalty is applied. The 30° buffer means minor hue errors are never punished. Guessing the wrong hue on a gray costs nothing.
Adjust the sliders and watch the score update in real time.
Scoring above 9 consistently is rare. The curve is steep near the top, going from a 9 to a 9.5 requires cutting your perceptual error in half. Human color memory simply isn't that precise, which is what makes it worth chasing.
ColorMatch doesn't collect any data. The game runs entirely in your browser. No server, no accounts.
We use your browser's local storage to save your preferences sound, difficulty, and number of attempts, as well as any records you choose to save. This data never leaves your device.
Saved scores stay exclusively on your device. They are not sent anywhere, not visible to others, and can be deleted at any time from within the game.
ColorMatch is a general-audience game. We do not collect personal information from anyone, including children.
Questions or concerns? Reach out at clbidamihai@gmail.com