# Orange gradient: 25 warm codes from peach to burnt

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

Orange is one of the warmest colours you can put on a screen, and one of the easiest to get wrong. Here are 25 copyable blends grouped by mood, plus the pairings and type rules that make them work.

## The short version

- An orange gradient reads warm, friendly and energetic, and it changes mood sharply depending on how light or dark the oranges are.
- Orange blends cleanly towards its neighbours: yellow, amber, red, pink and brown.
- Blending orange directly into blue or teal usually produces a grey or muddy middle, so keep complementary colours as a separate accent instead.
- White text fails contrast on bright orange such as #f97316; use near black or deep brown type there, or move white text onto burnt orange or darker.
- Dark grounds with a single orange light look premium, while pale peach blends suit gentle, everyday brands.

An **orange gradient** blends two or more oranges, often with a neighbouring yellow, red or pink, and few blends feel warmer. Light peach and apricot versions feel soft and welcoming, bright tangerine feels loud and playful, and burnt orange or rust feels earthy and grown up. Below are 25 codes grouped by those moods, followed by what to pair them with and how to set type on them without losing your words.

## Soft orange gradients: peach and apricot

Pale oranges are the friendliest way into the colour. They sit close to skin and bread and late afternoon light, which is why bakeries, skincare and children's brands lean on them. Keep the lightest stop almost cream, so the blend has somewhere calm to rest. For a whole article on the palest end, see [peach gradients](https://gradiently.design/guide/peach-gradient).

