Lighter versions of a colour without it turning purple

When you make a blue lighter, it can start to look purple, and there are two separate reasons for that. The first is your eyes, which read blue as more violet once white is added. The second is some older colour maths that simply gets blue wrong. Now, in Canva and Figma every slider just mixes in white, so the hue number never moves, even while the colour you see does. The fix is to steer the hue slightly towards cyan as you lighten, and then check it by eye.

Why does my light blue look purple?

Adding white doesn't only make a colour paler. It changes which colour your eyes see, too. Mix white into a strong blue and a lot of people see the result lean towards violet, even though nothing in the blue itself has changed. Colour scientists call that the Abney effect. It's named after W. de W. Abney, who first measured it in a paper published in December 1909. People had noticed the change before, he wrote, but as far as he knew nobody had actually measured it.

Later experiments agree on blue. In 2012 O'Neil and colleagues reported that blue lights "appear more purple when white is added" (opens in a new tab), and they showed it on an ordinary computer monitor as well, where blue patches mixed with grey looked more purple. Going further back, a 1984 study found that short-wavelength light always shifts towards red as white is added.

It helps to picture the colour wheel as a map, with white in the middle and each colour as its own country. You'd expect the borders to run in from the edge in straight lines. Near blue, though, they bend. So if you walk in a straight line from Blue towards the white middle, you end up in Purple without ever turning.

So if your light blue button looks a bit lavender next to the logo, even though you only made it lighter, this is likely why.

A side note: a calibrated screen won't save you. A pale blue that looks lavender isn't always a faulty screen. A 2012 study showed the purple shift on an ordinary monitor, because the shift happens in the eye. Colour profiles and phone settings can add problems of their own, and Why your brand colour looks different on your phone covers those. But fix the screen and the eye's shift is still there.

Some colour maths makes it even worse

Your eyes aren't the only problem. Some older colour maths measures blue badly, so a colour it calls "the same hue" can look clearly purple. That maths was built to match how people see colour, and plenty of palette tools have used it, but in the blues it goes wrong.

You don't have to take my word for it, because the web's own colour standard says so. CSS Color Module Level 4 (opens in a new tab) warns that if you make a strong blue less colourful while holding that maths' hue number fixed, "it becomes noticeably purple". Researchers measured the error near the blue primary as far back as 1995.

The newer CSS Color Module Level 5 (opens in a new tab) shows it with a simple test. It mixes white and blue half and half, three different ways. With the older maths the result is "quite purple". With a plain mix of screen colours it's slightly purple. And with newer maths designed to hold hue, it stays blue. I reproduced the older-maths version myself: pure blue, half lightened, comes out as #AF89FF. Whatever you call that, it's lavender.

In other words, there are two sources of purple. One is your eye, which reads pale blue as more violet. The other is the maths, which measures blue wrongly. Newer maths fixes the measuring, but only steering the colour fixes what your eye does.

Why doesn't the hue number in Figma's picker move?

Because every slider route to a lighter colour in Canva or Figma is a plain mix with white, and a plain mix keeps the same hue number. You can raise lightness in HSL, lower saturation in HSB, or drop the opacity over a white page, and you'll get the same kind of white mix each time. (The opacity case assumes the app blends colours the way browsers do. Neither app documents it.)

So pure blue, #0000FF, at half strength becomes #8080FF. Figma's picker still says hue 240, whereas your eyes say lavender. The picker isn't lying, though. Its hue number describes the mix, not the look, which means you can't rely on the hue number alone to tell you a lighter blue is still the same blue.

There's no "make a lighter version" button in either app. When I checked in September 2026, Figma's picker (opens in a new tab) offered Hex, RGB, HSB, HSL and CSS, and newer colour maths was still a feature request (opens in a new tab) on its forum. Canva works in hex codes. If you'd like the basics of tints first, Tints, tones and shades covers them.

Worth knowing: "real light" mixing doesn't help either. You might think mixing white in the way light physically mixes would fix the purple, but it doesn't. That's exactly what Abney did in 1909, so it's the purest form of the effect. In our check, mixing real light pushed pure blue at least as far towards purple as the ordinary slider mix, and it pushed royal blue even further.

Not every blue drifts the same way

How far a blue drifts depends on where it starts. Blues that already lean towards violet, like pure screen blue #0000FF, drift the most. Typical brand blues, like a royal blue, only drift a little. A greener blue, such as the UK government's #1D70B8, actually drifts the other way, towards cyan.

I checked this with three models of how people see hue. They don't agree on how big the drift is, so I won't give you degrees. But the direction is clear enough: violet-leaning blues visibly go purple, and greener blues don't. So it's worth knowing which side of blue your brand colour sits on before you start lightening it.

