Spring Garden Color Psychology & Meaning
Spring Garden captures the explosive optimism of new growth — fresh greens pushing through, impossibly vivid after winter's restraint.
#F9FBE7
#AED581
#7CB342
#33691E
Background
Primary Accent
Secondary
Body Text
Spring Garden
earthycoolcalm spring brandinglifestyleweb
AA
WCAG Grade
6.3:1
Contrast Ratio
2,341
Saves
6,102
AI Copies
Use #F9FBE7 as the background. Use #AED581 as the primary accent. Use #7CB342 as secondary. Use #33691E as body text/supporting color. Palette mood: Spring Garden — earthy, cool, calm.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Spring Garden 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: 94.9% | 249, 251, 231 | 1%, 0%, 8%, 2% | 66°, 71%, 95% | ||
| Primary Accent Luminance: 58.2% | 174, 213, 129 | 18%, 0%, 39%, 16% | 88°, 50%, 67% | ||
| Secondary Luminance: 36.9% | 124, 179, 66 | 31%, 0%, 63%, 30% | 89°, 46%, 48% | ||
| Body Text Luminance: 10.9% | 51, 105, 30 | 51%, 0%, 71%, 59% | 103°, 56%, 26% |
Color Harmony: Custom Scheme
The Spring Garden palette is built using a custom relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A custom palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Spring has been depicted in art since antiquity — Botticelli's Primavera (1482) established many of the visual conventions for spring freshness and renewal.
Best Design Use Cases
Very pale yellow-green for generous surfaces. Bright leaf green for energy. Mid-green for structure. Deep forest for anchoring text.
Industries This Palette Suits
Spring campaigns, garden brands, wellness, agriculture.
How to Implement the Spring Garden Color Scheme
To use this Spring Garden 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 #F9FBE7 for the main background and #AED581 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #33691E and #F9FBE7 is 6.28:1 (AA). Ensure your body text remains legible.