Palette

Golden Hour Glow

A radiant gradient of oranges and browns, mirroring the last rays of a warm afternoon sun.

warmnatural5 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

#F9C784#FFB76B#E87F3B#B85028#7F2F12

Palette guide

How to use Golden Hour Glow

Overview

The Golden Hour Glow palette captures the enchanting warmth of a late afternoon sun, offering designers a rich spectrum of oranges and earthy browns. Featuring radiant hues like the soft #F9C784 and the vibrant #FFB76B, this collection transitions seamlessly into deeper, grounding tones such as #E87F3B, #B85028, and the profound #7F2F12. Ideal for evoking feelings of comfort, nature, and rustic elegance, this palette is perfect for projects requiring a natural, inviting, and emotionally resonant aesthetic. Developers can leverage these hex codes to create cohesive digital experiences, from subtle background gradients to impactful call-to-action buttons, ensuring a harmonious and visually appealing user interface.

Best used for

Photography portfolio websites
Autumnal event branding or marketing
Cozy café or restaurant interiors and branding
Nature-themed product packaging (e.g., organic food, skincare)
Outdoor adventure or travel blogs
E-commerce sites for handcrafted goods or rustic decor

Suggested color roles

primary

Use #E87F3B as a central brand color for headlines and primary UI elements, providing a warm and inviting anchor.

secondary

Employ #FFB76B for complementary sections, subheadings, or secondary buttons, offering a brighter, more approachable warmth.

accent

Reserve #7F2F12 for impactful accents like hover states, critical calls-to-action, or important icons, adding depth and strong contrast.

background

Utilize #F9C784 for subtle background areas or card surfaces, ensuring a light, airy, and warm foundation without overpowering content.

text

For dark backgrounds, use a clean white or near-white like #FFFFFF. For lighter backgrounds, a deep charcoal like #333333 or the palette's own #7F2F12 provides excellent readability.

Accessibility notes

Ensure sufficient contrast when pairing lighter colors like #F9C784 with text. A dark text color is crucial.
Avoid placing #FFB76B text directly on #F9C784 backgrounds without checking WCAG AA or AAA contrast ratios.
The darker colors, #B85028 and #7F2F12, offer good contrast for lighter text (#FFFFFF).
Use a contrast checker for all text and interactive element pairings, especially for buttons and links, to ensure readability for all users.

Recommended combinations

Warm Sunset

Ideal for header banners or hero sections, creating a vibrant, inviting welcome.

#F9C784 · #FFB76B · #E87F3B

Earthy Depth

Excellent for footer designs, detailed content blocks, or product feature sections, conveying richness and stability.

#E87F3B · #B85028 · #7F2F12

Subtle Glow

Perfect for subtle branding elements, iconography, or data visualizations where a distinct, natural contrast is desired.

#F9C784 · #B85028 · #7F2F12

CSS variables

:root {
  --golden-hour-glow-3-1: #F9C784;
  --golden-hour-glow-3-2: #FFB76B;
  --golden-hour-glow-3-3: #E87F3B;
  --golden-hour-glow-3-4: #B85028;
  --golden-hour-glow-3-5: #7F2F12;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "golden-hour-glow-3": {
        1: "#F9C784",
        2: "#FFB76B",
        3: "#E87F3B",
        4: "#B85028",
        5: "#7F2F12",
      }
    }
  }
}

Hex values

Color 1#F9C784

Color 2#FFB76B

Color 3#E87F3B

Color 4#B85028

Color 5#7F2F12

Accessibility

Contrast checker

1.1:1Fail

1.8:1Fail

3.2:1AA18

5.8:1AA

1.1:1Fail

1.6:1Fail

2.9:1Fail

5.3:1AA

1.8:1Fail

1.6:1Fail

1.8:1Fail

3.2:1AA18

2.9:1Fail

1.8:1Fail

5.8:1AA

5.3:1AA

3.2:1AA18

1.8:1Fail

Similar palettes

More like Golden Hour Glow

Golden Hour Glow

See it in context.

Ready when you are.

Built with Golden Hour Glow.

How to use Golden Hour Glow

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Warm Sunset

Earthy Depth

Subtle Glow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Golden Hour Glow