Other colours shift too, but the evidence there is weaker and it pulls both ways. Our model check says reds mixed with white lean pinker, while Abney found red lights going yellower, and the 2012 study found orange lights going redder. Screen colours aren't the pure single-colour lights those studies used, so the lab results don't carry straight across. That's why my firm claims are only about blue. For everything else, trust your eyes.

How do you keep a lighter blue looking like the same blue?

You steer it. As you lighten, move the hue slightly towards cyan, then judge the result against the original by eye. In Figma's HSB picker, that means lowering a blue's hue number. Archers and sailors have a name for this, aiming off: they aim a little into the wind so they land where they meant to.

How much depends on the blue. For pure screen blue, the hue number needs to move by about 20, from 240 down to about 220. Half lightened, that turns #8080FF into #74A3FF. For most brand blues it's only about 1 to 5. A greener blue may need no nudge at all, or a nudge the other way. These figures come from one colour model, so treat them as a starting point. Your eyes make the final call.

Canva takes hex codes, so work the colour out in any picker that shows HSB, such as Figma's, and then paste the hex across. If a tool offers newer colour maths, often labelled OKLCH, its hue number holds a blue far better than HSL or HSB does. It's still a model, though, not a perfect one. Keith J. Grant has shown gradients to white (opens in a new tab) going slightly off-hue even there, so check by eye either way.

There's one more limit. A normal screen can't show a vivid, very light blue, so the palest steps of any scale lose some colourfulness, however you make them. That's the screen, not a mistake. If you're blending between two colours instead, that's covered in Why your gradient goes muddy in the middle.

Saturation halved

HSBH 240S 50B 100

#8080FF · Hue left at 240

Saturation lowered, hue nudged

HSBH 220S 55B 100

#74A3FF · Hue moved to 220

Show the original blue above them

For the curious: how the right-hand one was made

Both are pure blue with half white added. The left one is a plain mix, which is what lowering saturation does, so the picker’s hue stays at 240. The right one holds pure blue’s hue in OKLCH, a model built from how people judge hue, and then brings the colour into the screen’s range. In the picker that shows up as hue 220. It’s a starting point from one model: compare it with the original by eye.

Many good palettes steer hue on purpose

Many of the best palettes don't keep the same hue, and that's deliberate. Their goal is to keep each colour's identity, not its hue number. Sometimes that means holding the hue, and sometimes it means steering it. What you want to avoid is drifting by accident.

• GitHub. Its design team wrote in 2022 (opens in a new tab) that its blue shifts towards green in the light steps and towards purple in the dark ones.
• The US government. The US Web Design System (opens in a new tab) puts it plainly: "hue variation within color families is intentional".
• Lyft. Lyft's open-source colour algorithm treats hue as a curve, with a separate start and end.
• Tailwind. I checked its palette in three colour models. Its light blues sit towards cyan and its dark blues towards violet. Its light reds lean pinker, and its yellows turn orange-brown as they darken. And when Tailwind v4 (opens in a new tab) moved to newer colour maths, it kept the old hues and made the middle steps more colourful.

Google's Material Design is the exception. Each of its tonal palettes (opens in a new tab) keeps one hue and one level of colourfulness and changes only lightness, by design. Both approaches can work. What they have in common is that someone chose it. So if your own scale shifts hue, make sure it's because you decided it should.

One more thing: illustrators bend hue too, but for a different reason. Pixel artists and illustrators often shift hue on purpose as a colour gets lighter, and it's a style choice, made for the look of the picture. A brand scale has a different job, which is that every step should still read as your colour. So borrow the habit of steering hue, but aim it at recognition rather than style.

What should you do differently in your next design?

Lighten the usual way, then look, then steer. Then build the scale once, so you can reuse it.

1. Make the lighter version as you normally would. Raise HSL lightness or lower HSB saturation. Either one gives you a plain white mix.
2. Put it right next to the original. Then ask one question: does it look like the same colour, only paler? Or has it slid towards lavender?
3. If a blue has drifted, nudge the hue number down towards cyan. A couple of points for most brand blues, and up to about 20 for pure screen blue. Check by eye after every nudge.
4. For other colours, let your eyes decide. If a red, orange or green no longer looks like itself, nudge the hue whichever way brings it back. There's no fixed rule for these, so check by eye.
5. Expect the palest steps to be less vivid. A normal screen can't show a strong, very light blue, so don't chase it.
6. Work in Figma's HSB, then paste the hex into Canva. Save every step as a brand colour so you only do the work once. Building a brand palette that works covers which steps you need.
7. If your tool offers the newer colour maths, start there. It holds a blue's hue far better. Still check by eye.

