Back to palettes

Palette

Golden Hour Glow

Capturing the vibrant and tender hues of sunlight as it dips below the horizon.

warmenergetic5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Golden Hour 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 Golden Hour Glow.

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

Data visualization

#F9E79F#F39C12#E67E22#D35400#F5B041

Palette guide

How to use Golden Hour Glow

Overview

This "Golden Hour Glow" palette evokes warmth and energy, drawing inspiration from the magical moment of sunset. With its vibrant range from the soft #F9E79F and luminous #F5B041 to the rich #F39C12, earthy #E67E22, and deep #D35400, it offers a versatile spectrum for creating inviting and dynamic digital experiences. Designers can leverage this palette to infuse projects with a sense of optimism and natural beauty, ensuring a visually stimulating and emotionally resonant user interface. Developers will find these warm, harmonious tones easy to implement for brand consistency across various platforms, from web applications to mobile interfaces, making it ideal for projects requiring a memorable and engaging visual identity.

Best used for

  • Travel and hospitality branding (resorts, travel agencies)
  • Food and beverage packaging or restaurant websites
  • Event promotion and invitations (weddings, festivals)
  • Lifestyle blogs and wellness apps (yoga, meditation)
  • E-commerce sites for artisan goods or natural products
  • Children's educational content or playful interfaces

Suggested color roles

primary

#F39C12 (Vibrant Orange). Role: A strong, energetic primary for headers, key call-to-action buttons, or main interactive elements, signaling warmth and enthusiasm.

secondary

#E67E22 (Burnt Orange). Role: Provides depth and contrast to the primary, suitable for subheadings, active navigation states, or secondary informational panels.

accent

#D35400 (Deep Orange). Role: A powerful, attention-grabbing accent for critical alerts, small interactive elements, or progress indicators where high visibility is crucial.

background

#F9E79F (Pale Yellow). Role: A soft, luminous background that provides a warm base without overpowering content, ideal for main content areas or subtle branding.

text

#D35400 (Deep Orange) or a dark charcoal/black for maximum readability on lighter backgrounds. Role: #D35400 can be used for headings or short, impactful text on light backgrounds like #F9E79F. For body text, a dark neutral (e.g., #333333) is recommended for legibility.

Accessibility notes

  • Ensure sufficient contrast for text: #D35400 on #F9E79F may not meet AA standards for small text; use a darker neutral or larger font.
  • Avoid placing #F5B041 text directly on #F9E79F backgrounds for readability issues; opt for darker shades for foreground elements.
  • Use #F39C12 or #E67E22 for larger graphical elements or headings to maintain visual impact while aiding legibility.
  • Test all color combinations with a contrast checker, particularly for interactive elements and critical information, to meet WCAG guidelines.

Recommended combinations

Warm Sunset

Ideal for header sections, hero images, or banners that need to convey warmth and inviting energy.

#F9E79F · #F39C12 · #E67E22

Energetic Contrast

Effective for call-to-action buttons, interactive elements, or warning messages that require immediate attention and high contrast.

#F5B041 · #D35400 · #F39C12

Subtle Glow

Perfect for background gradients, subtle hover states, or secondary informational cards where a gentle, warm progression is desired.

#F9E79F · #F5B041 · #E67E22

CSS variables

:root {
  --golden-hour-glow-2-1: #F9E79F;
  --golden-hour-glow-2-2: #F39C12;
  --golden-hour-glow-2-3: #E67E22;
  --golden-hour-glow-2-4: #D35400;
  --golden-hour-glow-2-5: #F5B041;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "golden-hour-glow-2": {
        1: "#F9E79F",
        2: "#F39C12",
        3: "#E67E22",
        4: "#D35400",
        5: "#F5B041",
      }
    }
  }
}

Related searches

warm color palette UI designsunset color scheme webvibrant orange yellow paletteenergetic brand colorsgolden hour aesthetic hex codes

Palette colors

Hex values

Color 1#F9E79F
·
Color 2#F39C12
·
Color 3#E67E22
·
Color 4#D35400
·
Color 5#F5B041
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.3:1Fail
3.4:1AA18
1.5:1Fail
2
1.8:1Fail
1.3:1Fail
1.9:1Fail
1.2:1Fail
3
2.3:1Fail
1.3:1Fail
1.5:1Fail
1.5:1Fail
4
3.4:1AA18
1.9:1Fail
1.5:1Fail
2.2:1Fail
5
1.5:1Fail
1.2:1Fail
1.5:1Fail
2.2:1Fail

Similar palettes

More like Golden Hour Glow

View all warm
Saffron Bloom
Sunset Inferno Blaze
Arid Twilight Glow
Crimson Sunset Mesa
Curry Tint
Fiery Mesa Horizon