- Cream to apricot: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%)`
- Soft apricot: `linear-gradient(160deg, #ffedd5 0%, #fdba74 100%)`
- Peach skin: `linear-gradient(135deg, #fde2cf 0%, #fbb995 55%, #f6a07a 100%)`
- Morning glow: `radial-gradient(circle at 30% 25%, #fff1e0 0%, #fcd5b0 50%, #f8b98a 100%)`
- Butter to melon: `linear-gradient(180deg, #fef3c7 0%, #fed7aa 50%, #fdba74 100%)`

Five pale orange gradients. Each starts near cream, so there is always a quiet area for dark text.

## Bright orange gradients: tangerine and citrus

Saturated orange is pure energy. It suits sales, food delivery, sport, festivals and anything that has to be noticed at thumbnail size. The risk is that bright orange flattens into a single loud block, so give it a lighter stop towards yellow or a deeper one towards red. That small shift is what makes it look like light rather than paint.

- Tangerine: `linear-gradient(135deg, #fdba74 0%, #f97316 100%)`
- Citrus burst: `linear-gradient(135deg, #fbbf24 0%, #f97316 60%, #ea580c 100%)`
- Orange to watermelon: `linear-gradient(120deg, #fb923c 0%, #f43f5e 100%)`
- Hot spot: `radial-gradient(circle at 70% 30%, #fed7aa 0%, #fb923c 40%, #ea580c 100%)`
- Orange to lemon: `linear-gradient(90deg, #f97316 0%, #facc15 100%)`

Bright oranges work best with one stop that leans to yellow or pink. The blend then reads as light, not a flat fill.

## Sunset and amber orange gradients

Running orange vertically from gold at the top to red or plum at the bottom gives you a sunset, probably the most familiar gradient there is. Amber blends are the quieter cousin: honey, marmalade and whisky tones that feel rich without shouting. If you want the full sky treatment, [sunset gradients](https://gradiently.design/guide/sunset-gradient) goes further.

- Classic sunset: `linear-gradient(180deg, #fcd34d 0%, #f97316 50%, #be123c 100%)`
- Dusk: `linear-gradient(180deg, #fdba74 0%, #f472b6 55%, #7c3aed 100%)`
- Honey amber: `linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #b45309 100%)`
- Marmalade: `linear-gradient(160deg, #fb923c 0%, #c2410c 60%, #7c2d12 100%)`
- Last light: `linear-gradient(180deg, #f59e0b 0%, #dc2626 60%, #450a0a 100%)`

Vertical blends read as sky. Put the lightest colour at the top and the horizon colour low down.

## Burnt orange and rust gradients

Push orange towards brown and it becomes terracotta, rust and copper: colours from clay pots, autumn leaves and old leather. These feel crafted and considered, so they suit interiors, coffee, ceramics, outdoor brands and anything with a handmade story. They also carry white text far better than bright orange does.

- Burnt orange: `linear-gradient(135deg, #ea580c 0%, #9a3412 100%)`
- Terracotta: `linear-gradient(160deg, #e07a4f 0%, #b4532a 55%, #7a3419 100%)`
- Copper: `linear-gradient(135deg, #d97706 0%, #92400e 60%, #451a03 100%)`
- Rust: `linear-gradient(180deg, #c2410c 0%, #7c2d12 100%)`
- Clay to bark: `linear-gradient(135deg, #f4c7a1 0%, #c8703f 50%, #6b2f14 100%)`

Burnt oranges sit close to brown. They are calmer, warmer and better behind white type.

## Orange light on a dark ground

The most premium way to use orange is sparingly. Start from a near black, a deep brown or a navy, and let one orange glow from a corner like an ember or a street lamp. This is the treatment for late night events, restaurants, music and anything that should feel warm after dark. Dark blends band easily, so read [dark gradient backgrounds](https://gradiently.design/guide/dark-gradient-backgrounds) before exporting.

- Ember: `radial-gradient(circle at 80% 20%, #f97316 0%, #7c2d12 35%, #120806 75%)`
- Fireside: `radial-gradient(circle at 20% 80%, #fb923c 0%, #431407 45%, #0c0a09 85%)`
- Street lamp on navy: `radial-gradient(circle at 75% 25%, #fdba74 0%, #ea580c 20%, #1e1b4b 65%, #0b0a1f 100%)`
- Coal and copper: `linear-gradient(200deg, #c2410c 0%, #3b1407 45%, #0c0a09 100%)`
- Horizon glow: `radial-gradient(ellipse at 50% 110%, #f97316 0%, #9a3412 30%, #1c0f0a 70%)`

One orange light, a lot of dark. The ground does the mood; the orange only has to glow.

## Colours that pair with an orange gradient

Orange has two kinds of good partner. Neighbours such as yellow, pink and red blend straight into it. Opposites such as deep blue and teal make it vibrate, but they should sit beside the orange as an accent, not inside the same blend, because the midpoint between them turns grey. [Muddy gradients](https://gradiently.design/guide/muddy-gradients) explains why, and [complementary colours](https://gradiently.design/guide/complementary-colors) shows how to use the pull safely.

- Cream: #fff7ed
- Apricot: #fdba74
- Tangerine: #f97316
- Rust: #9a3412
- Bark ink: #431407
- Deep blue accent: #1e3a8a
- Teal accent: #0f766e

A working orange palette: a cream ground, three oranges, a dark brown for type and two cool accents kept apart from the blend.

## Text on orange gradients

This is where most orange designs fail. White on bright tangerine looks bold but has a contrast ratio of about 2.8 to 1, well under the 4.5 to 1 that WCAG asks for in body text. Near black on the same orange scores above 6 to 1. The rule is simple: dark type on light and bright oranges, white type only from burnt orange downwards. The full method is in [colour contrast and accessibility](https://gradiently.design/guide/color-contrast-accessibility).

| Background | White text | Dark text #1c1917 |
| --- | --- | --- |
| Apricot `#fdba74` | Fails | Passes easily |
| Tangerine `#f97316` | About 2.8:1, fails | About 6.2:1, passes |
| Deep orange `#ea580c` | About 3.6:1, large text only | Passes |
| Burnt orange `#c2410c` | About 5.2:1, passes | Weak |
| Rust `#9a3412` | About 7.3:1, passes | Fails |

Contrast measured against flat colour. On a gradient, test the lightest point behind your words.

A bakery sale post with a warm orange gradient running directly behind the headline, which is hard to read

When the brightest orange runs straight behind the headline, the words start to fight the colour.

The same bakery sale post with a calmer, deeper area of the gradient behind clear headline text

The same post with a calmer area behind the words and the type colour chosen for it.

Gradiently handles this part for you. A Mark knows where the words are: it moves its calmest region behind them and Auto ink picks light or dark type line by line from the Mark's own palette, so an orange design stays readable at every size without boxes or shadows.

## Orange gradient CSS

Every code above is a single CSS value you can paste into `background`. For a section that needs both warmth and depth, layer a radial light over a linear base, and always set a solid fallback colour. Read [CSS linear gradients](https://gradiently.design/guide/css-linear-gradient) for the syntax in full.

```css
.hero {
  background-color: #9a3412; /* fallback */
  background-image:
    radial-gradient(circle at 78% 22%, #fdba74 0%, transparent 40%),
    linear-gradient(160deg, #f97316 0%, #c2410c 55%, #7c2d12 100%);
  color: #ffffff; /* safe here: the words sit on the darker lower half */
}
```

A bright apricot light over a tangerine to rust base. Place the headline low and left, where the colour is deepest.

If you want an orange look that nobody else is posting, browse the Market for warm Marks: search words like "burnt orange" or "apricot", design with any unclaimed one for free, and claim it if it becomes your brand.

## FAQ

### What colours go well with an orange gradient?

Yellow, pink, red and brown blend directly into orange. Deep blue and teal make strong accents, but keep them beside the orange rather than inside the same blend.

### What is the hex code for burnt orange?

There is no single official code, but `#c2410c` and `#cc5500` are both widely used. A burnt orange gradient such as `linear-gradient(135deg, #ea580c, #9a3412)` gives it depth.

### Can I put white text on an orange gradient?

Only on the darker oranges. White on bright tangerine fails contrast, so use near black there and save white type for burnt orange, rust and darker.

### Why does my orange and blue gradient look grey in the middle?

Orange and blue sit opposite each other on the colour wheel, so the colours between them lose saturation. Add a stop of pink or purple between them, or keep them as separate areas.

### What does an orange gradient say about a brand?

Orange usually reads as warm, friendly, playful and affordable. Darker, burnt versions shift that towards craft and confidence.