Online Tool Store Online Tool Store

Colour Match Game

Match a target colour by adjusting hue, saturation, and lightness, and see how close you got — a training game for colour perception.

🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.

Games

Colour Match Game

Ready

Frontend preview — no upload or external service.

Round result

Round 4: your #3B7A57 against the target #35805B — a hue error of 6 degrees and 4% lightness off, scoring 91%.

How the Colour Match Game works

  1. Look at the target swatch and adjust the sliders until they match.
  2. Compare side by side rather than glancing back and forth; simultaneous contrast makes memory unreliable.
  3. Read the per-channel error, since most people are far more accurate on lightness than on hue.

The method

Colour difference is measured per channel in HSL, with hue in degrees around the wheel and saturation and lightness as percentages.

score falls with hue error in degrees plus saturation and lightness error in points

A six-degree hue error is barely visible on a muted colour and obvious on a saturated one — which is why the same error scores differently by round.

FAQ

Does screen calibration affect this?

For matching two swatches on the same screen, hardly at all — both shift together. It matters if you compare your result against a printed or physical reference.

Why is hue harder than lightness?

Human vision has far finer discrimination for luminance than for chromatic differences, which is also why image compression discards colour detail before brightness detail.

Can colour perception be trained?

Discrimination improves with practice up to a point — largely learning to compare systematically rather than any change in the eye itself.

How we compare

FeatureOnline Tool StoreA physical setAn app-store download
Per-channel error feedback
Adjustable difficulty
No account
Works offline once loaded

Colour Match Game reports error per channel, which is what turns it from a guessing game into practice at seeing hue separately from lightness.

Explore related tools

Embed this tool

Paste this on your own site — it stays free, and every file still stays in your visitor's browser, not yours or ours.