Color collection
Calm Blue Color Palettes
Calm blue palettes for healthcare, fintech, wellness, productivity, and trust-focused SaaS products.
#968EE1Accent#BDE89CSurface#EBE7F9Text#151221Support#CE8A82Calm Blue 10Calm / Blue / TrustQuality 91Primary#8EE198Accent#B39CE8Surface#E7F9EBText#122115Support#8B82CECalm Blue 11Calm / Blue / TrustQuality 91Primary#8EE1AFAccent#D69CE8Surface#E7F9F0Text#122119Support#A182CECalm Blue 16Calm / Blue / TrustQuality 91Primary#8E9DE1Accent#E0E89CSurface#E7E8F9Text#121421Support#CE8290Calm Blue 9Calm / Blue / TrustQuality 90Primary#9CE18EAccent#9CA9E8Surface#E7F9E7Text#142112Support#828FCECalm Blue 12Calm / Blue / TrustQuality 90Primary#8EE1C7Accent#E89CB4Surface#E7F9F5Text#12211DSupport#B682CEHow to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for healthcare products, fintech apps, wellness tools, and SaaS pages. Use blue as a trust anchor and introduce warm support colors only where attention is needed.
Every generated palette is sorted by a UI quality score that favors readable text, clear surface separation, and controlled saturation.
CSS Variables
:root {
--primary: #968EE1;
--accent: #BDE89C;
--surface: #EBE7F9;
--text: #151221;
--support: #CE8A82;
}FAQ
Where should I use calm blue color palettes?
These palettes are designed for healthcare products, fintech apps, wellness tools, and SaaS pages.
Can I copy these colors into a design system?
Yes. Each palette includes clear interface roles such as Primary, Accent, Surface, Text, and Support.
How do I avoid low contrast?
Use blue as a trust anchor and introduce warm support colors only where attention is needed.