Palette

Golden Hour Embrace

Bathe in the warm, inviting glow of the golden hour, perfect for sun-drenched memories.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFEB8C#FFD072#FFB462#F89B5F#E78C5B

Palette guide

How to use Golden Hour Embrace

Overview

The Golden Hour Embrace palette captures the ephemeral beauty of sunset with its spectrum of warm, inviting hues. Designers and developers can leverage this joyful and energetic collection for projects aiming to evoke feelings of warmth, summer, and optimism. Featuring a radiant #FFEB8C, a mellow #FFD072, a rich #FFB462, a vibrant #F89B5F, and a deep #E78C5B, this palette is ideal for creating designs that feel sun-drenched and welcoming. Its range from light yellow to a deeper coral provides versatility for gradients and layered visual effects, perfect for digital interfaces or print materials that demand a cheerful and lively aesthetic.

Best used for

Summer-themed product launches and marketing campaigns
Travel blogs and vacation booking platforms
Children's books and toy branding
Outdoor event invitations and promotions
Photography portfolios showcasing natural light
Cozy home decor branding or e-commerce sites

Suggested color roles

primary

#FFD072 - A balanced, inviting warm base for main content blocks, hero sections, or primary brand elements, offering a soft yet present glow.

secondary

#F89B5F - Use for secondary calls-to-action, subheadings, or as a complementary background element to add depth without overpowering.

accent

#E78C5B - A vibrant, earthy coral perfect for highlighting key interactive elements, buttons, or small decorative details that need to pop and draw attention.

background

#FFEB8C - A soft, luminous yellow ideal for light backgrounds, providing a subtle warmth that doesn't distract from foreground elements.

text

Given the brightness of the palette, a dark neutral like #333333 (charcoal) or #000000 (black) is recommended for main body text to ensure readability on lighter backgrounds.

Accessibility notes

Ensure sufficient contrast when placing any text on #FFEB8C or #FFD072; use dark text like charcoal or black.
Avoid using light-colored text (e.g., white or light grey) on #FFB462, #F89B5F, or #E78C5B as it will likely fail WCAG contrast standards.
Check button and link states for adequate contrast against their backgrounds and surrounding text to ensure usability for all users.
The entire palette is warm; consider using different hues or additional visual cues for active/inactive states to provide clearer visual differentiation for colorblind users.

Recommended combinations

Sunny Glow

Ideal for light, airy web headers, gentle gradients, or illustrations requiring a soft, inviting feel, evoking a bright morning sun.

#FFEB8C · #FFD072 · #FFB462

Warm Ember

Excellent for creating depth in illustrations, rich backgrounds, or branding that conveys warmth and coziness, like a fading sunset.

#FFD072 · #F89B5F · #E78C5B

Vibrant Pop

Use for energetic call-to-actions, highlight elements, or playful designs where the brightest and deepest colors create dynamic contrast.

#FFEB8C · #E78C5B · #F89B5F

CSS variables

:root {
  --golden-hour-embrace-1: #FFEB8C;
  --golden-hour-embrace-2: #FFD072;
  --golden-hour-embrace-3: #FFB462;
  --golden-hour-embrace-4: #F89B5F;
  --golden-hour-embrace-5: #E78C5B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "golden-hour-embrace": {
        1: "#FFEB8C",
        2: "#FFD072",
        3: "#FFB462",
        4: "#F89B5F",
        5: "#E78C5B",
      }
    }
  }
}

Hex values

Color 1#FFEB8C

Color 2#FFD072

Color 3#FFB462

Color 4#F89B5F

Color 5#E78C5B

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

1.8:1Fail

2.1:1Fail

1.2:1Fail

1.5:1Fail

1.7:1Fail

1.5:1Fail

1.2:1Fail

1.4:1Fail

1.8:1Fail

1.5:1Fail

1.2:1Fail

2.1:1Fail

1.7:1Fail

1.4:1Fail

1.2:1Fail

Similar palettes

More like Golden Hour Embrace

Golden Hour Embrace

See it in context.

Ready when you are.

Built with Golden Hour Embrace.

How to use Golden Hour Embrace

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sunny Glow

Warm Ember

Vibrant Pop

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Golden Hour Embrace