Color collection
Ocean Blue Color Palettes
Ocean blue palettes for travel, wellness, fintech, and calm digital products.
OceanBlueCalm
Best for: travel pages, wellness brands, and calm SaaS productsExport: CSS, Tailwind, JSON, SVGPreview: dashboard, landing, mobile UI
Ocean Blue 13Ocean / Blue / CalmQuality 98Primary
#3182D8Accent#D67351Surface#EBEEF4Text#121821Support#CE82A7Ocean Blue 14Ocean / Blue / CalmQuality 98Primary#3153D8Accent#D6B151Surface#EBECF4Text#121421Support#CE8291Ocean Blue 1Ocean / Blue / CalmQuality 95Primary#D84531Accent#D6A851Surface#F4EEEBText#211512Support#82CE8BOcean Blue 2Ocean / Blue / CalmQuality 95Primary#D87431Accent#C7D651Surface#F4F0EBText#211912Support#82CEA1Ocean Blue 8Ocean / Blue / CalmQuality 95Primary#31D842Accent#515DD6Surface#EBF4EDText#122115Support#8A82CEOcean Blue 9Ocean / Blue / CalmQuality 95Primary#31D871Accent#D651A3Surface#EBF4F0Text#122119Support#9F82CEHow to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for travel pages, wellness brands, and calm SaaS products. Combine ocean blues with sand or white surfaces for a clear coastal feel.
Every generated palette is sorted by a UI quality score that favors readable text, clear surface separation, and controlled saturation.
UI previewPrimary
Card
Button
Accent
CSS Variables
:root {
--primary: #3182D8;
--accent: #D67351;
--surface: #EBEEF4;
--text: #121821;
--support: #CE82A7;
}Text / Surface contrast: 15.33:1
FAQ
Where should I use ocean blue color palettes?
These palettes are designed for travel pages, wellness brands, and calm SaaS products.
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?
Combine ocean blues with sand or white surfaces for a clear coastal feel.