Back to palettes

Palette

Summer Solstice Haze

Captures the soft, golden light and warm, dreamlike atmosphere of a long summer day's end.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Summer Solstice 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 Summer Solstice Haze.

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

Data visualization

#F4A460#DAA520#BDB76B#FFDAB9#FFE4B5

Palette guide

How to use Summer Solstice Haze

Overview

The Summer Solstice Haze palette beautifully captures the soft, golden light and warm, dreamlike atmosphere of a long summer day's end. It features a rich sandy brown (#F4A460), a radiant goldenrod (#DAA520), a muted dark khaki (#BDB76B), a soft peach (#FFDAB9), and a creamy moccasin (#FFE4B5). This collection is perfect for designers and developers seeking to evoke a natural, comforting, or rustic aesthetic. Its harmonious blend of warm, earthy tones makes it ideal for cozy lifestyle brands, vintage-inspired web designs, or serene print materials, fostering a sense of warmth and natural elegance.

Best used for

  • Cozy cafe branding
  • Vintage-inspired website design
  • Natural beauty product packaging
  • Autumn wedding themes
  • Home decor and textile design
  • Photography portfolio backgrounds

Suggested color roles

primary

Use #DAA520 (goldenrod) for prominent branding or calls-to-action, adding a touch of radiant warmth.

secondary

Apply #F4A460 (sandy brown) for secondary navigation or content sections, providing a gentle, earthy foundation.

accent

Introduce #BDB76B (dark khaki) for subtle details, borders, or to add a hint of vintage charm.

background

Employ #FFE4B5 (creamy moccasin) or #FFDAB9 (soft peach) as main background colors, creating a warm and inviting canvas.

text

For optimal readability, use a dark brown, deep olive green, or charcoal for body text and headings against lighter palette colors.

Accessibility notes

  • Ensure sufficient contrast when pairing #FFDAB9 or #FFE4B5 with light text; dark text is generally required.
  • The darker #DAA520 and #F4A460 provide good contrast for white text, suitable for headings or prominent buttons.
  • Text in #BDB76B can be legible on lighter backgrounds, but always check specific contrast ratios.
  • Avoid using #FFDAB9 text on #FFE4B5 background without careful contrast checking due to very similar lightness.

Recommended combinations

Golden Hour

Perfect for warm, inviting headers or hero sections, evoking a serene sunset glow.

#DAA520 · #F4A460 · #FFDAB9

Hazy Earth

Ideal for natural branding or content areas, combining earthy tones with a radiant golden touch.

#BDB76B · #FFE4B5 · #DAA520

Soft Warmth

Use for delicate backgrounds or subtle UI elements, creating a comforting and harmonious blend of warm neutrals.

#F4A460 · #FFDAB9 · #FFE4B5

CSS variables

:root {
  --summer-solstice-haze-2-1: #F4A460;
  --summer-solstice-haze-2-2: #DAA520;
  --summer-solstice-haze-2-3: #BDB76B;
  --summer-solstice-haze-2-4: #FFDAB9;
  --summer-solstice-haze-2-5: #FFE4B5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "summer-solstice-haze-2": {
        1: "#F4A460",
        2: "#DAA520",
        3: "#BDB76B",
        4: "#FFDAB9",
        5: "#FFE4B5",
      }
    }
  }
}

Related searches

warm summer color palettegolden hazy design colorsnatural earthy schemerustic warm neutralssun-baked mellow palette

Palette colors

Hex values

Color 1#F4A460
·
Color 2#DAA520
·
Color 3#BDB76B
·
Color 4#FFDAB9
·
Color 5#FFE4B5
·

Accessibility

Contrast checker

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

Similar palettes

More like Summer Solstice Haze

View all warm