The Abney Effect: Why Blue Turns Purple When You Lighten It

Take the bluest blue your screen can show, #0000ff, and mix it halfway to white. You get #8080ff. Look at it for a second. That is not a light blue. It is lavender.

Nothing went wrong in the maths. You added white, which has no hue of its own, and the hue moved anyway. The shift has a name, the Abney effect, and it was first measured in 1909 by a retired army engineer who was trying to work out why his photographs disagreed with his eyes. More than a century later it is the reason CSS gradients can now blend in a colour space that one engineer published on his own website in 2020.

A photographer who stopped trusting his eyes

Sir William de Wiveleslie Abney was not a psychologist. Born in Derby in 1843, he served with the Royal Engineers and then spent decades turning photography into a measured science. He was elected to the Royal Society in 1876, and in 1887 he took the first photographs of the sun's spectrum in the infrared. He was knighted in 1900. Colour vision came late in his career, as an offshoot of his work on colour photography.

In October 1909 he sent the Royal Society a short paper titled "On the Change in Hue of Spectrum Colours by Dilution with White Light". The motive was practical. He had been studying the colour of fluorescent materials, and the dominant colour he got from photographic plates "did not correspond exactly" with what he saw. The plates also showed white light mixed in with the fluorescence. Abney wondered whether the white was to blame.

He knew he was not the first to see the shift. A change in hue when white is added "has been noticed," he wrote, "but I am not aware that any measurement of the extent of the change has been made." So he measured it.

What he saw in the dark room

Abney's apparatus split a beam into two identical spectra and projected a patch of each side by side on a white surface. With a slit he could pick one pure wavelength for both patches. Then he let white light fall on the right-hand patch only and compared the two.

The patches should have differed only in strength. They didn't.

• Red with white added looked "certainly yellower" than the same red alone.
• Orange "became decidedly yellow".
• Green slid toward yellow-green.
• A blue at about 478 nanometres became redder.
• Violet, he reported, became bluer.

Two points held still. A yellow at about 577 nm did not change hue at all, and neither did a blue-green near 489 nm, which white simply made "rather paler". Everything else bent toward one of those two anchors or away from them.

Abney then did what a Victorian physicist would do and looked for a law. He noticed that his fixed yellow sat where the red and green "sensations" were in the same proportion as in white light, and he built a formula on that, treating blue as negligible. It fitted his table well. It also meant he only measured from red to blue-green, which he called "by far the most luminous portion of the spectrum". The blue end, the part designers now care about most, got one sentence each.

The retest that kept the blue and dropped the violet

For 75 years the effect sat in textbooks under his name. In 1984 W. Kurtenbach, C. E. Sternheim and L. Spillmann repeated the experiment for the Journal of the Optical Society of America A with three observers and four different whites, including a copy of Abney's own warm 3890 K white and each observer's personal neutral white.

Most of Abney's results survived. Hue shifts got larger as the colour got more diluted, and two colours, blue-green and yellow, changed least. But the short wavelengths did not behave the way he said. They shifted toward red, not toward blue. In the middle of the spectrum the shifts were smaller, and their direction depended on which white you used.

So the headline finding for anyone who works with blue is the one Abney gave a single line: dilute a blue with white and it reddens. On a screen, a reddened pale blue is lavender.

Why would an eye do this?

The obvious reading is that the Abney effect is a defect, a nonlinearity in the wiring between your cones and your sense of hue. A 2006 paper in the Journal of Vision by Yoko Mizokami, John Werner, Michael Crognale and Michael Webster argued the opposite.

They pointed out that adding white is a strange way to desaturate a light. Out in the world, colours mostly get paler because their spectrum gets broader, not because someone mixes in a flat white. So they ran the test another way. They kept the peak wavelength fixed and widened the spectrum around it, from about 25 nm to roughly 85 to 105 nm.

Under those conditions the hue barely moved. That is surprising, because widening a spectrum changes the ratio of signals from the three cone types quite a lot. The authors concluded that the visual system corrects for the eye's own filtering so that hue tracks a stable physical property, the peak of the spectrum, and not the raw cone ratios. Feed that correction a wavelength diluted with white and, in their phrase, "the 'right' response is made to the 'wrong' stimulus". Your eye is compensating for something that didn't happen.

I like this explanation a lot, though the authors are careful about its limits. Their model predicts more curvature than people show, especially around yellow.

The same curve, hiding in your tint scale

Your monitor's blue is not a single wavelength, but mixing it with white is the same kind of dilution Abney performed, and it produces the same drift. You can put a number on it. I converted each step of a #0000ff-to-white blend into OKLCH and read off the hue angle. Pure blue sits at about 264°. Here is the blend in plain sRGB, which is what a hex-based tint tool or an old-style gradient gives you:

By the midpoint the hue has moved from 264° to about 280°, and the palest step is near 286°. That is a 22° swing from adding a colour with no hue.

