Colour memory game

In a timed game every colour passes through the same three steps. It fills the board while a countdown runs, then disappears, and three sliders take its place. They start at a random setting, never at the answer, so each colour has to be built from what you remember. Pressing Done compares your colour with the one shown and turns the gap between them into points.

1. Pick a game, Today's colours, Free play or Flag colours, and tap Start. Colours are drawn at that moment and never while the page loads.
2. Memorise the colour while the countdown runs in tenths of a second. Today's colours shows each one for 5 seconds.
3. Move the three sliders until the swatch on the board matches the colour you hold in mind. Each slider's track shows the colours that slider alone would give.
4. Press Done to see the points, a one word verdict, the difference in ΔE, a line for every slider that was out and the target colour beside yours.
5. Go on to the next colour. After the last one, the result panel adds up the game out of 50 and gives the average difference.

Copy result puts a short line on the clipboard with the total, a link and one coloured square per colour. A square is green from 8 points, yellow from 5 and red below that. The game and the viewing time stay fixed until the game ends, so nobody can switch to an easier option halfway through.

Points depend on a single number: how far the colour you built lies from the target colour, measured with a standard colour difference formula.

Every colour is scored from its Delta E (ΔE), one figure for how different two colours look. The game calculates it with CIEDE2000, the formula the International Commission on Illumination publishes as ISO/CIE 11664-6:2022. Both colours are first converted from the sRGB values sent to the screen into CIELAB. That space describes a colour by its lightness, its chroma (strength) and its hue angle. The difference then becomes points through the curve 10 × e^(−(ΔE ÷ 20)^1.3), rounded to one decimal. A difference too small to notice keeps almost all 10 points. A difference of 20 keeps 10 ÷ e, about 3.7, and a wild guess earns close to nothing. The game total is the sum of the five rounded scores, so it always matches what the rounds showed. No standard defines this curve or the verdicts: both are the site's own choices.

A difference of 1.0 still earns 9.8 points, while 40.0 leaves 0.9.

