# Orange and pink gradients: warm codes beyond the sunset

[Canonical HTML page](https://gradiently.design/guide/orange-pink-gradient)

Orange and pink are next door to each other, which makes them one of the warmest, easiest blends there is. The challenge is not mixing them; it is not looking like every sunset preset.

## The short version

- An orange and pink gradient blends neighbouring warm hues such as tangerine #f97316, coral #fb7185 and pink #ec4899, so the transition stays bright without a bridge colour.
- The pair is so closely associated with sunsets that a plain diagonal from orange to pink reads as a preset, and changing the ground or the lightness avoids that.
- Bright orange and hot pink are both too light for small white text, while a deep rust or burnt brown ink reads well on the softer versions.
- Earthy versions using terracotta and dusty rose feel calm and grown up, and dark versions with ember and raspberry feel warm and nocturnal.
- Orange and pink suit food, drink, beauty, summer campaigns, travel and any brand that wants to feel warm and welcoming.

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.

- Cream: #fff7ed
- Peach: #fed7aa
- Blush: #fda4af
- Apricot: #fb923c
- Coral: #fb7185
- Tangerine: #f97316
- Hot pink: #ec4899
- Rust: #9a3412
- Burnt umber: #431407

The orange to pink range, with a cream and two dark browns for grounds and type.

## 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.

- Peach linen: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`
- Apricot blush: `radial-gradient(circle at 70% 30%, #ffe4e6 0%, #fed7aa 60%, #fdba74 100%)`
- First light: `linear-gradient(180deg, #fde68a 0%, #fecaca 55%, #fbcfe8 100%)`

Soft orange and pink. Rust or burnt umber ink reads well on all three. [Peach gradients](https://gradiently.design/guide/peach-gradient) has more of this family.

## 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.

- Tangerine to pink: `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`
- Grapefruit: `radial-gradient(circle at 25% 75%, #fdba74 0%, #fb7185 45%, #e11d48 100%)`
- Watermelon: `linear-gradient(160deg, #fb923c 0%, #f43f5e 70%, #be185d 100%)`
- Mango smoothie: `linear-gradient(90deg, #fbbf24 0%, #fb923c 35%, #f472b6 100%)`

Bright orange and pink gradients. Each stop is a close neighbour of the next, so the middle stays vivid. [Coral gradients](https://gradiently.design/guide/coral-gradient) goes deeper.

## 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](https://gradiently.design/guide/earth-tone-colors).

- Clay and rose: `linear-gradient(135deg, #f5e6d8 0%, #d9967a 55%, #c27c7c 100%)`
- Terracotta dusk: `radial-gradient(circle at 80% 20%, #e8a598 0%, #b4644a 50%, #6b2f22 100%)`
- Dried petals: `linear-gradient(180deg, #faf3ec 0%, #e7b9a8 50%, #b97a6f 100%)`

Muted orange and pink. These feel handmade and calm, and suit interiors, ceramics, florists and slow living brands.

> **Behind product photos** Warm, muted blends flatter skin, wood, bread and ceramics because they echo those colours. Pick a stop from the product itself and build the gradient outwards from it. [Product photo backgrounds](https://gradiently.design/guide/product-photo-backgrounds) shows how.

## 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.

- Ember: `radial-gradient(circle at 75% 80%, #fb923c 0%, #9f1239 35%, #1c0708 80%)`
- Rust to raspberry: `linear-gradient(160deg, #1f0a0a 0%, #7c2d12 45%, #db2777 100%)`
- Last light: `radial-gradient(ellipse at 50% 100%, #fdba74 0%, #be185d 40%, #2a0a14 85%)`

Dark orange and pink gradients. Add grain, because dark warm blends band easily.

## 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](https://gradiently.design/guide/sunset-gradient) covers the literal version if that is what you want.

### Preset

- Hot orange to hot pink, two stops
- Straight 45 degree diagonal
- Colour spread evenly across the frame
- White text over the brightest part

### Considered

- A ground first: cream, clay or ember
- Light from one corner with a radial gradient
- Uneven stops, with one colour leading
- Rust ink on soft versions, cream ink on dark ones

## 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](https://gradiently.design/guide/color-contrast-accessibility) explains the rest.

| Background | Text | Contrast | Verdict |
| --- | --- | --- | --- |
| Apricot `#fb923c` | White | 2.3:1 | Fails |
| Tangerine `#f97316` | White | 2.8:1 | Fails for most text |
| Peach `#fed7aa` | Burnt umber `#431407` | 11.6:1 | Excellent |
| Coral `#fb7185` | Burnt umber `#431407` | 5.8:1 | Good |
| Deep orange `#c2410c` | White | 5.2:1 | Good |
| Raspberry `#be185d` | White | 6.0:1 | Good |

If white text matters to your design, darken the stops behind it to deep orange or raspberry.

A portrait bar promotion with cream lettering on a dark gradient glowing orange and raspberry

A bar promotion on ember to raspberry, with cream type on the dark side.

A square skincare post with dark brown lettering on a soft peach and blush gradient

A skincare post on peach and blush with burnt umber ink.

## Orange and pink gradient CSS

```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;
}
```

A cream ground with a coral light at the top right and apricot at the bottom left, and burnt umber text.

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.

## FAQ

### What is a good orange and pink gradient code?

A bright classic is `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`. For a softer version, try `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`.

### Do orange and pink go together?

Yes. They are neighbours on the colour wheel with coral between them, so they blend cleanly and feel warm.

### What colour text goes on an orange and pink gradient?

A deep rust or burnt umber such as `#431407` reads well on soft and bright versions. White only works on the deeper stops, like `#c2410c` or `#be185d`.

### How do I make an orange and pink gradient look less like a sunset?

Start from a ground such as cream, clay or a dark ember, light it from one corner instead of a diagonal, and let one colour lead.

### What colour is between orange and pink?

Coral, around `#fb7185`, with salmon and watermelon as close relatives.