Delta E and CIEDE2000: How On Brand Scores a Color

When you lock a color in On Brand, the game has to answer a question that sounds simple: how close is your color to the brand's? Not how close the slider numbers are, but how different the two colors look.

Color scientists have worked on that question for most of a century, and the game uses their current answer, a formula called CIEDE2000 from the International Commission on Illumination (the CIE, after its French name). This is how it works, and what your score is really telling you.

A screen color is three numbers, red, green and blue, each from 0 to 255. Measuring the distance between two of them is easy. The trouble is that equal steps are not equal to the eye. Two examples, worked with the game's own code:

• Raise the green channel of a pure green from 200 to 230. The difference you see is about 7.2.
• Raise the blue channel of a pure blue from 200 to 230. The difference is about 3.8.

Both are the same 30-step change in RGB, and the green one is nearly twice as visible. Grays do it too: a dark gray stepped from 20 to 50 on every channel looks more changed (about 9.4) than a light gray stepped from 200 to 230 (about 7.0), although in RGB the two steps are identical.

Score by RGB distance and a blue that looks almost right would lose as many points as a green that looks clearly off. A fair score needs a space where distance matches what people see.

In 1976 the CIE published CIELAB, a color space with three axes:

• L for lightness, from 0 (black) to 100 (white).
• a running from green to red.
• b running from blue to yellow.

(The standard writes each with a star after it, to tell them apart from an older Lab space.) The space was built so that equal distances in it look roughly equally different. Getting there from a screen color takes a few fixed steps. The color is read as sRGB, the standard every browser assumes; the screen's gamma curve is undone to get linear light; that light is converted to XYZ, the CIE's description of color for a standard human observer; and XYZ is turned into L, a and b relative to a white point, D65, a model of average daylight. On Brand does exactly this for both colors.

Lab explains one thing that surprises new players. A pure blue at full brightness has a lightness of about 32. A pure yellow at full brightness is about 97. The brightness slider says 100 percent for both, but to the eye they are nowhere near equally light.

The first Delta E, now called CIE76, was simply the straight-line distance between two points in CIELAB. It was a huge improvement on RGB, but CIELAB turned out to be less even than intended, especially among vivid, saturated colors. Industry found that two pairs with the same CIE76 difference could look very differently matched.

A 1994 revision, CIE94, started weighting the parts of a difference separately. CIEDE2000 went further. Its authors, M. Ronnier Luo, Guihua Cui and Bryan Rigg, combined four sets of experimental data in which people had judged small color differences between real objects, and fitted a formula to them, published in Color Research and Application in 2001. On top of CIELAB it adds:

• Separate weights for lightness, chroma and hue, so a difference in each counts as much as people actually notice it.
• A rotation term for blues, where the eye's judgments of chroma and hue differences interact in a way CIELAB gets wrong.
• A rescaling of the a axis near gray, to fix how CIELAB handled colors with very little chroma.

Run the two RGB examples above through the older formula and you can see the change. CIE76 calls the green step 14.6 and the blue step 13.1, nearly the same. CIEDE2000 calls them 7.2 and 3.8, which is much closer to how they look.

The formula also has three dials, called parametric factors, that an industry can turn to suit its own viewing conditions (textiles, for instance, have traditionally counted lightness differences for less). On Brand uses the reference setting, all three equal.

CIEDE2000 is notorious among programmers. Hue is an angle, and the formula averages and subtracts hue angles in several places, which goes wrong in subtle ways when two colors sit either side of 0 degrees. In 2005 Gaurav Sharma, Wencheng Wu and Edul Dalal showed that the test data published with the standard let several such mistakes through, published a fuller set of test pairs, and pointed out small discontinuities in the formula itself (Color Research and Application, 2005). On Brand's code is checked against every pair in their published data, so a simplification that changed any score would be caught.

A difference of 0 is an exact match. As a rough guide for two flat patches side by side under good light:

• Around 1: about the smallest difference most people can see.
• 2 to 5: a close match that a careful eye will notice.
• 5 to 10: plainly different shades of the same color.
• 10 to 30: a different shade, the kind that gets a different name.
• Above 30: often a different color family.

CIEDE2000 was built from small differences, so it is most precise at the low end. That is also where a scoring rule most needs precision.

Each logo is worth up to 10 points. The score is 10 × exp(−(ΔE ÷ 30)^1.4), rounded to two decimals, where ΔE is the CIEDE2000 difference. In practice:

• A difference of 1 scores 9.91, and 2 scores 9.78.
• About 3.6 scores 9.50.
• About 6 scores 9.00.
• About 10.3 scores 8.00.
• About 18.6 scores 6.00.
• About 28.2 scores 4.00.
• About 42 scores 2.00.
• 60 scores 0.71.

The shape is deliberate. Near zero the curve is almost flat, because a difference nobody can see should cost nothing. It is steepest around a difference of 12, where each unit of difference costs about a quarter of a point: that is the zone where a shade turns into a different shade, and where knowing the brand really pays. Far out, it flattens again, so a color from the wrong family scores close to nothing without the scale wasting its range on degrees of wrongness.

The share text uses the same bands: a green square from 8 points, yellow from 6, orange from 4, red below that.

Your color is not compared as slider settings. The game converts your hue, saturation and brightness into the 8-bit screen color it actually paints on the part, so what you see is what is scored. The brand's color is the exact value in the logo file. Both go through the same conversion to CIELAB, and the difference between them is the score.

That makes the score a property of the numbers, not of your screen. A screen that runs warm or dim changes how both colors look to you, but not the score. Why brand colors look different on every screen covers what that means in practice.

One more limit is worth knowing. The standard observer behind CIELAB is a model of typical color vision. For a player with color blindness, two colors the formula calls far apart can look the same, which is why playing On Brand with color vision deficiency leans on numbers and lightness.

The curve suggests where to spend your effort. Get within about 10 and you keep 8 points; the next two points take real precision. If you often land between 5 and 7, you probably have the family right, and the missing points are usually in brightness, saturation or a small lean in the hue. What each slider does shows which slider moves the difference most for each kind of color.