Take a soft blue shown at HSB 210°, 40%, 80% (#7AA3CC) and rebuilt as 222°, 52%, 70% (#5672B3). The difference comes to ΔE 16.5, worth 4.6 points and the verdict "Some way off". The feedback prints "Too dark: brightness 10 points low", "Too vivid: saturation 12 points high" and "Hue off by 12°".

A good score is one that beats your own earlier games in the same mode, because no published average or norm exists for this game. The verdict under each colour gives a rough sense of scale.

• Spot on: a difference below 2.
• Very close: below 5.
• Close: below 10.
• Some way off: below 20.
• Far off: 20 or more.

These bands are the site's own and come from no study. For a sense of how small the lowest band is, Paravina and colleagues asked 175 observers to compare dental ceramic samples in a viewing booth. Half of them saw a difference at ΔE 0.8, and at 1.8 half no longer accepted the two as a match. Those were surfaces under controlled light, not colours on a screen.

The game keeps a personal best for each mode, and in the free round one for each viewing time, so a 2-second round never competes with a 10-second one. Today's colours keeps the best game of each of the last 30 days, and the result panel shows your best for the current day.

The sliders follow HSB, the model that screens and graphics software use to set a colour by its hue, its saturation and its brightness. It is also known as HSV, with value in place of brightness.

• Hue sets the colour itself, as an angle round the colour wheel from red through yellow, green and blue back to red.
• Saturation sets how strong the colour is, from a plain grey at the left end to the fullest version of the hue at the right.
• Brightness sets how much light the colour gives off, from black at the left end upwards.

Oak National Academy's secondary art lesson on tone, hue and colour describes hue as "the pure colour itself, like red or blue". Saturation, in the same lesson, is "how intense or vivid a colour is". It also lists "Hue and colour mean the same thing" as a common misconception.

The model goes back to Alvy Ray Smith's paper Color Gamut Transform Pairs, which arranged colours as a hexcone. In it, brightness is simply the largest of the red, green and blue values (RGB) a screen stores. That suits sliders, but equal slider steps do not look like equal changes, so the score never counts slider points.

Perception is described differently. In its International Lighting Vocabulary, the International Commission on Illumination defines hue as an "attribute of a visual perception". An area with a hue looks like red, yellow, green or blue, or like a mix of two neighbours among them, taken as a closed ring. The sliders work on screen values instead, which is why the scoring moves to CIELAB.

HSL, the other model web designers meet, swaps brightness for lightness. CSS Color Module Level 4, the W3C specification for colour on web pages, defines it for the hsl() notation. In HSL full lightness turns any hue white, while in HSB full brightness with full saturation gives the purest version of the hue.

After each colour, the result table also shows a hex code for the target and for your attempt, such as #7AA3CC. After the hash sign, its six characters write the red, green and blue values in hexadecimal, two characters per channel.

The feedback lines under the score follow fixed limits. Brightness is named when it is out by 6 points or more, saturation from 8 points and hue from 8°. Hue is only judged when the colour shown has at least 15% saturation and 15% brightness. A greyish or very dark colour has little hue to remember. When nothing reaches those limits, the result reads "Every slider was close".

Three modes share the same scoring, and the first two differ mainly in who picks the colours. Flag colours works differently and has a section of its own below.

Today's colours is the daily round. Everyone who plays on the same calendar day gets the same five colours, in every language of this site, each shown for 5 seconds. The day follows the device's own calendar, so it turns over at local midnight. That makes it a daily colour game with comparable scores, since everyone's result is about the same colours.

Free play deals five fresh colours each time, drawn from the browser's cryptographic random numbers. The viewing time is the player's choice: 2, 3, 5 or 10 seconds.

The last option, Side by side, no hiding, keeps the colour on screen beside yours. That turns the round into a colour matching game rather than a test of memory. It is a calm way to learn how the controls behave before the colours start to hide.

Daily and free colours come in whole steps of the controls, with any hue, saturation from 25% to 100% and brightness from 30% to 100%. Within one game, every pair of colours differs by at least ΔE 15, so no game repeats a colour.

In Flag colours nothing is shown first: the game names a country's flag and one of its colours, and you rebuild that colour from long-term memory. Only then does the flag appear, next to the score.

The pool holds 73 colours from 40 national flags, and each game takes five colours from five different flags. The names asked for are red, dark red, orange, yellow, gold, green, sky blue and blue. Black and white stripes are left out as too easy, and so are colours that appear only in a small emblem.

Each target is the colour exactly as the site's flag image fills it. The images come from the open-source flag-icons set, the same files the flag quiz shows, so the answer always matches the flag that appears after it.

For the United Kingdom the game asks for red #C8102E and blue #012169, the shades in that image. No official shade exists. According to the College of Arms, "There are no fixed colours in heraldry". Provided the blue and red are "clearly identifiable as such, any shade chosen is acceptable."

In heraldic terms the Union Flag is Azure, Argent and Gules: blue, silver shown as white, and red. The College of Arms shows two approved designs, one for use on land and a longer one for use at sea. The Royal Household calls it the Union Jack as well, and notes that the Welsh dragon does not appear on it.

Recalling a familiar object is a different task from holding a colour seen seconds ago. Bartleson (1960) asked 50 observers to pick the colours of familiar objects, such as grass and bricks, from 931 Munsell chips. The finding: "In most cases, saturation and lightness increased in memory."

Not quite. Laboratory studies of colour memory find that colours matched from memory vary more than colours matched side by side, and some drift in a typical direction.

Newhall, Burnham and Clark (1957) compared matches of 25 test colours made from memory with matches made side by side. Memory gave more variable matches, shorter matching times, "systematically higher purities" and "somewhat higher luminances".

Pérez-Carpinell, Baldoví, de Fez and Castro (1998) tested colour memory in 50 observers with Munsell chips. Side by side, the mean differences were in most cases below 1 CIELAB unit, and from memory they were generally higher. Orange was remembered best, while yellow, light green, blue and pink fared worst. The delay, 15 seconds, 15 minutes or 24 hours, made a difference.

A pull towards stronger colours appears elsewhere too. Uchikawa (1983) found that after a 3 second gap, the thresholds for telling saturation apart were 1.5 to 2.0 times those for colours seen together. Remembered colours shifted towards higher saturation for most wavelengths. In a study by de Fez and colleagues (2001), matches of 34 samples leaned towards more colourful versions, both from memory after 10 minutes and side by side. Hue errors showed no definite pattern.

Other work finds which colour it was better kept than its strength. Nilsson and Nelson (1981) tested colour memory for 16 spectral colours after delays from 0.1 to 24.3 seconds. They found small shifts in a storage "remarkably unbiased", with a spread that grew smoothly with the delay. One doctoral study, by Laws (2000) with 52 students at a computer screen, found the largest errors for lightness, then saturation, and the smallest for hue.

Categories shape colour recall as well. In one experiment by Bae, Olkkonen, Allred and Flombaum (2015), a colour showed for 100 milliseconds and vanished for 900 before people picked it on a colour wheel. Answers were pulled "away from category boundaries and toward category centers". Colours near the typical example of a category were remembered more precisely. Olkkonen, McCarthy and Allred (2014) found that over delays of 0.4 to 4 seconds, hue estimates leaned towards the average of the set.

Most of these delays sit within short-term memory, the span this game uses. Allred and Olkkonen (2015) describe a consensus on colour memory: the spread of matches "increases over the few seconds of iconic and working memory" and then "reaches a plateau". Whether memory also adds a systematic bias is still debated. In their own experiment, 122 students matched real objects, and a 10 minute delay increased both bias and spread.

All of these are laboratory results, each with its own materials and measures. None reports errors in CIEDE2000, so none sets a norm for the points in this game.

The game measures the difference between the colour values it sends to the screen, and the screen then decides what reaches the eye. Those values are sRGB, the default colour space of the web in CSS Color Module Level 4.

Colour perception also depends on the surroundings: a colour looks different against white than against black, an effect called simultaneous contrast. That is why the board stays the same neutral grey, sRGB 128, 128, 128 (#808080), in the light and the dark theme alike.

Device settings change what you see. Apple describes Night Shift as moving the display's colours towards the warmer end of the spectrum. True Tone on Apple devices adapts them to the light in the room, and Microsoft's Night light in Windows also shows warmer colours at night.

Lower screen brightness, a dark page around the board and a panel that was never calibrated all shift colours a little. None of this changes the ΔE in the result, which comes from the colour values, but it changes what was seen and remembered. Scores made on two different screens are therefore not exactly comparable.

The CIEDE2000 standard was written for objects that reflect or transmit light, and it covers displays only where they imitate such objects. On a screen, the difference it gives is an estimate of what the display shows, never a measurement of the light itself.