Frequently asked questions

Why does adding white to blue make it look purple?

Because adding white changes how your eyes read the hue, not just how pale the colour is. Abney first measured the effect in 1909, and later experiments found blue lights look more purple as white is mixed in, including on an ordinary monitor. Some older colour maths makes it worse by predicting blue badly, so its pale blues come out lavender. To keep a blue looking blue, nudge the hue slightly towards cyan as you lighten, then check by eye.

How do I make a lighter version of a colour without changing its hue?

Lighten it, check whether it still looks like the same colour, and nudge the hue if it doesn't. In Canva and Figma, raising lightness, lowering saturation or lowering opacity all just mix in white. That can shift the look, especially blues towards purple, while the hue number stays the same. Moving a blue's hue a few points towards cyan makes up for it. Tools that work in OKLCH hold hue much better, though no colour model is perfect.

Is it OK for the colours in a scale to shift hue?

Yes, and plenty of well-known design systems do it on purpose. GitHub's system shifts its blue towards green in the light steps and towards purple in the dark ones. The US Web Design System says hue variation within its colour families is intentional, and Tailwind's yellows turn towards orange as they darken. What matters is that every step still reads as the same colour. Google's Material Design is the main exception, because it holds hue fixed by design.

For the curious

The eye's shift is the Abney effect (CIE 17-22-070), where hue changes as purity drops. It's often confused with the Bezold–Brücke effect (17-22-071), which is hue changing with brightness, and that's a different thing. The "older colour maths" is CIELAB and its polar form LCH. CSS Color 4 §9.1 says visual hue departs from LCH hue in the 270° to 330° region. Hung and Berns measured the blue error on a CRT in 1995. IPT (Ebner and Fairchild, 1998) and Oklab (Ottosson, 2020, polar form OKLCH) were both built from hue judgements to fix it. Ottosson chose blue for his own comparison as "the hue with the most variation between spaces". If you want the deep dive, Raph Levien's interactive review of Oklab (opens in a new tab) is the best one.

Our figures were measured with OKLCH, a model of how people see hue. A plain white mix of #0000FF at 50% drifts about 16° towards purple (IPT 15°, CAM16 only 3°), whereas LCH drifts 33°. OKLCH and IPT share a parent dataset, so they aren't independent. CAM16 is the outlier, and the literature rates it weaker in the blues.

Sources (17)

• W. de W. Abney, "On the change in hue of spectrum colours by dilution with white light" (opens in a new tab), Proceedings of the Royal Society A 83(560), published 10 December 1909
• CIE, Abney phenomenon, term 17-22-070 (opens in a new tab) and Bezold–Brücke phenomenon, 17-22-071 (opens in a new tab), CIE S 017:2020
• O'Neil, McDermott, Mizokami, Werner, Crognale and Webster, "Tests of a functional account of the Abney effect" (opens in a new tab), JOSA A 29(2), 2012
• Kurtenbach, Sternheim and Spillmann, "Change in hue of spectral colors by dilution with white light (Abney effect)", JOSA A 1(4), 1984 (abstract)
• 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 (abstract)
• Ebner and Fairchild, "Development and testing of a color space (IPT) with improved hue uniformity", IS&T Color Imaging Conference, 1998
• W3C, CSS Color Module Level 4 (opens in a new tab), Candidate Recommendation Draft, 13 September 2026, §9.1
• W3C, CSS Color Module Level 5 (opens in a new tab), Working Draft, 13 September 2026, §3.4
• Björn Ottosson, "A perceptual color space for image processing" (opens in a new tab), 23 December 2020
• Raph Levien, "An interactive review of Oklab" (opens in a new tab), January 2021
• Keith J. Grant, "Problematic color gradients and workarounds" (opens in a new tab), 3 November 2023
• Cole Bemis, "Accelerating GitHub theme creation with color tooling" (opens in a new tab), The GitHub Blog, 14 June 2022
• U.S. Web Design System, "Using color" (opens in a new tab), retrieved September 2026
• Lyft, coloralgorithm README
• Tailwind Labs, "Tailwind CSS v4.0" (opens in a new tab), 22 January 2025, and palette data for v3.4.19 and v4.3.3
• Google, Material Color Utilities (opens in a new tab) (tonal palettes)
• Figma Help Center, "About color models" (opens in a new tab), and Figma Forum, "Support OKLab and OKLCH" (opens in a new tab), retrieved September 2026