Orange and pink gradients: warm codes beyond the sunset

An orange and pink gradient blends two warm neighbours: tangerine like #f97316 or peach like #fed7aa on one side, pink like #ec4899 or blush like #fda4af on the other, usually with coral in between. Because the hues sit side by side, the blend never turns muddy. What it can turn is predictable, because the combination is shorthand for sunset. The codes below are grouped by mood, from soft peach to dark ember, so you can choose a version that feels like yours rather than like a phone wallpaper.

Colours between orange and pink

Walk from orange to pink and you pass through coral, salmon and watermelon, all of them saturated and warm. Lighten the walk and you get apricot, peach and blush. Darken it and you get rust, terracotta and raspberry. Most good orange and pink gradients use three stops from the same lightness band rather than a jump from pale peach to hot pink.

Soft peach and blush gradients

Pale orange and pink together feel like skin, linen and early morning light. That makes them a natural fit for skincare, bridal, wellness and bakeries. They also photograph well behind products, because they flatter warm tones. Set type in a deep rust rather than black; it keeps the warmth.

Coral, grapefruit and watermelon gradients

Saturated orange and pink is pure summer: grapefruit juice, beach towels, festival posters. These are loud enough to stop a scroll and friendly enough not to feel aggressive. Keep them away from very small type, and give them a calm corner.

Earthy terracotta and dusty rose

Mute both colours and the pair becomes calm and grounded, the palette of clay pots, dried flowers and sun baked walls. This is the most underused version and often the most elegant. It sits comfortably with olive, sand and cream, and works well alongside earth tone colour palettes.

Dark ember and raspberry gradients

Start from a deep brown or plum ground and let orange and pink glow out of it, and the pair stops being cheerful and becomes intimate: candlelight, embers, a cocktail menu. These carry light text easily, which makes them practical for event posters and evening offers.

How to avoid the sunset cliché

Orange to pink on a 45 degree diagonal is everywhere, from phone wallpapers to app icons, so it reads as a default. If you want the warmth without the preset, change at least one of the things below. Sunset gradients covers the literal version if that is what you want.

Text colours on orange and pink

Orange is one of the lightest saturated colours, so white text on tangerine or apricot is weaker than it looks. Deep rust or burnt umber is the reliable ink on the soft and bright versions; cream suits the dark ones. Ratios use the WCAG formula, where 4.5:1 is the usual minimum for body text and colour contrast explains the rest.

Orange and pink gradient CSS

.warm-hero {
  background-color: #fff7ed;
  background-image:
    radial-gradient(circle at 85% 20%, #fb7185 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, #fdba74 0%, transparent 50%),
    linear-gradient(160deg, #fff7ed 0%, #fed7aa 100%);
  color: #431407;
}

Layering two soft radial lights over a pale base gives a far more natural warmth than a single diagonal. If you want warmth that is unmistakably yours, Gradiently's Market lets you search Marks by colour words such as "coral" or "peach". Each Mark is one of a kind with exactly one owner at a time, and once you claim it only you can export with it.