Orange gradient

Orange is warm, friendly and attention-grabbing without the alarm of red. In gradients it naturally runs toward yellow (sunrise) or toward red and pink (sunset). Below are 12 orange gradients — copy the CSS, download a PNG, or open one in the editor.

  • Aa · 3.8:1

    White text: Fails AA — large text only (3:1)

    Orange two-tone

    #ca6800 → #773a00
  • Aa · 2.8:1

    Black text: Fails AA — no plain text

    Orange light to deep

    #ffd4b8 → #8f4800
  • Aa · 4.3:1

    Black text: Fails AA — large text only (3:1)

    Orange analogous left

    #d24c49 → #b17000
  • Aa · 4.9:1

    Black text: Passes AA

    Orange analogous right

    #ca6800 → #c19900
  • Aa · 12.1:1

    Black text: Passes AA

    Orange pastel

    #ffe0d6 → #efca99
  • Aa · 9.4:1

    White text: Passes AA

    Orange midnight

    #2d1200 → #683c00
  • Aa · 5.1:1

    Black text: Passes AA

    Orange neon

    #ff572c → #ae7c00
  • Aa · 1.6:1

    Black text: Fails AA — no plain text

    Orange three-step

    #ffbaae → #c16300 → #513400
  • Aa · 1.9:1

    White text: Fails AA — no plain text

    Orange glow

    #ffa565 → #563000
  • Aa · 3.1:1

    Black text: Fails AA — large text only (3:1)

    Orange muted

    #c09476 → #7f5b2f
  • Aa · 3.7:1

    Black text: Fails AA — large text only (3:1)

    Orange to white

    #ac5700 → #fdf7f3
  • Aa · 5.1:1

    White text: Passes AA

    Orange to black

    #ac5700 → #180901

Using orange gradients well

Good for: call-to-action areas, food and delivery apps, autumn and sunset themes, energy brands.

Pairing: Orange → pink, orange → yellow and orange → deep red all blend cleanly. A teal or blue accent gives the strongest complementary contrast.

Readable text: Orange is light for its saturation: white text rarely reaches 4.5:1 on bright orange. Use dark text, or a burnt orange below about 50% OKLCH lightness. The ratio on each swatch is the worst point across the gradient (WCAG 2: 4.5:1 for body text, 3:1 for large text). Check custom pairs in the contrast checker.

These gradients are blended in OKLCH so the middle stays clean; the copied CSS includes a pre-blended fallback line for older browsers.

Questions

What is the CSS code for a orange gradient?

A simple orange gradient is background: linear-gradient(in oklch 135deg, #ca6800 0%, #773a00 100%); Copy any gradient on this page for ready CSS, including a fallback for older browsers.

What colours go well with orange in a gradient?

Orange → pink, orange → yellow and orange → deep red all blend cleanly. A teal or blue accent gives the strongest complementary contrast.

What text colour is readable on a orange gradient?

Orange is light for its saturation: white text rarely reaches 4.5:1 on bright orange. Use dark text, or a burnt orange below about 50% OKLCH lightness. Each swatch on this page shows the better of black or white text, its worst-case WCAG contrast ratio, and whether it passes AA (4.5:1), is only good for large text (3:1), or fails — for failing swatches, add a darker scrim behind the text or pick a deeper variant.

How do I download a orange gradient image?

Press “PNG” under any gradient to download a 1600×900 image, rendered in your browser. Open it in the editor to change size-independent details first, such as angle or colours.

Where are orange gradients typically used?

Common uses: call-to-action areas, food and delivery apps, autumn and sunset themes, energy brands.

More colour gradients