Quackyard
  • Loading…

Hex Color Game

See a color, guess its hex code: ten levels from greys to near-miss pairs, judged by CIEDE2000.

Level 1 of 10 · Light

Greys

#rrggbb is three lights — red, green and blue — each a pair of hex digits, 00 for off and ff for full on. Equal digits make a grey, so #777777 is a middling one: the eye puts it at L* 50 of 100. Everything else in this game is a walk away from a grey.

Setting up the easels…
-- READY --Mix the color in the left frame: type its code or move the sliders, then guess. Within ΔE 5 wins the round.0 guesses · par 10
Round 1 of 5

Every guess counts. Two a round is par.

How to play

The game is a paint shop by a pond at dusk. Two easels hold framed swatches: TARGET, its code hidden as #??????, and YOURS, which repaints as you type. Below them, three jars fill as high as the red, green and blue channels, labeled in hex and decimal. On the pond, a duck swims toward a lily pad along a scale marked ΔE 40, 20, 10 and 5.

Type six hex digits into the code field, or drag the R, G and B sliders, then press Guess or Enter. Only guesses are judged.

A guess within ΔE 5 of the target, by CIEDE2000, wins the round. After each guess, chevrons or a check over each jar show which way that channel should go and how far, and the status line names the change to make first. Within ΔE 8 it reads CLOSE. A solve reveals the code and lands the duck on its pad; Enter or Next round brings the next of five rounds.

The score is guesses, fewest wins. Par is 10 a level, two a round: gold at par or better, silver up to 15, bronze beyond. Ask the duck gives up to three hints. Copy share link links to a page such as “Solved 10 of 10 Hex Color Game levels in 54 guesses.”

What you’ll learn

Ten levels, five colors each, in four chapters whose first levels are open.

  • Light. Greys reads #rrggbb as three lights, 00 off to ff full, with equal pairs making a grey. Half is not half: #808080, half the code, gives off about a fifth of white’s light.
  • Channels. One channel at a time dims pure red to #800000: same hue, less light. Two channels adds lights into yellow, cyan, magenta and orange #ff8000. Green carries the light shows that green weighs most in brightness, so #00ff00 looks far lighter than #0000ff.
  • Mixes. Warm mixes raises green under full red, from orange to gold, then lowers red for a brown. Cool mixes covers blues, teal #008080, a pale cyan tint and a purple. Level 8 keeps the channels close, so a small lead tints a grey, as in blue-grey #8091a6.
  • Near misses. Near-miss greys and Near-miss pairs set look-alikes as little as ΔE 11 apart, so each round needs its own answer.

Afterward you can judge a color’s lightness and leading channel and write its code within a few ΔE.

Good to know

The judge converts sRGB to CIELAB under D65 and takes the CIEDE2000 difference as published by Sharma, Wu and Dalal in 2005. It reproduces all 34 test pairs published with that paper to four decimal places. The game’s fixtures pin its verdicts and show why RGB distance would mislead: six steps too much green, #333933 for #333333, is ΔE 5.9 and loses, while six steps of red is ΔE 3.8 and wins.

The 50 targets are fixed. Only #rrggbb is covered: no shorthand, alpha, rgb(), hsl() or other color spaces. Your best score per level is saved in this browser; a half-played level starts over.

Hexcodle is a daily, Wordle-inspired puzzle: find the exact code in five tries, with a check or arrows on each digit. Color Master, by Harys Dalvi, runs timed rounds of typing the code for a color shown or picking which of nine colors matches a code. Hex Color Game has no clock and no daily: ten lessons, any guess within ΔE 5 counts, and feedback weighs each channel by how much it shows.

Questions

How do you read a hex color code?

Read it as three pairs of hex digits for red, green and blue, each from 00 (off) to ff (255, full on). A pair’s value is its first digit times 16 plus its second, so #ff8000 is red 255, green 128 and blue 0: orange. The three-digit #f80 is shorthand for #ff8800.

What is Delta E?

Delta E (ΔE) is a number for how different two colors look, measured in CIELAB. CIEDE2000 corrects the plain 1976 distance for how the eye weighs lightness, chroma and hue. Around 1 is the commonly cited just-noticeable difference for two patches side by side, though it varies with the colors and viewing conditions; black to white is 100.

Can people learn to guess hex colors?

Yes, to within a few ΔE, by learning to judge a color’s lightness and which channel leads. Exact codes are harder: #ff0000 and #fa0000 are only ΔE 1.0 apart.

What’s the difference between RGB and hex?

They are the same color written two ways: hex writes each channel, 0 to 255, as two base-16 digits, and rgb() writes it in decimal. In CSS, #ff8000 and rgb(255, 128, 0) are the same orange.