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.
On this page
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.
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.
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 goes further.
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.
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 before exporting.
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 explains why, and complementary colours shows how to use the pull safely.
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.
#fdba74White text
Dark text #1c1917
#f97316White text
Dark text #1c1917
#ea580cWhite text
Dark text #1c1917
#c2410cWhite text
Dark text #1c1917
#9a3412White text
Dark text #1c1917
When the brightest orange runs straight behind the headline, the words start to fight the colour.
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 for the syntax in full.
.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 */
}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.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile