Color Memory
A color game that tests your eye: a color is shown for a few seconds, then you recreate it from memory with hue, saturation and lightness sliders. Each guess is scored from 0 to 100 by how close it looks (OKLab color difference). Five rounds per game, with your best total saved.
What is Color Memory?
Color Memory is a short game about how well you remember colors. You see a color for a moment. Then it disappears, and you mix it again with three sliders: hue, saturation and lightness (HSL). The closer your color looks to the original, the higher your score.
How to play
- Choose how long the color is shown: 3 seconds, 5 seconds, or Practice (the color stays visible while you mix).
- Press Start. Memorize the color until the timer runs out.
- Move the Hue, Saturation and Lightness sliders until the preview looks like the color you saw.
- Press Guess to see both colors side by side with their hex codes and your score.
- After five rounds you get a total out of 500. Your best total for each mode is saved.
How is the score calculated?
Both colors are converted to the OKLab color space, which is designed so that equal distances look like equal differences to the human eye. The score is 100 × e^(−(distance / 0.1)²), rounded. For reference, black and white are 1.0 apart. A difference of 0.02 is barely visible and scores 96; 0.05 scores 78 and 0.1 scores 37.
| Score | Comment |
|---|---|
| 95–100 | Perfect! |
| 85–94 | Excellent |
| 70–84 | Great |
| 50–69 | Good |
| 25–49 | Not bad |
| 0–24 | Way off |
Strategy
While memorizing
- Put the color into words: a hue word plus modifiers, such as "dark, slightly grey teal" or "bright orange-red". Words are much easier to remember than an image.
- Estimate the three numbers, using the hue wheel below as a reference. For lightness, very dark colors are around 20–30, medium ones around 50, and pastel ones around 70–80. The colors in this game always have a saturation of 25–100 and a lightness of 20–80.
| Hue | Color | Hue | Color |
|---|---|---|---|
| 0 | red | 180 | cyan |
| 30 | orange | 210 | sky blue |
| 60 | yellow | 240 | blue |
| 90 | yellow-green | 270 | violet |
| 120 | green | 300 | magenta |
| 150 | spring green | 330 | pink |
While mixing
- Hue first. Move the hue slider until the preview is the right kind of color. For a vivid color, a hue that is off by 10 or more costs a lot of points.
- Then lightness. Lightness mistakes are the easiest to make and very visible.
- Saturation last. Ask yourself whether the color looked vivid or greyish.
- For a greyish (low-saturation) color, the hue matters much less. Spend your time on lightness instead.
Common mistakes
- Remembering colors too vivid: most people remember colors as more saturated and more "typical" than they really were. If you are unsure, use a little less saturation.
- Comparing lightness across hues: in HSL, a yellow with lightness 50 looks much brighter than a blue with lightness 50, so do not rely on the number alone. Trust the preview.
- The background: the same color looks different on a light and a dark background. In dark mode colors tend to look brighter.
Practice mode keeps the target visible while you mix, which is a good way to learn how the three sliders work together. That also helps when you pick colors for design.
Where can I see my past games?
Open Records & history below the game. It shows your best result for each mode and your last 10 games with the date and time. They are saved in this browser only.