Sunset Color Palette: 8 Warm Schemes with Hex Codes & CSS

There is a reason designers keep coming back to the sunset color palette: it captures one of the most universally loved moments in nature. The warm gradient of a sky shifting from gold to coral to deep purple feels nostalgic, calming, and energetic all at once. That emotional pull makes sunset palettes a favourite for everything from landing pages and app onboarding screens to wedding invitations and Instagram branding.

In this guide you will find ready-to-use sunset palettes with hex codes, the colour theory that makes them work, and copy-paste CSS so you can drop a sunset straight into your next project. Want to generate your own variations? Open the PaletteCSS palette browser or build a warm CSS gradient in seconds.

What makes a sunset color palette work?

Sunsets are nature's masterclass in analogous colour harmony — colours that sit next to each other on the colour wheel. A classic sunset moves through reds, oranges, and yellows, often anchored by a cooler purple or navy where the sky meets dusk. Because these hues are neighbours, they blend without clashing, which is exactly why a sunset gradient looks so effortless.

Three ingredients show up in almost every great sunset palette:

• A warm core — coral, orange, and gold carry the energy.
• A soft highlight — pale peach or cream keeps it from feeling heavy.
• A cool anchor — a dusky purple, magenta, or deep navy adds depth and contrast.

New to mixing colours like this? Our colour theory basics guide breaks down analogous and complementary harmony in plain English.

8 sunset color palettes (with hex codes)

1. Classic Golden Hour

The quintessential warm sunset — gold melting into deep coral.

#FFD56B · #FFB86C · #FF8E72 · #FF6B6B · #C9456B

2. Tropical Sunset

Punchier and more saturated, great for bold, playful brands.

#FFF3B0 · #FFC15E · #FF8A5C · #FF5E78 · #A0306E

3. Dusty Desert Sunset

Muted, earthy tones for a calmer, more grown-up feel.

#F3D9B1 · #E9A178 · #CE6A3B · #9C4722 · #5E2A1E

4. Pink Sky

Soft, romantic pinks fading into lavender — perfect for weddings.

#FFE3E3 · #FFB3C6 · #FF8FA3 · #C9789C · #7D5A8C

5. Fiery Dusk

High-drama reds and magentas for a bold statement.

#FFC15E · #FF7B54 · #FF5054 · #D62246 · #5C1A3B

6. Ocean Sunset

Warm sky meeting cool water — coral against teal.

#FFD56B · #FF8E72 · #FF5E78 · #5A8FAE · #1E5266

7. Pastel Sunset

Soft and dreamy — ideal for light, airy interfaces.

#FFF1E6 · #FFD6BA · #FFB5A7 · #F9A1BC · #C9B6E4

8. Deep Twilight

The last light of day sinking into night.

#FBC687 · #F08A5D · #B83B5E · #6A2C70 · #2B2640

How to use a sunset palette in CSS

Once you have picked a palette, save the colours as CSS variables so they are easy to reuse:

:root {
  --sunset-gold:   #FFD56B;
  --sunset-orange: #FF8E72;
  --sunset-coral:  #FF6B6B;
  --sunset-plum:   #C9456B;
}

Or turn the whole palette into a warm background gradient:

.hero {
  background: linear-gradient(135deg, #FFD56B 0%, #FF8E72 50%, #C9456B 100%);
}

Want to tweak the angle and stops visually? The CSS gradient gallery lets you preview and copy the exact code. For more on the syntax, see how to use CSS gradients or MDN's linear-gradient reference.

Tips for designing with sunset colors

• Let one colour lead. Pick a single hero hue — usually the coral or orange — and use the rest as accents.
• Balance warmth with neutrals. Pair your sunset with off-white, warm grey, or charcoal text so it does not overwhelm.
• Mind contrast. Light gold on white fails accessibility checks, so always test text contrast against your background.
• Use the cool anchor sparingly. A touch of plum or navy makes the warm tones pop without stealing the show.

Frequently asked questions

What colors are in a sunset palette?

A sunset palette typically blends warm tones — gold, orange, and coral — with a cooler accent like dusky purple or deep magenta. The warm colours create energy while the cool anchor adds depth.

What are good hex codes for a sunset gradient?

A reliable sunset gradient runs from #FFD56B (gold) through #FF8E72 (orange) to #C9456B (plum). Adjust the middle stops to make it warmer or cooler.

Are sunset palettes good for websites?

Yes — they work beautifully for hero sections, calls to action, and lifestyle or travel brands. Just pair them with neutral text and check colour contrast for accessibility.

Ready to build your own? Browse more color palettes, explore aesthetic color palettes, or create a warm sunset gradient and copy the CSS instantly.