Palette

Golden Hour Zest

A burst of warm, sunny hues with unexpected cool accents, like a vibrant sunset over a playful horizon.

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

#FFBE0B#FB5607#FF006E#8338EC#3A86FF

Palette guide

How to use Golden Hour Zest

Overview

The Golden Hour Zest palette is a vibrant burst of warm, sunny hues with unexpected cool accents, like a playful sunset over a dynamic horizon. This bold collection features bright yellow #FFBE0B, energetic orange #FB5607, vivid magenta #FF006E, striking purple #8338EC, and dynamic blue #3A86FF. Designers can leverage this palette to create high-energy, modern, and youthful designs that are both eye-catching and memorable. It’s perfect for projects that aim to be distinctive and convey a sense of playful innovation, combining the warmth of a sunset with electrifying, cool-toned bursts.

Best used for

Youthful and trendy brand identities
Digital marketing and social media campaigns
Modern app interfaces and web design for creative industries
Festival and event promotional materials
Fashion and lifestyle product branding
Bold and abstract digital artwork

Suggested color roles

primary

Use #FFBE0B as a vibrant primary color for headings or key UI elements, offering a sunny and positive feel.

secondary

Apply #FB5607 for secondary calls-to-action or to add a warm, energetic layer that draws attention.

accent

Reserve #FF006E for impactful accents, critical notifications, or to create a truly unique and playful focal point.

background

Utilize #3A86FF as a bold, modern background, providing a cool contrast to the warm tones, or a light neutral.

text

For optimal readability on #3A86FF, use white. For lighter backgrounds, use #8338EC or a dark charcoal for contrast.

Accessibility notes

Ensure sufficient contrast for text, especially when pairing bright colors like #FFBE0B with #FB5607; use dark text.
The contrast between #3A86FF (blue) and #FFBE0B (yellow) is generally strong, but test for WCAG AA compliance.
Be mindful of colorblindness when using #FF006E (magenta) and #FB5607 (orange) together, as they can appear similar.
Avoid using #FF006E for small text on light backgrounds without stringent contrast checks.

Recommended combinations

Bold Contrast

Creates a dynamic, high-energy visual that immediately captures attention; great for hero sections.

#FFBE0B · #FB5607 · #3A86FF

Playful Energy

Ideal for injecting fun and creativity; suitable for interactive elements or abstract patterns.

#FF006E · #8338EC · #FFBE0B

Dynamic Duo

A powerful and modern combination, perfect for bold branding or vibrant call-to-action blocks.

#FB5607 · #3A86FF · #FF006E

CSS variables

:root {
  --golden-hour-zest-1: #FFBE0B;
  --golden-hour-zest-2: #FB5607;
  --golden-hour-zest-3: #FF006E;
  --golden-hour-zest-4: #8338EC;
  --golden-hour-zest-5: #3A86FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "golden-hour-zest": {
        1: "#FFBE0B",
        2: "#FB5607",
        3: "#FF006E",
        4: "#8338EC",
        5: "#3A86FF",
      }
    }
  }
}

Hex values

Color 1#FFBE0B

Color 2#FB5607

Color 3#FF006E

Color 4#8338EC

Color 5#3A86FF

Accessibility

Contrast checker

2:1Fail

2.3:1Fail

3.4:1AA18

2.1:1Fail

2:1Fail

1.2:1Fail

1.7:1Fail

1.1:1Fail

2.3:1Fail

1.2:1Fail

1.5:1Fail

1.1:1Fail

3.4:1AA18

1.7:1Fail

1.5:1Fail

1.6:1Fail

2.1:1Fail

1.1:1Fail

1.6: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

Bold Contrast

Playful Energy

Dynamic Duo

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Golden Hour Zest