Yellow gradient: bright codes that don't go green

A yellow gradient looks bright and happy when every stop leans warm: cream, butter, lemon, gold, orange. It goes wrong in two predictable ways. Blend it towards blue or teal and the middle turns green; darken it with grey and it turns olive. Keep the hue on the warm side of yellow, deepen it with amber rather than black, and it stays sunshine all the way across. The codes below are built on that rule.

Why yellow gradients turn green or muddy

Yellow sits right next to green on the colour wheel, much closer than most people expect. That makes it fragile in three situations.

• Blending towards cool colours. Between yellow and cyan, teal or blue, the browser has to pass through green. A sunny yellow to sky blue blend gets a lime or sage stripe in the middle.
• Darkening with black or grey. Our eyes read a dark, low saturation yellow as olive or khaki rather than "dark yellow". There is no deep yellow that still looks yellow.
• Starting from a lemon that already leans green. Acid lemons such as #e4f04a look fresh alone but pull every neighbouring stop towards lime.

The same grey middle problem affects any opposite colours, and muddy gradients covers it in general. Yellow simply shows it first, because green is so close.

Bright yellow gradient codes

These are the loud ones: summer, sale banners, kids' brands, festivals, warning signage done nicely. Each pairs yellow with a warmer partner so there is movement without drifting green.

Bright yellow is tiring in large amounts, so use these on posts and banners rather than a whole website. On a story at 1080×1920, a yellow blend that fades to orange at the bottom gives the eye a place to land and keeps the brightest part near the headline area at the top.

Light yellow gradients: butter and cream

Pale yellows behave like warm paper. They make excellent backgrounds for menus, invitations, newsletters and anything with a lot of reading, because dark type sits on them comfortably. Keep at least one stop close to white so the yellow reads as light, not as a tint over everything.

Golden and dark yellow gradients without olive

To make yellow feel rich, do not darken it. Shift it. Move the deeper stops towards amber, ochre and brown, and yellow turns into gold, honey and mustard instead of khaki. For metallic finishes specifically, gold gradients shows how to fake the shine.

Yellow and blue gradients without the green middle

Yellow and blue are a classic pairing, but a straight blend between them produces a green band. You have three good options: put a light stop between them, route the blend through pink and violet, or keep the two colours apart as areas rather than a blend.

In modern CSS you can also ask the browser to take the long way round the colour wheel. Interpolating in OKLCH with longer hue sends yellow to blue through orange, pink and violet instead of green. Support and syntax are covered in CSS gradients in OKLCH.

.banner {
  /* fallback for older browsers: route through pink by hand */
  background: linear-gradient(90deg, #fde047, #f9a8d4, #818cf8);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .banner {
    background: linear-gradient(in oklch longer hue 90deg, #fde047, #818cf8);
  }
}

Text on a yellow gradient

Yellow is the lightest saturated colour there is, so white type disappears on it. White on #facc15 measures roughly 1.5 to 1, while a deep brown like #422006 measures above 9 to 1 on the same yellow. Use dark type almost everywhere, and save white for the deepest golds. Colour contrast and accessibility has the thresholds.

In Gradiently, Auto ink makes that call for you, picking light or dark type for each line from the Mark's own palette, so a yellow design does not need a manual contrast check every time you resize it. If yellow is part of your identity, yellow colour meaning covers what it signals, and orange gradients are its natural next door neighbour.