Palette

Golden Hour Zest

Bursting with the intense, radiant hues of a vibrant sunset, brimming with energetic warmth and light.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FAD02E#F9A03F#F3722C#F8961E#F9844A

Palette guide

How to use Golden Hour Zest

Overview

The Golden Hour Zest palette bursts with the intense, radiant hues of a vibrant sunset, brimming with energetic warmth and light. This lively collection features bright yellow #FAD02E, sunny orange #F9A03F, fiery red-orange #F3722C, rich amber #F8961E, and a playful coral #F9844A. It's an exceptionally energetic and cheerful palette, perfect for designers looking to infuse projects with a sense of excitement, youthfulness, and dynamic warmth. The close proximity of these radiant tones creates a visually stimulating and harmonious experience, reminiscent of a truly spectacular and zesty golden hour.

Best used for

Summer-themed marketing and advertising campaigns
Brand identity for energetic food and beverage products
Children's educational apps or vibrant toy packaging
Youth-focused digital interfaces and web design
Festival or outdoor event branding
Digital illustrations and animations requiring high energy

Suggested color roles

primary

Use #F9A03F as the main color for interactive elements and prominent sections, providing a bright, inviting feel.

secondary

Apply #FAD02E for subheadings, background accents, or to offer a sunny, complementary warmth.

accent

Reserve #F3722C for impactful calls-to-action, critical alerts, or to create a bold, energetic focal point.

background

Utilize #FAD02E as a luminous, cheerful background to allow the other vibrant tones to pop.

text

For optimal readability on #FAD02E, use a dark charcoal or black. For headings on darker shades, use white.

Accessibility notes

Ensure high contrast for text, especially when using lighter palette colors for text on #FAD02E; black text is often ideal.
The rich #F3722C provides good contrast against #FAD02E for large text, meeting WCAG AA standards.
Differentiating between the closely related orange/yellow shades (#F9A03F, #F8961E, #F9844A) can be challenging; use with clear visual hierarchy.
Avoid using light text on mid-tone colors like #F9A03F without careful contrast checking.

Recommended combinations

Citrus Burst

Creates an energetic, vibrant gradient ideal for hero banners or impactful visual statements.

#FAD02E · #F9A03F · #F3722C

Energetic Glow

Provides a warm, harmonious blend, suitable for content blocks or background textures.

#F9A03F · #F8961E · #F9844A

Sunset Vibrancy

A balanced and inviting combination, perfect for branding elements or section headers.

#FAD02E · #F3722C · #F9844A

CSS variables

:root {
  --golden-hour-zest-2-1: #FAD02E;
  --golden-hour-zest-2-2: #F9A03F;
  --golden-hour-zest-2-3: #F3722C;
  --golden-hour-zest-2-4: #F8961E;
  --golden-hour-zest-2-5: #F9844A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "golden-hour-zest-2": {
        1: "#FAD02E",
        2: "#F9A03F",
        3: "#F3722C",
        4: "#F8961E",
        5: "#F9844A",
      }
    }
  }
}

Hex values

Color 1#FAD02E

Color 2#F9A03F

Color 3#F3722C

Color 4#F8961E

Color 5#F9844A

Accessibility

Contrast checker

1.4:1Fail

1.9:1Fail

1.5:1Fail

1.7:1Fail

1.4:1Fail

1.1:1Fail

1.2:1Fail

1.9:1Fail

1.4:1Fail

1.3:1Fail

1.2:1Fail

1.5:1Fail

1.1:1Fail

1.3:1Fail

1.1:1Fail

1.7:1Fail

1.2:1Fail

1.1:1Fail

Similar palettes

More like Golden Hour Zest

Golden Hour Zest

See it in context.

Ready when you are.

Built with Golden Hour Zest.

How to use Golden Hour Zest

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Citrus Burst

Energetic Glow

Sunset Vibrancy

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Golden Hour Zest