Palette

Amber Sundown Glow

Evokes the comforting warmth and soft hues of a long, amber-soaked sundown.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Amber Sundown Glow reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Amber Sundown Glow.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#f9d379#f2b263#e07a5f#cc5840#8e3f2a

Palette guide

How to use Amber Sundown Glow

Overview

The "Amber Sundown Glow" palette evokes the comforting warmth and soft hues of a long, amber-soaked sundown. It transitions from the bright #f9d379 (Golden Yellow) through the warm #f2b263 (Peach Orange) to the more intense #e07a5f (Coral Red) and #cc5840 (Burnt Coral). The deep, grounding #8e3f2a (Dark Reddish Brown) provides a rich anchor, completing this natural gradient. This palette is ideal for designs seeking a serene, inviting, and slightly melancholic yet beautiful aesthetic, perfect for lifestyle brands, cozy digital interfaces, or artistic projects.

Best used for

Lifestyle and wellness branding (e.g., meditation, self-care)
Autumnal and evening event invitations
Photography filters or photo editing presets
Cozy blog themes or editorial layouts
Interior design for warm, inviting spaces
Digital interfaces for apps focused on relaxation or journaling

Suggested color roles

primary

Use #e07a5f as a warm, inviting coral red, excellent for main headings, important calls-to-action, or a distinctive brand element.

secondary

Employ #f2b263 as a soft, peachy orange, perfect for subheadings, navigation, or complementary content blocks.

accent

Apply #f9d379 as a bright, luminous golden yellow, ideal for subtle highlights, icons, or decorative elements that need to glow.

background

A very light cream or off-white (e.g., #FFFDF7) to allow the warm colors to radiate and ensure readability.

text

For primary body text on light backgrounds, use #8e3f2a, a deep, reddish-brown that offers excellent contrast and strong emphasis.

Accessibility notes

Ensure #8e3f2a text has excellent contrast against #FFFDF7 or a very light cream background (WCAG AA/AAA).
Avoid using #f9d379 or #f2b263 for small text on light backgrounds, as contrast may be insufficient.
When using #e07a5f for text, pair it with a very light background for optimal readability.
The progressive warmth of the palette means careful contrast checking is necessary when using colors adjacent in value.

Recommended combinations

Sunset Gradient

A smooth transition from deep to light, perfect for backgrounds, banners, or visual storytelling.

#8E3F2A · #CC5840 · #F2B263

Golden Hour

A bright accent, a warm primary, and a deep grounding color, creating a balanced and inviting design.

#F9D379 · #E07A5F · #8E3F2A

Twilight Hues

A harmonious blend of mid-tones, ideal for layered elements or subtle visual interest.

#CC5840 · #F2B263 · #E07A5F

CSS variables

:root {
  --amber-sundown-glow-1: #f9d379;
  --amber-sundown-glow-2: #f2b263;
  --amber-sundown-glow-3: #e07a5f;
  --amber-sundown-glow-4: #cc5840;
  --amber-sundown-glow-5: #8e3f2a;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "amber-sundown-glow": {
        1: "#f9d379",
        2: "#f2b263",
        3: "#e07a5f",
        4: "#cc5840",
        5: "#8e3f2a",
      }
    }
  }
}

Hex values

Color 1#f9d379

Color 2#f2b263

Color 3#e07a5f

Color 4#cc5840

Color 5#8e3f2a

Accessibility

Contrast checker

1.3:1Fail

2.1:1Fail

2.9:1Fail

5.1:1AA

1.3:1Fail

1.6:1Fail

2.2:1Fail

3.9:1AA18

2.1:1Fail

1.6:1Fail

1.4:1Fail

2.5:1Fail