The same colour looks different in different places

Your eye never judges a colour on its own. It always judges it against whatever is around it. So on a dark page, a big swatch of colour looks lighter and stronger, whereas on a light page the same swatch looks darker and duller. Thin lines and small text do the opposite, which means they blend in towards their background. And through all of it, the hex code never changes.

Why does the same colour look different in two places?

Nothing in the file moves. A colour picker returns the identical hex in both places. What moves is the thing the colour is being compared with, because your eye reads every colour as a comparison. Put a colour on something darker and it looks lighter and stronger. Put it on something lighter and it looks darker and duller.

You've probably run into it already without having a name for it. One InDesign user told Adobe's support forum that an imported background colour "changes contrast according to the font colour". People replied that it was a known effect of the eye. The asker didn't accept that, and I understand why. It feels like the software is lying to you. But it isn't.

And the effect is instant. The CIE, the international body that sets lighting and colour standards, calls it "virtually instantaneous". That's what sets it apart from the slow way your eyes adjust to the colour of a room's lighting, and it's why trying harder won't switch it off.

In 1963 Josef Albers built a whole course around it in his book Interaction of Color. He called colour "the most relative medium in art", and his own illustration was simple: say "red" to fifty people and you'll get fifty different reds. Two of his exercises carry the two tricks right there in their titles, "1 color appears as 2" and "2 different colors look alike". Afterimages are a separate effect, by the way. They come from seeing one colour after another, not side by side.

Chevreul and the weak blacks

At the Gobelins, Michel Eugène Chevreul was director of dyeing, and he was handed a practical question: why did certain blacks there look weak? He compared them with the best foreign wools and found them equal. The black itself wasn't the problem. The fault, he concluded, lay with the colour next to it.

He published the rule in 1839. Two colours seen side by side "will appear as dissimilar as possible", he wrote, and that covers both their make-up and what his English translator called the height of their tone. That second half matters, because it means the push works on lightness as well as hue: a colour next to a dark one gets lighter, and next to a light one it gets darker.

The thing is, the lightness half often goes missing. The most-circulated modern edition rewords the end of the rule as the strength of the colour, and the lightness part just disappears. If you quote Chevreul, then, quote Charles Martel's English translation, and say which edition you used: 1855 or 1860.

Why do the two squares in Adelson's checkerboard look different?

They aren't different at all. In Edward Adelson's checker shadow illusion from 1995, square A sits in the light and square B sits in a shadow. A looks dark grey and B looks light grey. But I sampled the pixels from the file on Adelson's own MIT page, and both squares are #787878. The picture is showing you how good your eye is, not how bad.

That's because your eye isn't a light meter. It's trying to answer a different question, which is: what is that surface made of? To answer that under lighting it can't measure, it discounts the light, using everything else in view. Square B is in shadow, so your eye allows for the shadow and reports a light tile. Adelson's own verdict is that the effect shows "the success rather than the failure of the visual system."

The idea itself is old. Back in 1689 John Locke pointed out that the same water can feel cold to one hand and warm to the other. Your senses report differences, and colour is no exception.

Now, the textbook story says the effect happens in the eye itself, with each cell turning down its neighbours. That story has been tested where it should be strongest, and it failed.

Worth knowing: the textbook explanation is out of date. The usual version is that neighbouring cells in your eye damp each other down. But in 2011 Geier and Hudák published a paper whose title says that idea "fails at its traditional stronghold". And a different pattern, White's illusion, runs the opposite way to what the damping idea predicts. Researchers' opinion has since shifted towards the brain, not the eye.

A dark page moves your colours about a step and a half

