Back to palettes

Palette

Golden Hour Haze

Warm, muted yellows and tans capturing the soft, diffused light of a gentle sunset.

warmcalm5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F5DEB3#F0E68C#DAA520#D2B48C#E9D6BF

Palette guide

How to use Golden Hour Haze

Overview

The Golden Hour Haze palette offers a serene collection of warm, muted yellows and tans, perfectly capturing the soft, diffused light of a gentle sunset. Featuring the rich goldenrod of #DAA520, the sunny yet subtle #F0E68C, and the grounding tan of #D2B48C, this palette is ideal for creating designs that exude calm and understated elegance. Developers will find these hues excellent for soothing user interfaces, while designers can use them for vintage-inspired branding or tranquil digital art. The lighter #F5DEB3 and #E9D6BF provide soft backgrounds, making this palette versatile for projects requiring a sophisticated yet comforting and natural feel.

Best used for

  • Spa and wellness branding
  • Artisanal craft product packaging
  • Vintage-inspired graphic design
  • Warm photography filters
  • Elegant personal blogs
  • Serene interior design concepts

Suggested color roles

primary

Employ #DAA520 as a sophisticated primary color for key branding elements or important calls to action.

secondary

Use #D2B48C for navigation, secondary content areas, or to add a muted, earthy depth.

accent

Introduce #F0E68C for subtle highlights, interactive elements, or to bring a touch of soft luminosity.

background

Select #F5DEB3 as a gentle, warm background for main content, providing excellent readability for dark text.

text

Pair with a deep brown or charcoal text color for optimal legibility on lighter backgrounds. White text works well on #DAA520.

Accessibility notes

  • Check contrast carefully when using #D2B48C for text on #F5DEB3; ensure it meets accessibility standards.
  • White text on #DAA520 provides strong contrast for headings and buttons.
  • Avoid using #F0E68C for small body text on light backgrounds like #F5DEB3 due to potential low contrast.
  • Ensure all interactive elements have sufficient color contrast for users with visual impairments.

Recommended combinations

Muted Elegance

Creates a sophisticated and grounded aesthetic for web layouts, blending rich gold with earthy tones.

#DAA520 · #D2B48C · #F5DEB3

Soft Sunlight

Ideal for gentle illustrations, background textures, or subtle UI elements, mimicking diffused light.

#F0E68C · #E9D6BF · #F5DEB3

Earthy Depth

Effective for natural product packaging or branding that aims for a wholesome and artisanal feel.

#DAA520 · #D2B48C · #E9D6BF

CSS variables

:root {
  --golden-hour-haze-1: #F5DEB3;
  --golden-hour-haze-2: #F0E68C;
  --golden-hour-haze-3: #DAA520;
  --golden-hour-haze-4: #D2B48C;
  --golden-hour-haze-5: #E9D6BF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "golden-hour-haze": {
        1: "#F5DEB3",
        2: "#F0E68C",
        3: "#DAA520",
        4: "#D2B48C",
        5: "#E9D6BF",
      }
    }
  }
}

Related searches

soft sunset palettemuted golden colorsethereal warm palettevintage tan yellowgentle glow colors

Palette colors

Hex values

Color 1#F5DEB3
·
Color 2#F0E68C
·
Color 3#DAA520
·
Color 4#D2B48C
·
Color 5#E9D6BF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.7:1Fail
1.5:1Fail
1.1:1Fail
2
1:1Fail
1.7:1Fail
1.5:1Fail
1.1:1Fail
3
1.7:1Fail
1.7:1Fail
1.1:1Fail
1.6:1Fail
4
1.5:1Fail
1.5:1Fail
1.1:1Fail
1.4:1Fail
5
1.1:1Fail
1.1:1Fail
1.6:1Fail
1.4:1Fail

Similar palettes

More like Golden Hour Haze

View all warm