Summer Solstice Color Psychology & Meaning
Summer Solstice is the longest day at its peak — maximum sunshine, golden saturated light, and the warmth that seems to last forever.
#FFF9C4
#FDD835
#F9A825
#E65100
Background
Primary Accent
Secondary
Body Text
Summer Solstice
warmvibrantbold summer brandinglifestylefood
Fail
WCAG Grade
3.5:1
Contrast Ratio
2,891
Saves
7,823
AI Copies
Use #FFF9C4 as the background. Use #FDD835 as the primary accent. Use #F9A825 as secondary. Use #E65100 as body text/supporting color. Palette mood: Summer Solstice — warm, vibrant, bold.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Summer Solstice color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 93.0% | 255, 249, 196 | 0%, 2%, 23%, 0% | 54°, 100%, 88% | ||
| Primary Accent Luminance: 70.3% | 253, 216, 53 | 0%, 15%, 79%, 1% | 49°, 98%, 60% | ||
| Secondary Luminance: 48.3% | 249, 168, 37 | 0%, 33%, 85%, 2% | 37°, 95%, 56% | ||
| Body Text Luminance: 22.7% | 230, 81, 0 | 0%, 65%, 100%, 10% | 21°, 100%, 45% |
Color Harmony: Analogous Scheme
The Summer Solstice palette is built using a analogous relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A analogous palette is often preferred by professional designers because it creates a calm, serene atmosphere by using neighboring colors.
History & Design Context
Midsummer celebrations in Scandinavian, Celtic, and Slavic cultures have documented this peak-yellow aesthetic for millennia. The summer solstice is the most painted astronomical event.
Best Design Use Cases
Pale golden cream for backgrounds. Deep yellow for primary brand elements. Warm amber for interactive. Deep orange for urgency.
Industries This Palette Suits
Summer campaigns, outdoor brands, food, festivals.
How to Implement the Summer Solstice Color Scheme
To use this Summer Solstice color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #FFF9C4 for the main background and #FDD835 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #E65100 and #FFF9C4 is 3.54:1 (Fail). Ensure your body text remains legible.