The CIE publishes a model of how colours look in context, and it has one input for how light the background is. I used it to move colours from a light grey page (#F5F5F5) to a dark grey one (#2A2A2A), which are two ordinary interface surfaces. The model predicts their look shifts by about one and a half steps of a ramp like Tailwind's, where a step is the gap between 400 and 500, or 500 and 600. That's from the page alone.

Tailwind's own 500 colours tell the same story. Moved from light grey to near-black, they're predicted to gain about 13 points of lightness on a 0 to 100 scale. The average gap between neighbouring steps in Tailwind's ramps is about 8.5, so that works out at 1.56 steps.

The direction is always the same: lighter on the dark page. And that's a floor, not a ceiling. The model takes the background as one even colour, so it carries the page but not the neighbour. The CIE says so in its own definitions: a model of one colour on its background can't predict what other colours do "since it is not keeping track of the other colours." For Adelson's two squares, the model predicts a gap of about one palette step. The illusion looks far bigger than that, because the rest comes from the shadow, and no colour model contains the shadow.

If your brand colour looks a step or so lighter in dark mode, then, you're not imagining it.

There's one more rule of thumb, and it goes back to 1891. Kirschmann found the effect is strongest when the colour and its surround are close in lightness. In other words, two colours of similar lightness interfere with each other the most.

A side note: against near-black, the numbers get bigger. From a light grey page (#F5F5F5) to a near-black one (#1E1E1E), the median predicted shift across 262,144 colours is 14.8 on the standard colour-difference score. The web's colour standard treats 2 as just noticeable, and 99.97% of colours move further than that. None is predicted to look darker on the dark page. Other room settings keep the median between 11.9 and 14.8.

Thin lines and small text do the opposite

Below a few pixels of width, the surround stops pushing a colour away and starts pulling it in. A big swatch on a dark page looks lighter, but regular body text or a hairline on that same dark page blends towards the background and looks darker. That means the rule you were taught is right for a button and backwards for your body copy.

Vision researchers have measured the switch several times. Fach and Sharpe found it in 1986, Smith, Jin and Pokorny found it in 2001, and two older studies found it too. They don't agree on exactly where it falls, and it depends on your screen, how far away you sit, and the colours involved. But they do agree on this: every published estimate sits above the stroke width of regular body text.

I measured that width. A regular-weight sans-serif at 16px has upright strokes about 1.4 pixels wide. At 14px, it's about 1.2. A 1px rule, a hairline border and most icon strokes sit down there too. A button, a card or a swatch, on the other hand, is hundreds of pixels across, far above every estimate. There are two honest limits, though. Bold text at 16px, with strokes about 2.2 pixels wide, isn't safely on either side. And mid-sized things, like a thick underline or a chunky icon, can land on either side depending on the screen.

Why would size flip it? A wide band of colour is big enough for your eye to treat as a thing, and your eye judges things against their surroundings, so it pushes away. A hairline is too thin to be a thing on its own, so your eye averages it in with whatever is around it. Think of a tablecloth woven from fine red and white threads, which reads as pink from across the room. That's an analogy for where the line falls, not the mechanism. The blending is partly the eye's own optics and partly something that happens later, and experts disagree about the mix.

Fruit sellers worked this out first. Unripe green oranges sold in orange mesh nets look riper. In 2024 Gegenfurtner tested it, including with artificial nets that rule out light bouncing between the fruit, and his comment was that "fruit vendors have realized this a long time ago." Designers run into both effects at once, too. One asked on Graphic Design Stack Exchange why a grey can under cyan pixels looked red, while grey spheres under cyan stripes looked cyan.

Why is brown only brown next to something brighter?

Point a torch at a white wall and you can make the spot red, orange or yellow. But you can't make it brown. That's because brown isn't a colour of light. It's orange or yellow seen against something brighter. In a 1989 experiment by Uchikawa, Uchikawa and Boynton, people looked at isolated colour patches, and in their words, "brown was almost never seen, being most often replaced by orange."

The surround does the work, and it does it fast. A 2016 study found that a bright white surround makes a yellow patch look browner and darker, even when the patch is shown for only 27 thousandths of a second.

You can check this with your browser's own colour names. Chocolate (#D2691E) and saddle brown (#8B4513) sit at the same hue, to within a degree, in OKLCH. Now keep chocolate's hue and strength and raise only its lightness, and you get #FA8D4A, which nobody would call brown. Nothing changed but lightness, and it's the surround that supplies the lightness judgement. So if your brand has a brown, look at it on a dark page before you commit.

One more thing: a thin outline can switch the effect off, or turn it up. In 1992 Whittle found that differences exaggerated by a near-matching background were "abolished by a thin outline". With a patch in an otherwise dark field, Uchikawa's team brought brown back using a white border under a sixtieth of its width. Yet Kanematsu and Koida found that a white edge one or two screen pixels wide can greatly increase the colour shift.

A contrast checker can't see the background

A contrast ratio takes two colours and has no slot for a third. Put #595959 text on a white card, and the ratio is 7.005:1 whether the card sits on a white page, a mid grey one or a black one. I checked six pages, and it was identical to every decimal place. Meanwhile, the predicted look of that text moves by up to 17.8 on the standard colour-difference score.

That fixed ratio isn't a flaw in WCAG, the web's accessibility standard. It's just the edge of what a ratio of two numbers can tell you. Keep using it for what it's for, which is legibility. The careful version of that argument is in Can everyone actually read your design?

The same goes for the 3:1 check between neighbouring colours in Designing for colour blindness. That check tells you which pairs stay apart. The page around them changes how both colours look, for everyone. The two ideas work together.

And thin text adds a twist. Body copy is exactly where the surround pulls colour towards the background instead of away, and the ratio has no way of knowing that.

OKLCH can't fix this either

OKLCH and its older cousin CIELAB work out lightness from the colour's own light alone. There's no input for what's around it, and that's by design. So #787878 has an OKLCH lightness of 0.573 on a white page, a black page and every page in between, and two swatches set to the same OKLCH lightness look equal to the maths but won't look equal to you on different backgrounds.

OKLCH is still worth using, though. It solves a different problem, which is making the steps in a ramp look even. That one's covered in Why "same brightness" colours don't look the same.

Is "the dress" caused by the colours around it?

The dress is a different puzzle. It's about guessing the lighting, not about neighbouring colours. It's also the one case where different people see genuinely different things from identical pixels. Of 1,401 people in a 2015 study, 57% saw blue and black, 30% saw white and gold, and 11% saw blue and brown. Another 2015 study found the two camps disagree about lightness, not hue.

Your eye corrects for lighting all day long. A white shirt looks white indoors at night and outside at noon. The dress photo just gives it too little to go on, so two fair guesses about the light give you two different dresses. And it doesn't come down to your screen either, because the same screen produces both versions.

Can you calculate how much a background shifts a colour?

You'd hope for a formula. One designer asked online for a rule like "reduce saturation by 3% and brightness by 2%", and it's a fair wish. But there isn't a single formula, and the people who measure the effect say so. In 2012 the vision scientists Bosten and Mollon wrote that there may be no fair way to measure it at all. Their 2010 study of 101 people found that how strongly you see it in one situation doesn't predict how strongly you see it in another. You can get an answer for one particular case, but there's no constant that carries over to the next.

What can be worked out is the page's share. Here's Albers's "2 different colors look alike", predicted from the CIE's model. Each pair is two different greys that should look the same, one on a near-black page (#1E1E1E) and one on a light grey page (#F5F5F5).

Treat these as predictions, not promises. They carry the page, not whatever sits next to the colour, and some people will still see a difference. Strong colours mostly fall outside what a screen can show once they're matched this way, so the table sticks to greys. The first row holds #767676, the grey that's famous for passing the 4.5:1 text rule on white by a whisker.

What should you do differently in your next design?

Here are six habits, in the order I'd start them.

1. Judge every colour on the surface it will ship on. Not your artboard's default white. Put the swatch on the real page colour before you sign it off.
2. Keep separate values for light and dark surfaces. One hex can't look the same on both. A dark page lifts big areas of colour by about a step and a half, so a dark theme needs its own tokens. Dark mode isn't just flipping the colours goes further.
3. Run the seam test. Duplicate a swatch and drag the two copies together until they touch. If the seam disappears, they were the same colour all along. It works in Figma or Canva with two rectangles, and you don't need a plugin.
4. Judge text as text. At body size the background pulls thin strokes towards itself, so a colour that looks right as a swatch can look weaker as type. Check it at real size, on the real background.
5. Use a thin neutral outline when you need to judge a swatch on its own, like in a palette document. It usually reduces the effect, but it won't always remove it, and a bright white edge can make the shift bigger.
6. Don't expect a contrast checker to catch any of this. Use it for legibility, and use your eyes on the real page for appearance.

Frequently asked questions

Is it my colour, or my monitor?

If the colour changes when you switch device, app or export, that's colour management, which is covered in Why your brand colour looks different on your phone. If it changes when you change what sits next to it on one screen, that's your eye. Calibrating your monitor won't fix the second kind, because nothing in the file changed. To tell them apart, put both versions side by side in one window.

Why does the same colour look different in two places in my design?

Because your eye judges a colour against whatever is next to it, not on its own. The file hasn't changed, and a colour picker will return the identical hex in both places. What's changed is the comparison. Surround a colour with something darker and it looks lighter and stronger. Surround it with something lighter and it looks darker and duller. The effect is instant, and you can't switch it off by looking harder.

Is there a formula to correct for it?

No, there's no single correction, and the researchers who measure the effect say so in print. How much a colour shifts depends on the size of the patch, how light the surround is, the hue and the viewer. One study of 101 people found no general trait of how strongly people see it. What works instead is a habit: judge the colour on the surface it will ship on, and keep separate values for light and dark surfaces.

Why does my grey look blue, or brown, or green?

Because a neutral grey takes on the opposite of whatever surrounds it. Next to a warm beige it reads cool and bluish, whereas next to a blue it reads warm and brownish. There's nothing wrong with the grey. If you're asking about paint rather than pixels, though, there's a second cause: the same paint genuinely reflects different light under a warm 2700K bulb than in daylight, which is a physical change, not just your eye.

Does the rule change for thin lines and small text?

Yes, it reverses. A broad area of colour is pushed away from its surround, but a thin line is pulled towards it and blends in. Published estimates of where the switch happens vary with screen and distance, but every one sits above the strokes of regular body text, which are about one and a half pixels wide at 16px. So text, hairlines and small icons behave the opposite way to buttons and cards.

What colour was the dress?

Blue and black. The interesting part is the split. Of 1,401 people surveyed in 2015, 57% saw blue and black, 30% white and gold, and 11% blue and brown, all from identical pixels. They disagreed about lightness rather than hue, and that comes from each viewer's unconscious guess about the light the photo was taken in. Almost half the people who had seen it before said it had switched on them.

For the curious

The effect is called simultaneous contrast, and the CIE's formal term is chromatic induction (ILV 17-22-075). Afterimages are successive contrast. The thin-line reversal is assimilation, or the von Bezold spreading effect. Smith, Jin and Pokorny measured the switch in cycles per degree of visual angle, which is why screen and distance matter. Kingdom suggests reading contrast and assimilation as two directions of error rather than two mechanisms. Differences looking bigger on a near-matching background is called crispening. The cell-damping story is lateral inhibition, after Hartline, and a leading alternative is anchoring (Gilchrist; Cataliotti and Gilchrist). The viral grey photos that look full colour under coloured stripes are by Øyvind Kolås, and Novick and Kitaoka cover the science.

My model is CIECAM16 (CIE 248:2022), a colour appearance model: sRGB, D65, adapting luminance 64 cd/m², average surround, reference background Y_b 20. Scores are CIEDE2000 (ΔE00); see How different do two colours need to be? The matched pairs' round-trip error is negligible.

"Charles Martel" is a pseudonym of Thomas Delf. Chevreul's law is §16, and the 1987 Birren edition loses the height of their tone.

Sources (24)

• M. E. Chevreul, De la loi du contraste simultané des couleurs (opens in a new tab), Paris, 1839, §16
• M. E. Chevreul, The Principles of Harmony and Contrast of Colours (opens in a new tab), trans. Charles Martel [Thomas Delf], 2nd edn, London, 1855, Author's Preface; and 3rd edn (opens in a new tab), London, 1860, §16
• G. Roque, Chevreul's Colour Theory and its Consequences for Artists (opens in a new tab), Colour Group (GB), 2011
• J. Albers, Interaction of Color, Yale University Press, 1963; see the Josef and Anni Albers Foundation (opens in a new tab)
• J. Locke, An Essay Concerning Human Understanding (opens in a new tab), Book II, Ch. VIII, §21
• E. H. Adelson, "Checkershadow Illusion", Perceptual Science Group, MIT, © 1995; and "Lightness Perception and Lightness Illusions" (opens in a new tab), in The New Cognitive Neurosciences, 2nd edn, MIT Press, 2000
• J. Geier and M. Hudák, "Changing the Chevreul Illusion by a Background Luminance Ramp: Lateral Inhibition Fails at Its Traditional Stronghold. A Psychophysical Refutation" (opens in a new tab), PLoS ONE 6(10), 2011
• B. Spehar, C. W. G. Clifford and T. Agostini, "Induction in variants of White's effect" (opens in a new tab), Perception 31(2), 2002
• F. A. A. Kingdom, "Lightness, brightness and transparency" (opens in a new tab), Vision Research 51(7), 2011
• H. K. Hartline, "Visual Receptors and Retinal Interaction" (opens in a new tab), Nobel Lecture, 1967
• J. Cataliotti and A. Gilchrist, "Local and global processes in surface lightness perception" (opens in a new tab), Perception & Psychophysics 57(2), 1995
• CIE, ILV 17-22-075 chromatic induction (opens in a new tab), and ILV 17-32-003, Note 2, CIE S 017:2020
• CIE, CIE 248:2022, CIECAM16 (opens in a new tab)
• V. C. Smith, P. Q. Jin and J. Pokorny, "The role of spatial frequency in color induction" (opens in a new tab), Vision Research 41(8), 2001 (abstract)
• C. Fach and L. T. Sharpe, "Assimilative hue shifts in color gratings depend on bar width" (opens in a new tab), Perception & Psychophysics 40(6), 1986
• T. Kanematsu and K. Koida, "Large enhancement of simultaneous color contrast by white flanking contours" (opens in a new tab), Scientific Reports 10, 2020; and "Influence of Stimulus Size on Simultaneous Chromatic Induction" (opens in a new tab), Frontiers in Psychology 13, 2022
• K. R. Gegenfurtner, "Perceptual ripening of oranges" (opens in a new tab), i-Perception 15(4), 2024
• D. Novick and A. Kitaoka, "The confetti illusion" (opens in a new tab), Journal of Illusion 2, 2021
• P. Whittle, "Brightness, discriminability and the 'crispening effect'", Vision Research 32(8), 1992 (abstract)
• H. Uchikawa, K. Uchikawa and R. M. Boynton, "Influence of achromatic surrounds on categorical perception of surface colors", Vision Research 29(7), 1989 (abstract)
• S. L. Buck et al., "Influence of surround proximity on induction of brown and darkness", JOSA A 33(3), 2016 (abstract)
• J. M. Bosten and J. D. Mollon, "Kirschmann's Fourth Law" (opens in a new tab), Vision Research 53, 2012; and "Is there a general trait of susceptibility to simultaneous contrast?", Vision Research 50(17), 2010
• R. Lafer-Sousa, K. L. Hermann and B. R. Conway, "Striking individual differences in color perception uncovered by 'the dress' photograph", Current Biology 25(13), 2015
• K. R. Gegenfurtner, M. Bloj and M. Toscani, "The many colours of 'the dress'", Current Biology 25(13), 2015