Calm Green Color Psychology & Meaning
Calm green sits at the exact saturation where green creates the strongest reduction in cortisol — neither too bright (stimulating) nor too muted (boring). This is green optimized for peace.
#F0FFF4
#BBF7D0
#22C55E
#15803D
Background
Primary Accent
Secondary
Body Text
Calm Green
calmingnaturalpositive springsummer wellnesshealthcarebranding
AA
WCAG Grade
4.9:1
Contrast Ratio
2,200
Saves
5,900
AI Copies
Use #F0FFF4 as the background. Use #BBF7D0 as the primary accent. Use #22C55E as secondary. Use #15803D as body text. Palette: Calm Green.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Calm Green 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: 96.6% | 240, 255, 244 | 6%, 0%, 4%, 0% | 136°, 100%, 97% | ||
| Primary Accent Luminance: 81.6% | 187, 247, 208 | 24%, 0%, 16%, 3% | 141°, 79%, 85% | ||
| Secondary Luminance: 41.1% | 34, 197, 94 | 83%, 0%, 52%, 23% | 142°, 71%, 45% | ||
| Body Text Luminance: 15.9% | 21, 128, 61 | 84%, 0%, 52%, 50% | 142°, 72%, 29% |
Color Harmony: Analogous Scheme
The Calm Green 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
Color psychology research on healthcare environments in the 1990s-2000s identified specific green values that reduced patient anxiety. These values have been formalized in healthcare design guidelines.
Best Design Use Cases
Very light mint for surfaces. Soft green for cards. Mid green for interactive. Deep green for text. Scientifically calm.
Industries This Palette Suits
Healthcare, mental health, wellness, hospitals, therapy apps, meditation.
How to Implement the Calm Green Color Scheme
To use this Calm Green 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 #F0FFF4 for the main background and #BBF7D0 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #15803D and #F0FFF4 is 4.85:1 (AA). Ensure your body text remains legible.