Color Matching Games to Train Your Eye: Hue and Brightness

Color matching games train your eye by asking you to find the closest shade to a target color. Each round shows you how small the differences between colors can be. Three properties describe every color: hue, saturation and brightness. Once you know these, you can judge why two colors look alike or different. These games are for practice and fun. They are not a medical test of color vision.

The three properties of a color

Every color on a screen can be described with three values.

• Hue is the color family, such as red, orange, green or blue. On a color wheel, hue is an angle from 0 to 360 degrees.
• Saturation is how strong or pure the color is. A high saturation looks vivid. A low saturation looks grey or muted.
• Brightness is how light or dark the color is. A low brightness looks close to black. A high brightness looks close to white.

Designers often call the last two lightness and saturation, using the HSL model. The model uses the same three ideas, and it is easy to read with numbers.

Worked example: two blues in HSL

Take two blues. Both have hue 210 degrees (a blue) and saturation 60 percent. The first has lightness 50 percent. The second has lightness 55 percent.

To see the screen color, convert each one to RGB, the red, green and blue values from 0 to 255.

Blue 1: HSL (210, 60%, 50%)

1. Chroma: C = (1 − |2 × 0.50 − 1|) × 0.60 = (1 − 0) × 0.60 = 0.60
2. H′ = 210 ÷ 60 = 3.5, which falls in the range from 3 to 4. The intermediate value X = C × (1 − |3.5 mod 2 − 1|) = 0.60 × (1 − 0.5) = 0.30.
3. For this range, the first RGB values are (0, X, C) = (0, 0.30, 0.60).
4. Add m = L − C ÷ 2 = 0.50 − 0.30 = 0.20 to each channel: (0.20, 0.50, 0.80).
5. Multiply by 255: (51, 128, 204).

Blue 2: HSL (210, 60%, 55%)

1. C = (1 − |2 × 0.55 − 1|) × 0.60 = (1 − 0.10) × 0.60 = 0.54
2. X = 0.54 × 0.5 = 0.27
3. (0, X, C) = (0, 0.27, 0.54)
4. m = 0.55 − 0.27 = 0.28, so the values are (0.28, 0.55, 0.82).
5. Multiply by 255: (71, 140, 209).

The two blues have the same hue and saturation. Only lightness changed by 5 points, and the RGB values moved by about 20 on the red channel, 12 on the green and 5 on the blue. Those numbers show how a small change in one property can make a shade look different.

Why some colors are hard to tell apart

Some pairs of colors look alike for several reasons.

Your own sensitivity also matters. Colors may look different from one person to another, and the same person can judge colors differently from day to day. A game can show you how your judgment changes with practice, but it cannot tell you why.

How to practice with color games

Use the same steps each time, so your results are comparable.

1. Sit in steady light, and keep the screen brightness the same.
2. Play one mode at a time, at one difficulty level.
3. Look at the target for a moment, then make your guess.
4. Note the score and the conditions in a simple log.
5. Repeat after a few days, and compare the trend.

Practice in short sessions. Your eyes and attention tire, and a tired session teaches little.

How Clash Palette trains color judgment

Clash Palette is a color matching game for iPhone and iPad. You study a target color, make your guess and see how close you came. The game judges accuracy by perceptual color difference. This means the score follows the gap your eye sees, not only the numbers in the color code.

The game has six modes. Classic gives ten untimed rounds, which suits a first session. Speed adds a fifteen second countdown to each round. Blitz gives one minute with no round limit. Zen removes the timer, and Challenge gives five rounds of twenty seconds each. Marathon is a long run of twenty-five rounds. Zen, Challenge and Marathon are part of Premium.

Four difficulty levels change the size of the gaps. Easy shows direction hints for the red, green and blue values. Hard narrows the gaps between colors, and Expert asks for the most exact judgment. Fifteen palettes add variety, from warm sunset tones to cool ocean blues.

When a round ends, the result screen shows a HEX or RGB value for each color. Tap a value to copy it. This helps if you want to check a color in a design tool.

Clash Palette is free to play and shows ads to players without Premium. Premium removes all ads. The game works offline, and your progress stays on your device.

For the difference between a game and a clinical test, read How Good Is Your Color Vision?. A game score is entertainment. It does not measure your eyesight or diagnose a color vision difference.

Common mistakes

• Playing on a different screen or in a different light each time. Keep the conditions the same.
• Comparing your score with a friend's score on a different device. Compare your own trend instead.
• Playing for a long time when you are tired. Stop after a short session.
• Treating a high score as proof of good eyesight. It shows how you did in that game only.

Try Clash Palette in good light, play one Classic round, and write down your score before you stop.

Frequently asked questions

Do color matching games make your color vision better?

Practice can improve how well you do in a game, because you learn the task. Whether this carries over to everyday color judgment is not something a game can prove. Treat the game as practice and fun.

Are color matching games a test for color blindness?

No. A color game is not a medical test. A color vision test given by an eye care professional is the only way to check for a color vision deficiency.

Why do my scores change from day to day?

Screen brightness, room light, tiredness and attention all change how colors look. Compare results only when the conditions match.

What should I learn first about color?

Start with hue, the color family. Then learn saturation and brightness. These three terms help you describe a color and explain why two shades look different.