Why your gradient goes muddy in the middle

A muddy gradient is usually two problems at once. The first is the pair of colours. Opposite colours, like blue and yellow, blend straight through the grey centre of the colour wheel. The second is the blend itself. The old default, which browsers still use for hex codes, averages the code numbers, which means the middle comes out too dark. So you can end up with grey, dark, or both. Neighbouring colours and a few extra middle stops fix most of it.

What is a gradient doing between your two colours?

You only pick two colours. The gradient has to make up every colour in between, and how it does that is a choice the software makes for you. Different choices give visibly different middles. In Canva or Figma you never see that choice, you only see the result.

Take one pair, pure blue (#0000FF) to pure yellow (#FFFF00), and blend it four ways. Each row shows the colour at the halfway point.

Nobody chose grey there. In the old default blend, blue to yellow lands on exact grey, not roughly grey. And that one row shows both problems at work. The middle is grey because of where blue and yellow sit on the wheel. But it's darker than the even-steps version because of how the numbers get averaged. The next two sections take those problems one at a time.

Why do opposite colours turn grey in the middle?

The centre of the colour wheel is grey, and a straight blend between opposite colours runs right through it. Picture the wheel as a roundabout with a grey island in the middle. Neighbouring colours are neighbouring exits, so getting from one to the other is a short hop round the edge. Opposite colours sit across the island from each other, and the straight route drives right over it.

On a screen's colour wheel, blue sits opposite yellow, red sits opposite cyan, and purple sits opposite green. Blend any of those pairs the old default way and the halfway point is pure grey: #808080 for blue to yellow and for red to cyan, and an even darker #404040 for purple (#800080) to green (#008000). The designer Erik Kennedy has a name for that patch. He calls it the "grey dead zone".

You'll often read that the newer perceptual blend has no grey middle. For opposite colours, it does. It's just less grey. In my tests, its blue to yellow kept only about a third of its colour at the halfway point, and purple to green kept 7%. The W3C's own example gradients show the same greyish middle. Neighbours are a different story, though. Violet to pink kept 88% or more of its colour in the old default, even-steps and keep-the-colour blends.

So if your gradient joins two colours from opposite sides of the wheel, expect some grey in the middle from most blends.

The middle can come out darker than both ends

Hex numbers aren't proportional to light. They're squashed. The hex value 80 sits halfway between 00 and FF, but it gives off only about 22% of the light, and to get half the light you need BC. The old default blend averages the numbers in your hex codes anyway, so when it lands halfway between two codes, it lands short of halfway in light. In other words, the middle comes out dark.

The squash is on purpose. Our eyes don't judge light evenly: a patch giving off roughly 18% of the light looks about half as bright. So the numbers are spaced to match how we see steps of grey, and that's why black to white looks fine in the old default blend. The trouble starts with colours, because the blend averages the red, green and blue numbers separately.

Red (#FF0000) to green (#00FF00) shows it best. The old default middle is olive, #808000, which is darker than both the red and the green. That wasn't a one-off, either. In 5 of the 8 pairs I tested, the middle came out darker than both ends. Even the W3C, the group that writes the web's colour rules, says the old method gives "overly dark or greyish mixes".

The same averaging is behind a couple of other problems. It's why blue tints drift purple, as shown in Tints, tones and shades. It also gives a white to blue gradient a purplish cast, and Lighter versions of a colour without it turning purple deals with that. And if you're wondering why "even steps" has to be measured by eye rather than by the numbers, that's in Why "same brightness" colours don't look the same.

A side note: blending the way light mixes isn't the gradient fix. Mixing real amounts of light, rather than averaging hex numbers, is physically correct, and Björn Ottosson (opens in a new tab) (he designed the newer perceptual blend) recommends it for blur, resizing and see-through effects. On gradients, though, it looks washed out. Black to white is already a pale grey, #BCBCBC, at the halfway point, because half the light looks well past halfway to white.

Which colour pairs go muddy?

Neighbours are safe. It's the pairs further apart that cause trouble: opposite pairs go grey, and pairs a fair way apart often go dark. These are the eight pairs I tested. "Colour kept" is how much of the duller end's colourfulness survives at the middle of the old default blend.

So "muddy" can mean greyer, darker or both. Blue to yellow goes grey without dipping below the blue. Hot pink to teal keeps over half its colour but sinks dark. Red to cyan does both. Only the neighbours, violet and pink, come through clean. Keep an eye on that last column too, because it comes in handy when you fix a gradient by hand.

Keeping the colour means taking a detour

A hue-keeping blend goes round the colour wheel instead of across it, so the middle stays colourful. But on the way it passes through colours you didn't pick. Blue to yellow goes via teal, purple to green goes via a rusty orange, and hot pink to teal goes via periwinkle.

The detour can also run off the road. For opposite pairs, a hue-keeping blend often asks for colours a normal screen can't show. In my blue to yellow test, about three-quarters of the gradient was out of range. The browser then has to pull those colours back in, and it may simply cut the colour back rather than adjust it gently. If you want to know what a screen's range actually is, Why your brand colour looks different on your phone explains it.

So there's no single best method, and the W3C's advice lines up with that. Use even steps when you want the gradient to look evenly spaced, and keep the colour when avoiding grey matters more. In other words, choose by what bothers you more: a duller middle, or a colour you didn't ask for.

Browsers still blend hex the old way

You'd think newer apps and browsers would have fixed all this by now. Some have. But browsers still blend hex the old way, and Figma and Canva don't say what they do.

The web's colour standard, CSS Color 4 (opens in a new tab), makes a newer perceptual blend the default. Then, in section 13.2, it carves out an exception. Hex codes, colour names and the older colour formats must blend the old way, so that existing websites don't suddenly change. In my test, Chrome's engine put #7F7F7F, a plain grey, in the middle of a blue to yellow gradient written in hex. Now, write one colour in a newer format, or name a newer method in the code, and the whole gradient switches. The code for that is in For the curious below.

Photoshop is further along. It offers three gradient methods (opens in a new tab), Perceptual, Linear and Classic, and Perceptual has been its default since late 2021. Illustrator added a Perceptual option in 2025.

Figma and Canva, on the other hand, document nothing about how they blend. Figma's gradient help (opens in a new tab) explains adding and moving stops, and there's no blending setting at all. Users have been asking for one since 2022, and on 15 September 2026 Figma staff replied that there was no update (opens in a new tab). Canva's help (opens in a new tab) lets you use up to 10 colours, each with its own transparency, and it's silent on blending too. You can't look the answer up, but you can find it out yourself in two minutes, and the test in the next section shows you how.

What should you do differently in your next gradient?

Pick your pair with the wheel in mind, and then set the middle colours yourself.

1. Pick neighbours, or two shades of one colour. Colours that sit close together on the wheel blend cleanly whatever the app does. It's complementary and triad pairs that grey out or sink dark.
2. Add your own middle colours. One well-chosen middle stop removes half to two-thirds of the difference from an even-steps blend. Three or four stops get most pairs close enough that you'd struggle to tell them apart. Blue to yellow, the worst pair, needs about eight, and Canva's 10-colour limit leaves room for that. If you're only adding one stop, take the even-steps middle from the pairs table in this article and put it at 50%.
3. Brighten the middle if it sags. If the gradient dips dark, make your middle stop a lighter, cleaner in-between colour, and judge it by eye.
4. Test your app once. Draw a rectangle with a gradient from #0000FF to #FFFF00, export it as a full-size PNG, and eyedrop the exact centre. If you get #808080 or #7F7F7F, that's the old default. #BCBCBC means light mixing, #6CABC7 means even steps, and #00BDB0 or #00CFBD means keep the colour. Then repeat it with #FF0000 to #00FF00, where #808000 confirms the old default. In Figma, use sRGB export settings. In Canva, treat the result as a strong hint rather than proof, since exports can be colour-adjusted.
5. Fade to transparent with the same colour. Set the faded stop to your solid colour at 0%, not to plain "transparent" or white. Canva's help recommends exactly this. Browsers handle fades well now, but design apps may not.
6. Writing CSS? Name the method. A gradient that names its blending method, or uses one colour in a newer format, blends the newer way, and that has worked in Chrome, Edge, Safari and Firefox since June 2024.

Frequently asked questions

Why does my gradient go grey when I fade it to transparent?

Because the transparent end still has a colour, often black or white at 0% opacity, and some apps blend towards that colour on the way out. That's what tints the middle grey. The fix is to make the faded stop the same colour as the solid one, just at 0% opacity, which is exactly what Canva's help recommends. Current web browsers handle fades automatically, but design apps may not, so it's worth setting it yourself.

Can I change how Canva or Figma blends a gradient?

Not as a setting, as of September 2026. Canva lets you pick up to 10 colours and their transparency, and Figma lets you add and move stops, but neither of them documents or offers a choice of blending method. Figma users have been asking for one since 2022. You can get close by hand, though: add a few extra colour stops in the middle, taken from a better-blended version of the same gradient.

What do Perceptual, Linear and Classic mean in Photoshop's gradient settings?

They're three different ways of working out the in-between colours. Perceptual, the default since late 2021, blends using Oklab, a model built around how we see, so the steps look even and the middle stays brighter. Linear blends the way light physically mixes, which keeps vivid pairs bright but turns a black-to-white ramp pale grey early on. Classic is Photoshop's original method. If a gradient looks muddy, try Perceptual first.

Why does blue to yellow make grey, when blue and yellow paint make green?

Because a screen gradient isn't mixing paint. Paint takes light away: blue paint lets through blues and greens, whereas yellow paint lets through yellows, reds and greens, so only green gets past both. A screen blends coloured light instead. Blue and yellow sit opposite each other on its colour wheel, so a straight blend lands on the grey middle. Blend round the wheel, or add a green stop. Where the colour wheel came from explains the split.

For the curious

The old default is blending in gamma-encoded sRGB. "How light mixes" is srgb-linear. "Even steps" is Oklab, which is Björn Ottosson's 2020 perceptual colour space (opens in a new tab), and "keep the colour" is its polar form, OKLCH, which takes the shorter way round the hue circle unless you ask for longer hue.

CSS Color 4 §13.2 makes Oklab the default interpolation space, but legacy colours (hex, named, rgb(), hsl(), hwb()) must blend in sRGB. Write linear-gradient(in oklab, #00f, #ff0), or make one stop an oklch() colour, and the whole gradient switches. color-mix() has no such exception, and Tailwind v4 emits in oklab by default. Clean fades come from premultiplied alpha (§13.4). Out-of-range OKLCH colours should be gamut mapped, but Chromium 141 clipped them in my test. CSS Images 4 (opens in a new tab) even calls its own sRGB example "clearly too dark at the midpoint". If you'd like to see the methods side by side, Adam Argyle's Chrome guide (opens in a new tab) compares them. And banding, the visible stripes you get from too few steps, is a separate problem.