Back to palettes

Palette

Summer Solstice Haze

Captures the golden warmth and vibrant freshness of the longest day of the year.

warmenergetic5 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

#FFD166#FF9966#FF6F61#CCE5FF#99FF99

Palette guide

How to use Summer Solstice Haze

Overview

The Summer Solstice Haze palette captures the radiant warmth and vibrant freshness of the longest day of the year. This joyful collection features a golden yellow (#FFD166), a soft sun-kissed orange (#FF9966), a lively coral red (#FF6F61), a serene sky blue (#CCE5FF), and a fresh meadow green (#99FF99). It's an energetic blend, perfect for designs that aim to evoke happiness, warmth, and the carefree spirit of summer. Designers can leverage its bright yet harmonious balance for diverse projects.

Best used for

  • Summer-themed marketing campaigns
  • Children's product branding
  • Casual mobile app interfaces
  • Event invitations and decor
  • Cheerful blog and social media graphics
  • Refreshing web design and UI elements

Suggested color roles

primary

Use #FFD166 as a main cheerful tone for backgrounds, headers, or large graphical elements, exuding warmth.

secondary

Apply #FF9966 to add depth and a sun-kissed feel, ideal for supporting sections or interactive elements.

accent

Employ #FF6F61 for vibrant calls to action, highlights, or small, impactful graphical details.

background

Utilize #CCE5FF for a light, airy, and calming base that allows warmer colors to pop, or for subtle gradients.

text

For optimal readability, use a dark charcoal or black text against lighter shades, or white text against darker accents like #FF6F61.

Accessibility notes

  • Ensure sufficient contrast when placing text on light colors like #FFD166 or #99FF99, opting for dark text.
  • Avoid using #FF6F61 text on #FF9966 backgrounds due to potential low contrast for some users.
  • The light blue #CCE5FF provides a good base for dark text, enhancing readability.
  • White text on #FF6F61 offers good contrast for headlines and prominent elements.

Recommended combinations

Golden Sunset

Create warm, inviting gradients or highlight focal points with a vibrant, energetic feel.

#FFD166 · #FF9966 · #FF6F61

Sky & Meadow

Perfect for fresh, natural, and harmonious themes, such as eco-friendly branding or serene UI elements.

#CCE5FF · #99FF99 · #FFD166

Bright Pop

Use for dynamic headers, cheerful illustrations, or to create a playful contrast in layouts.

#CCE5FF · #FF6F61 · #FFD166

CSS variables

:root {
  --summer-solstice-haze-1: #FFD166;
  --summer-solstice-haze-2: #FF9966;
  --summer-solstice-haze-3: #FF6F61;
  --summer-solstice-haze-4: #CCE5FF;
  --summer-solstice-haze-5: #99FF99;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "summer-solstice-haze": {
        1: "#FFD166",
        2: "#FF9966",
        3: "#FF6F61",
        4: "#CCE5FF",
        5: "#99FF99",
      }
    }
  }
}

Related searches

summer color schemesbright happy palettejoyful design colorswarm light palettesolstice colors

Palette colors

Hex values

Color 1#FFD166
·
Color 2#FF9966
·
Color 3#FF6F61
·
Color 4#CCE5FF
·
Color 5#99FF99
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.9:1Fail
1.1:1Fail
1.2:1Fail
2
1.5:1Fail
1.3:1Fail
1.6:1Fail
1.7:1Fail
3
1.9:1Fail
1.3:1Fail
2.1:1Fail
2.2:1Fail
4
1.1:1Fail
1.6:1Fail
2.1:1Fail
1.1:1Fail
5
1.2:1Fail
1.7:1Fail
2.2:1Fail
1.1:1Fail

Similar palettes

More like Summer Solstice Haze

View all warm
Golden Hour Embrace
Midday Sun Daze
Sun-Drenched Lemon Grove
Sunset Dust Hues
Amber Nectar
Bright Autumn Orchard