You might expect CIELAB to fix this, since it was designed to match perception. It makes blue worse:

The midpoint lands near 297° and the lightest tint near 304°, a drift of about 40°. This is a known flaw. In 1995 P.-C. Hung and R. S. Berns had nine observers pick out 24 lines of constant hue on a CRT and found that CIELAB, CIELUV and the Hunt model all showed large errors near the blue primary. They ended by saying imaging needed a new colour space. The current CSS Color specification says the same thing in plainer words: between LCH hues of 270° and 330°, "as a saturated blue has its Chroma progressively reduced, it becomes noticeably purple."

The picture to hold in your head is a river. In these colour spaces, the path of "the same blue, only paler" is a bend, and a straight-line blend cuts across it into purple country.

The fix was a blog post

On 23 December 2020 Björn Ottosson published a new colour space on his personal site and called it Oklab. He listed the problem bluntly. Of CIELAB and CIELUV he wrote that their "largest issue is their inability to predict hue. In particular blue hues are predicted badly." His blue-to-white comparison plots show CIELAB, CIELUV and HSV all drifting toward purple.

Oklab keeps CIELAB's simple structure but was fitted numerically to better data, including the constant-hue measurements Ebner and Fairchild collected in 1998 for the IPT colour space. In effect, the bend in the river is built into the coordinates, so a straight line through Oklab follows it.

Here is the same blend once more, done in Oklab:

The hue stays between 264° and 260° the whole way. It reads as one blue getting lighter, which is what you asked for.

Adoption was quick for a colour space that started as a blog post. The CSS Color Level 4 specification added oklab() and oklch() and made Oklab the default space for interpolation when nothing else is specified. MDN lists oklch() as available across browsers since May 2023. Tailwind CSS 4.0, released on 22 January 2025, moved its whole default palette from rgb to oklch and blends gradients in Oklab by default.

What to change in your own work

One catch in that spec matters more than the rest. For web compatibility, browsers still blend "legacy" colour formats such as hex, named colours, rgb() and hsl() in gamma-encoded sRGB. So a gradient from #0000ff to white takes the lavender route unless you say otherwise:

.hero {
  background: linear-gradient(in oklab, #0000ff, white);
}

.tint {
  background: color-mix(in oklab, #0000ff, white 50%);
}

A few habits follow from all this.

Build blue and violet scales in OKLCH. Hold the hue and step the lightness. If you generate a scale with a shade and tint generator or by hand, compare the lightest steps against the base. If they look like a different colour family, the scale was probably blended in sRGB or LCH. The same goes for the 50 and 100 steps of a token-based brand palette, which is where the drift is largest.

Check your blues first. Abney's two anchors are still useful. Yellows and blue-greens barely shift when diluted, so a teal tint scale forgives a lot. Strong blues, like pure sRGB blue, are the worst case.

Don't assume "perceptual" means solved. lch() is a real improvement over hsl() for lightness, but its blue region bends the wrong way. The differences between spaces are laid out in the colour spaces reference.

Decide whether you want the drift. Some designers push light blues toward violet on purpose because it feels warmer. That's a fine choice. It should be a choice, though, and not something a blend function did while you weren't looking.

The Abney effect belongs with the other cases where a colour's numbers and its appearance part ways, like the Helmholtz-Kohlrausch effect, where saturated colours look brighter than their luminance says they should, and simultaneous contrast, where neighbours change a colour. Abney's case is the simplest of them. You add white to blue and it turns a little purple. He wrote that down in 1909. CSS got a default that accounts for it more than a century later.

Sources

• W. de W. Abney, "On the Change in Hue of Spectrum Colours by Dilution with White Light", Proceedings of the Royal Society A 83 (1909), via the Internet Archive
• Kurtenbach, Sternheim and Spillmann, "Change in hue of spectral colors by dilution with white light (Abney effect)", Journal of the Optical Society of America A 1(4), 1984
• Mizokami, Werner, Crognale and Webster, "Nonlinearities in color coding: Compensating color appearance for the eye's spectral sensitivity", Journal of Vision 6(9), 2006
• Hung and Berns, "Determination of constant hue loci for a CRT gamut and their predictions using color appearance spaces", Color Research & Application 20(5), 1995 (dataset record, Zenodo)
• Braun and Fairchild, "Color gamut mapping in a hue-linearized CIELAB color space", IS&T/SID Color Imaging Conference, 1998 (RIT repository)
• Björn Ottosson, "A perceptual color space for image processing", 23 December 2020
• CSS Color Module Level 4, W3C
• oklch(), MDN Web Docs
• Tailwind CSS v4.0 release post, 22 January 2025
• Abney, William de Wiveleslie, Complete Dictionary of Scientific Biography (Encyclopedia.com)
• Sir William de Wiveleslie Abney, IET Archives biography