Why Brand Colors Look Different on Every Screen, and in Print

A brand spends real effort choosing one exact color, writes it down to the digit, and then watches it come out slightly differently on every phone, laptop, box and billboard. That variety is a big part of why the color in your head is never quite the one in On Brand. Here is where the differences come from, and what the game actually compares when it scores you.

A brand guide usually lists its main color three or four ways, because no single description works everywhere:

• Hex and RGB for screens: three numbers from 0 to 255 for red, green and blue light, written in hex as a hash and six digits. That allows 16,777,216 colors.
• CMYK for ordinary color printing: percentages of cyan, magenta, yellow and black ink, the four inks most printing presses mix everything from (CMYK).
• Pantone for exact printing: a numbered ink, mixed in advance and printed as a spot color of its own, so it looks the same on every job (Spot color).
• Sometimes a paint or vinyl code for signs and vehicles.

These are not four spellings of the same color. They are four best attempts, each in a medium with its own limits. Many vivid oranges, greens and blues that a Pantone ink can print cannot be mixed from the four CMYK inks at all, and some screen colors have no ink equivalent. Pantone even publishes coated and uncoated versions of its colors, because the same ink looks different on glossy and matte paper.

The deepest difference is physical. A screen makes its own light, adding red, green and blue together. A page, a box or a van reflects whatever light falls on it, and its inks subtract from that light. A screen color can glow in a dim room in a way no ink can. A printed color changes with the bulb, the window and the time of day.

So a brand you know mostly from packaging may look brighter and more saturated on a phone than the one you picture, and a brand you know mostly from an app may look duller on its shopping bag.

For the web to show colors consistently at all, screens and software need to agree what a hex code means. That agreement is sRGB, a standard color space created by HP and Microsoft in 1996 and published as an international standard in 1999 (sRGB). It fixes the exact red, green and blue a screen should use, a gamma curve, and a daylight white. When a website says a color is a particular hex value, the browser treats it as an sRGB color.

The trouble is that real screens are not all sRGB screens.

• Wide gamuts. Many recent phones, tablets and laptops can show more saturated colors than sRGB allows, often in a range called Display P3, which Apple brought to its iMacs and iPhones from 2015 (DCI-P3). A color-managed browser should map sRGB colors onto them correctly. Software that doesn't stretches every color across the wider range, and brand colors suddenly look neon.
• Panel differences. OLED and LCD panels render colors differently, factory calibration varies from model to model and unit to unit, and many screens shift color when viewed from an angle.
• Brightness. A screen at low brightness makes colors look darker and less saturated; turned up in a dim room, they glow.
• Night modes. Features such as Apple's Night Shift and Windows' Night light warm the whole screen toward amber in the evening. Blues get grayer and whites go yellow. Adaptive features that match the screen's white to the room's light do the same more subtly.
• Surroundings. A color on a white page looks different from the same color on a dark one. In dark mode, a brand's blue sits on black and reads brighter.

Then there is the viewer. The visual system constantly corrects for the color of the light it is seeing under, so a white page looks white under a warm bulb and in blue daylight. This is called color constancy, and it usually works well, which is why we rarely notice how much light changes the colors reaching our eyes.

When it gets confused, the results are dramatic. In February 2015 a photo of a striped dress split the internet: some people saw it as blue and black, others as white and gold. The photo did not change. Each brain made a different guess about the light it was taken in, and corrected for that guess (The dress).

A brand color you have seen in a hundred places has been through a hundred of these corrections. What you remember is a blend, and the way memory stores colors adds its own drift on top.

None of this changes how your color is scored, though it can change what you see while you mix.

The true colors in On Brand are the values in each company's official logo as drawn for screens, stored as hex codes. When you move the sliders, the game converts your hue, saturation and brightness into the exact screen color it paints on the part. The score compares those two numbers, after converting both to CIELAB in exactly the same way. How CIEDE2000 scores a color goes through the math.

So the score is a property of the numbers, not of your display. A warm, dim or oversaturated screen makes both colors look different to you, but it cannot make your color score closer or further. What it can do is mislead you while you mix: if your screen shifts blues toward gray, a blue that looks right on it may be off in the numbers.

The game helps where it can. Every accent on the card is gray, so the only real color in view is the logo itself. And the card looks the same in dark mode as in light, with only the page round it changing, so a logo is always judged on the same pale ground.

A few habits make what you see closer to what is scored:

1. Turn off night modes and warm screen filters while you play.
2. Set the screen to a normal, comfortable brightness, not its dimmest.
3. Look at the screen straight on, especially on a laptop.
4. Avoid tinted glasses or blue-light filters if you want to judge color.
5. If you know a brand mostly from print or signs, expect its screen color to be a little brighter than the one you remember.

Then play a round on two different devices, a phone and a laptop, and notice whether your misses lean the same way on both. If they do, it is your memory. If they don't, the screen is part of the story.