Calm App Color Psychology & Meaning
Calm's deep blue signals the opposite of anxiety. It's the color of deep water and clear sky — both things we associate with the feeling of having nothing pressing to do.
#1C4A6B
#4A9FD8
#F5E6D0
#FFFFFF
Background
Primary Accent
Secondary
Body Text
Calm App
calmdeeppeaceful all appwellnessbranding
AAA
WCAG Grade
9.4:1
Contrast Ratio
2,900
Saves
7,800
AI Copies
Use #1C4A6B as the background. Use #4A9FD8 as the primary accent. Use #F5E6D0 as secondary. Use #FFFFFF as body text. Palette: Calm App — calm, deep, peaceful.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Calm App 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: 6.2% | 28, 74, 107 | 74%, 31%, 0%, 58% | 205°, 59%, 26% | ||
| Primary Accent Luminance: 31.2% | 74, 159, 216 | 66%, 26%, 0%, 15% | 204°, 65%, 57% | ||
| Secondary Luminance: 80.6% | 245, 230, 208 | 0%, 6%, 15%, 4% | 36°, 65%, 89% | ||
| Body Text Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% |
Color Harmony: Split-Complementary Scheme
The Calm App palette is built using a split-complementary relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A split-complementary palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Calm launched in 2012 and grew significantly during COVID-19. Their blue-deep identity contrasts with Headspace's warm orange, positioning them as the more serious, premium meditation option.
Best Design Use Cases
Deep ocean blue for primary brand surfaces. Light blue for secondary and breathing room. Warm cream for accent warmth. White for content.
Industries This Palette Suits
Meditation, sleep apps, mental wellness, mindfulness, breathing exercises.
How to Implement the Calm App Color Scheme
To use this Calm App 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 #1C4A6B for the main background and #4A9FD8 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #FFFFFF and #1C4A6B is 9.37:1 (AAA). Ensure your body text remains legible.