Spa Wellness Color Psychology & Meaning
Spa Wellness is the color of a Japanese onsen surrounded by pine trees — warm stone, soft green, steam rising. It triggers the relaxation response on sight.
#F0EDE8
#8FBC8F
#B8D8BA
#4A6741
Background
Primary Accent
Secondary
Body Text
Spa Wellness
pastelearthycalm springsummer brandinginteriorbeauty
AA
WCAG Grade
5.4:1
Contrast Ratio
2,102
Saves
5,623
AI Copies
Use #F0EDE8 as the background. Use #8FBC8F as the primary accent. Use #B8D8BA as secondary. Use #4A6741 as body text/supporting color. Palette mood: Spa Wellness — pastel, earthy, calm.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Spa Wellness 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.9% | 240, 237, 232 | 0%, 1%, 3%, 6% | 38°, 21%, 93% | ||
| Primary Accent Luminance: 43.8% | 143, 188, 143 | 24%, 0%, 24%, 26% | 120°, 25%, 65% | ||
| Secondary Luminance: 62.8% | 184, 216, 186 | 15%, 0%, 14%, 15% | 124°, 29%, 78% | ||
| Body Text Luminance: 11.5% | 74, 103, 65 | 28%, 0%, 37%, 60% | 106°, 23%, 33% |
Color Harmony: Custom Scheme
The Spa Wellness 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
High-end spa design has been studied for its psychological effects on guests. The combination of warm neutrals and soft greens is consistently rated as most relaxing.
Best Design Use Cases
Warm linen for all surfaces. Soft moss green for the dominant accent. Deeper sage for structure. Never introduce anything bright or urgent.
Industries This Palette Suits
Wellness, spa, beauty, meditation, yoga brands.
How to Implement the Spa Wellness Color Scheme
To use this Spa Wellness 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 #F0EDE8 for the main background and #8FBC8F for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #4A6741 and #F0EDE8 is 5.44:1 (AA). Ensure your body text remains legible.