Why some gradients go grey in the middle, and how to stop it

A muddy gradient is a blend that goes grey, brown or dull in the middle, even though both of its colours are bright. It happens because most tools blend colours in the sRGB colour space, mixing red, green and blue values in straight lines. When the two colours sit on opposite sides of the colour wheel, those straight lines meet near grey. The fix is to choose the route the blend takes: add a colour in the middle, blend in OKLCH, or use hues that are closer together.

Why opposite colours turn grey

Look at the numbers. Pure blue is red 0, green 0, blue 255. Pure yellow is red 255, green 255, blue 0. Halfway between them, every channel lands on about 128, which is #808080: a mid grey. The same thing happens with red and cyan, orange and azure, or any other complementary pair. Mathematically, the straight line between them passes right through the grey axis.

A second, subtler problem is the dark dip. Blue to red in sRGB passes through #800080, a purple that is darker than either end, so the middle of the blend looks like a bruise. The colours are not opposite, but the blend still loses brightness where they meet.

Fix 1: add a middle stop

The simplest fix works in every tool and every format: choose the colour you want in the middle and place it there yourself. Pick a bright, saturated colour that sits between the two ends on the colour wheel. Between blue and yellow, that is teal or green. Between orange and blue, a pink takes the warm route, the one most sunset gradients use.

Fix 2: blend in OKLCH

OKLCH describes colour as lightness, chroma (intensity) and hue, and it was designed so that equal steps look like equal changes to people. Blending in OKLCH keeps chroma up and turns around the hue wheel instead of cutting straight across it, so the blend never collapses into grey. In CSS, you ask for it with one phrase. You can also choose which way round the wheel to go.

/* Default for hex colours: sRGB, grey in the middle */
.muddy   { background: linear-gradient(90deg, #0000ff, #ffff00); }

/* OKLCH, shorter way round the wheel: through teal and green */
.clean   { background: linear-gradient(90deg in oklch, #0000ff, #ffff00); }

/* OKLCH, longer way round: through magenta, red and orange */
.sunset  { background: linear-gradient(90deg in oklch longer hue, #0000ff, #ffff00); }

/* OKLab: straight line, but with even lightness */
.even    { background: linear-gradient(90deg in oklab, #0000ff, #ffff00); }

OKLab is worth knowing too. It is the default for modern CSS colour syntax and gives smooth, even blends, but because it still travels in a straight line, true opposites lose intensity in the middle. Use OKLab for colours that are already close; use OKLCH or a middle stop for colours that are far apart. For the full syntax, see OKLCH gradients in CSS, or explore the space at oklch.com.

Fix 3: choose closer hues

The most reliable way to avoid mud is not to ask for it. Colours that sit next to each other on the wheel, like blue and violet or orange and pink, blend cleanly in any colour space because their straight line never goes near grey. That is why analogous colours make the safest gradients, and why complementary pairs need care; see complementary colours.

Fix 4: watch the lightness

Mud is not only grey. A blend can also look dull when its lightness sags in the middle, or when one end is much darker than the other and the transition happens in a narrow band. Keep the lightness of your stops roughly even, or change it steadily in one direction, and give the transition room. A stop position of 40% or 60% often looks more natural than a mechanical 50%.

Muddiness gets worse in mesh gradients, where several colours meet at once. The same rules apply to every overlap: keep neighbours close, and put a bridge between opposites.

If you would rather start from a blend that is already balanced, search the Market by colour words such as "blue and yellow" or "deep teal" and design with any Mark you find.