Cottagecore Spring Color Psychology & Meaning
Cottagecore spring is a breath of fresh air — literally. These greens evoke just-washed herbs, morning dew on vegetable gardens, and the peace of making something with your hands.
#F0EDE4
#C8E6C0
#8AAD6F
#5C7A40
Background
Primary Accent
Secondary
Body Text
Cottagecore Spring
softnaturalromantic springsummer brandingwellnessfood
Fail
WCAG Grade
4.2:1
Contrast Ratio
2,100
Saves
5,400
AI Copies
Use #F0EDE4 as the background. Use #C8E6C0 as the primary accent. Use #8AAD6F as secondary. Use #5C7A40 as body text/supporting color. Palette mood: Cottagecore Spring — soft, natural, romantic.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Cottagecore Spring 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: 84.7% | 240, 237, 228 | 0%, 1%, 5%, 6% | 45°, 29%, 92% | ||
| Primary Accent Luminance: 72.7% | 200, 230, 192 | 13%, 0%, 17%, 10% | 107°, 43%, 83% | ||
| Secondary Luminance: 36.4% | 138, 173, 111 | 20%, 0%, 36%, 32% | 94°, 27%, 56% | ||
| Body Text Luminance: 16.6% | 92, 122, 64 | 25%, 0%, 48%, 52% | 91°, 31%, 36% |
Color Harmony: Custom Scheme
The Cottagecore Spring 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
Cottagecore as an aesthetic emerged on Tumblr in the early 2010s and exploded during COVID-19 lockdowns in 2020. The spring iteration focuses on growth, newness, and optimism.
Best Design Use Cases
Warm white for surfaces. Sage green for cards and secondary elements. Medium green for interactive elements. Dark green for text and borders.
Industries This Palette Suits
Wellness brands, organic food, sustainable fashion, homeware, small-batch goods.
How to Implement the Cottagecore Spring Color Scheme
To use this Cottagecore Spring 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 #F0EDE4 for the main background and #C8E6C0 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #5C7A40 and #F0EDE4 is 4.16:1 (Fail). Ensure your body text remains legible.