Color Guessing Game
See a HEX/RGB value and pick the matching color - great for designers
100% free. Runs entirely in your browser - your files and data never leave your device and nothing is uploaded to any server.
- 10 seconds per round - faster answers score more.
- A wrong pick or a timeout costs a life. Three lives.
- Colours get closer together every stage.
About this tool
See a HEX or RGB color value and try to pick the matching color from a set of options - a great practice game for designers and developers wanting to build an intuitive feel for how color codes translate to actual visual colors.
How to use this tool
- Choose format challengePlay HEX, RGB, or mixed color-code rounds.
- Read target valueInterpret channels and intensity from the code.
- Pick matching swatchSelect closest visual color from options.
- Improve accuracyReplay rounds to strengthen color intuition.
How to play the color guessing game
In Match mode you see a colour code - HEX such as #3A7BD5 or RGB such as rgb(58, 123, 213) - and pick the swatch it describes. In Odd mode you spot the one swatch that is a slightly different colour from the rest. Easy uses very different colours, hard makes the differences small.
Read a HEX code as three pairs for red, green and blue: the higher the pair, the more of that colour. #3A7BD5 has little red, some green and a lot of blue, so it is a medium blue.
Key features
- Builds practical HEX/RGB visual literacy.
- Useful for designers and frontend developers.
- Improves fast color estimation skills.
- Fun training for branding/UI workflows.
Common uses
- Design student color training practice.
- Developer warmup for UI styling tasks.
- Creative team mini-game sessions.
- Learning channel-based color reasoning.
Tips for better results
- Memorize anchor values for primary colors.
- Estimate dominant channel before final choice.
- Practice both bright and muted palettes.
- Review wrong picks to refine mapping.
Mistakes to avoid
- Judging only brightness, not hue balance.
- Ignoring full RGB channel relationships.
- Practicing one format and skipping others.
- Rushing selection before reading code fully.
Frequently asked questions
Building an intuitive sense of what a HEX/RGB value actually looks like speeds up your workflow significantly - instead of constantly looking up or testing color codes, you develop a mental model of common values.
Check the game's specific format options - many color guessing games cover both HEX and RGB representations to build familiarity with either format.
Yes - typically your score or accuracy percentage is tracked, letting you see improvement in your color intuition across multiple rounds.
Look at the three pairs as red, green and blue: the largest pair dominates the hue, and high values everywhere mean a light colour. #E0E0FF has high values in all three with blue highest, so it is a very pale blue.
When red, green and blue are the same, no channel dominates, so the colour has no hue - only lightness. rgb(128,128,128) is a mid grey.
Recognising roughly what a code looks like lets you spot a wrong colour in CSS or a design file without opening a picker, and speeds up adjusting a palette by hand.